Types of HTML Elements

Types of elements in html

There are two Types of HTML Elements according to the display values, namely :

  • Block-level Elements
  • Inline Elements

Block-level HTML Elements :

  • Block HTML elements always starts with a new line and browsers automatically adds some margin.
  • Block element takes up the whole horizontal space of its parent element and the height is equal to the content’s height. 

Ex – Div tag, Paragraph tag, Marquee tag & much more are Block elements

  • They are meant to structure the main parts of the page, by dividing the content in coherent blocks.
  • <p> and <div> which defines a paragraph and a section in an HTML document respectively are two common examples of the block-level elements.

For Example :

<!DOCTYPE html>
<html>
<body>
<p>Techno Brainz</p>
<div>Advanced HTML</div>
</body>
</html>

Output :

Block_level HTML Elements

Block Elements are:

HTML <address> Tag
HTML <blockquote> Tag
HTML <dd> Tag
HTML <Div> Tag
HTML <dl> Tag 
HTML <dt> Tag
HTML <canvas> Tag
HTML <form> Tag
HTML <Heading> Tag
HTML <hr> Tag
HTML <li> Tag
HTML <main> Tag
HTML <nav> Tag
HTML <noscript> Tag
HTML <ol> Tag
HTML <pre> Tag
HTML <section> Tag
HTML <tfoot> Tag
HTML <ul> Tag
HTML Tables
HTML Paragraphs
HTML5 <Video> Tag
HTML5 <aside> Tag
HTML5 <article> Tag
HTML5 <figcaption> Tag
HTML5 <fieldset> Tag
HTML5 <figure> Tag
HTML5 <footer> Tag
HTML 5 <header> Tag

Inline HTML Elements :

  • Types of HTML Elements that are opposite to block-level elements and they do not start from a new line.
  • They only takes up as much width as necessary & height according to the height of content in it.

Ex – Span tag, button tag, sub/sup tag & much more are Inline elements

  • They are meant to differentiate part of a text, to give it a meaning.
  • <span> and <strong> which is used to markup a text and used to bold the content to state it’s importance respectively are two common examples of the inline elements.

For Example : We have used Div Tag (Block Element) and used Span tag (Inline Element) to differentiate between elements.

<!DOCTYPE html>
<html>
<body>
<div>Hello World</div>
<span>Techno Brainz</span>
<span>Techno Brainz</span>
<div><strong>Hello</strong> World</div>
</body>
</html>

Output :

Inline_example HTML Elements

Inline Elements are:

HTML <br> Tag
HTML <button> Tag
HTML <time> Tag
HTML <tt> Tag
HTML <var> Tag
HTML <a> Tag
HTML <abbr> Tag
HTML <acronym> Tag
HTML <b> Tag
HTML <cite> Tag
HTML <code> Tag
HTML <dfn> Tag
HTML <em> Tag
HTML <i> Tag
HTML <output> Tag
HTML <q> Tag 
HTML <samp> Tag
HTML <script> Tag
HTML <select> Tag
HTML <small> Tag
HTML <span> Tag
HTML <strong> Tag
HTML <sub> Tag
HTML <sup> Tag
HTML <textarea> tag
HTML <bdo> Tag
HTML <big> Tag
HTML <img> Tag
HTML <input> Tag
HTML <kbd> Tag
HTML <label> Tag
HTML <map> Tag
HTML <Object> tag

Summary :-

Block ElementInline Element
These HTML elements always starts with a new line and occupies 100% width.Types of HTML Elements that are opposite to block-level elements and they do not start from a new line.
They takes up the whole horizontal space of its parent element and the height is equal to the content’s height. They only takes up as much width as necessary.
They are meant to structure the main parts of the page, by dividing the content in coherent blocks.They are meant to differentiate part of a text, to give it a meaning.
<p> and <div> which defines a paragraph and a section in an HTML document respectively are two common examples of the block-level elements.<span> and <strong> which is used to markup a text and used to bold the content to state it’s importance respectively are two common examples of the inline elements.

Note :-

Watch HTML Ordered List video on YouTube – Click here
Watch HTML Unordered List video on YouTube – Click here

Topic

Join Telegram Group