HTML Block And Inline Level Elements Difference - Tech Altum Tutorial

Trang chủ » Html Block Elements Display » HTML Block And Inline Level Elements Difference - Tech Altum Tutorial

Có thể bạn quan tâm

  • HTML Tutorial
  • HTML Tags
  • HTML Attributes
  • HTML Text
  • HTML Headings
  • Block & Inline Elements
  • HTML Lists
  • Hyperlink
  • HTML Images
  • HTML Iframes
  • HTML Entities
  • HTML Meta Tag
  • HTML Tables
  • HTML Form
  • HTML5
  • HTML5 New Tags
  • HTML5 Attributes
  • HTML5 Vs HTML4
  • HTML5 Audio and Video
  • HTML5 Form.
  • HTML5 SVG.
  • HTML5 Canvas.
  • HTML5 Geolocation.
  • Local & Session Storage
  • HTML Marquee
  • Doctypes in HTML
  • XHTML
  • DHTML
  • ← HTML Headings
  • HTML List →
HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews
  1. Home
  2. Frontend
  3. Html
  4. Block ans Inline Elements
  1. Block Vs Inline
  2. Block Elements
  3. Inline Elements

HTML Elements are classified as Block Level and Inline Level elements on the basis of their display. Some elements display as blocks and some are inline.

To check an HTML Element is block or inline, open browser inspect and check display property in user agent stylesheet. If its display: block, it is block level, else it is inline level.

Block Vs Inline level Elements

<p> <div> <h1> < h2> <address> etc are block level elements, whereas <b>, <strong>, <i>, <span>, <u> and <s> are inline level elements.

html Block Inline Elements
HTML Block and inline Elements

A block level element can have both inline and block elements as children or descendants, but inline level elements can have only inline elements as children or descendant. (Except anchor tag or hyperlink).

HTML Block Elements

HTML Block level elements are elements who behave like blocks, like <p>, <h1>, <div>, <ul>, <ol>, <pre> and <address>. These elements always starts from a new line and occupy full width of parent element. Block elements can contain both inline elements and block elements. Here are some block elements.

HTML Block Level Elements List

Element Name Code Use
Html Tag <html> </html> Root tag to build html page.
Body Tag <body> </body> To group visible content of a webpage.
Para Tag <p> </p> Create new paragraph
Pre Tag <pre> </pre> Create pre formatted text.
hr <hr> Thematic Break or formally known as Horizontal rule, used to break with 2px gradient shadow.
Blockquote <blockquote> </blockquote> Create a blockquote from new line.
Div Tag <div> </div> Create new New Division
ul Tag <ul> </ul> Create new Unordered List. Unordered List
ol Tag <ol> </ol> Create new Ordered List. Ordered List
Address <address> </address> Create Postal Address
Headings <h1> </h1>, <h2> </h2> till <h6> </h6> Create Headings and sub-headings.HTML Headings
Form Tag <form> </form> Used to group Form controls and send form data.. HTML Form
Fieldset <fieldset> </fieldset> This is a fieldset, used to group form element.

←Swipe to See more →

HTML Block Level elements always start from a new line and occupy full width of parent element. They support width, height and text-align as they occupy full width of container.

HTML Inline Elements

HTML inline elements always start in the same line. Their width is equal to their content. Maximum inline elements are presentational, for exp, <b>, <i>, <s>, <u>. Some functional inline elements are <strong>, <em>, <del>, <time> etc.

HTML Inline Level Elements List

Element Name Code Use Example
span <span> </span> Used to group inline elements. span tag
hyperlink <a href=""></a> Used to create hyperlinks. hyperlink
b Tag <b> </b> Used to give bold appearance. bold text
i Tag <i> </i> Presentational Element used to italicize text. italic text
Strong Tag <strong> </strong> Gives bold appearance and highlight content in searching . strong tag.
em tag <em> </em> emphasis text and highlight content in searching . emphasis
small tag <small></small> small print. small text
u tag <u> </u> underline text. underlined
s tag <s> </s> Shows struck text . struck text
del tag <del> </del> Shows deleted text . delete
sup tag <sup> </sup> Shows superscript text. 2 * 103.
sub tag <sub> </sub> Shows subscript text . H2O.
abbr tag <abbr title="Prime Minister">PM</abbr> Shows full version of abbreviation in title tag . He is the PM.
kbd tag <kbd> </kbd> Shows keyboard command . press Ctrl + p.
code tag <code> </code> To show computer code . var x = "ab";
q tag <q> </q> To show quotes . quoted text.
cite tag I resides in <cite>India </cite> To show cited title of work. I resides in India.
samp tag <samp> </samp> To show sample. This is a sample password.
ins tag <ins> </ins> To indicate addition to document This is inserted text for above column
var tag <var> </var> to show variables in code x +y = z
output tag <output> </output> to show output of program. + = 2

←Swipe to See more →

HTML Inline Level elements are elements generally used inside block level elements. They doesn't support width, height and text-align as are used inside line. Only <img> tag supports width and height.

Div tag

Html div tag is used to create divisions. Div is block level, thus starts from new line and occupy full width of parent. Div can group all block level elements.

<div> // content inside div </div>

Span tag

Html span tag is used to create division inside line. Span is inline level, thus starts in the same line and occupy width of content. Span is used to group inline level elements.

<span> // content inside div </span>
  • ← HTML Headings
  • HTML List →

Từ khóa » Html Block Elements Display