HTML Elements are classified as Block Level and Inline Level elements on the basics of their display. Some elements display as blocks and some are inline.
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.
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. |
| ol Tag | <ol> </ol> | Create new Ordered List. |
| Address | <address> </address> | Create Postal Address |
| Headings | <h1> </h1>, <h2> </h2> till <h6> </h6> | Create Headings and sub-headings. |
| Form Tag | <form> </form> | Used to group Form controls and send form data. |
| Fieldset | <fieldset> </fieldset> | This is a fieldset, used to group form element. |
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 . | |
| del tag | <del> </del> | Shows deleted text . | |
| 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 |
