Block Vs Inline level Elements

html Block Inline Elements
HTML Block and inline Elements

HTML Elements are classified as Block Level and Inline Level elements on the basics of their display behaviour. <p> <div> <h1> < h2> <address> etc are block level elements, whereas <b>, <strong>, <i>, <span>, <u> and <s> are inline level elements.

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

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 in 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
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 Tag <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 Tag <address> </address> Create Postal Address
Heading Tag <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 Tag <fieldset> </fieldset>
This is a fieldset, used to group form element.

←Swipe to See more →

HTML Block Level elements always start on a new line and occupy full width of parent elements. They support width, height and text-aligh 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 Tag <span> </span> Used to group inline elements. I am span.
anchor Tag <a href="">Link</a> Used to create hyperlinks. I am hyperlink.
b Tag <b> </b> Used to give bold appearance. I am bold.
i Tag <i> </i> Presentational Element used to italicize text. I am italic.
Strong Tag <strong> </strong> Gives bold appearance and highlight content in searching . I am strong.
em tag <em> </em> Italicize text and highlight content in searching . I am em.
small tag I am <small>small</small> small print. I am small.
u tag <u> </u> underline text. I am underlined.
del tag <del> </del> Shows deleted text . Product Price is ₹100 95.
s tag <s> </s> Shows struck text . I am struck text.
sup tag <sup> </sup> Shows superscript text. 2000 = 2 * 103.
sub tag <sub> </sub> Shows subscript text . Chemical formula of water is H2O.
abbr tag <abbr title="Prime Minister">PM</abbr> Shows full version of abbreviation in title tag . He is our PM.
kbd tag <kbd> </kbd> Shows keyboard command . To print this page, press Ctrl + p.
code tag <code> </code> To show computer code . Here is the equation var x = "string";.
q tag <q> </q> To show quotes . This is a quote.
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.

←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.

    // content inside 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.

    // content inside div