What are inline elements and block level elements in HTML5 ?

Block elements

Examples of Block elements

  • <h1>-<h6> - This element is used for including headings of different sizes ranging from 1 to 6.
  • <div> - This is a container tag and is used to make separate divisions of content on the web page.
  • <hr> - This is an empty tag and is used for separating content by horizontal lines.
  • <li> - This tag is used for including list items of an ordered or unordered list.
  • <ul> - This tag is used to make an unordered list.
  • <ol> - This tag is used to make an ordered list.
  • <p> - This tag is used to include paragraphs of content in the webpage.
  • <table> - This tag is used for including the tables in the webpage when there is a need for tabular data.


Examples of HTML 5 Semantic block elements

  • <header> - This tag is used for including all the main things of the webpage like navbar, logos, and heading of the webpage.
  • <nav> - This tag helps to navigate through different sections by including different blocks of hyperlinks in the webpage.
  • <footer> - This contains all information about the authorization, contact, and copyright details of the webpage.
  • <main> - The main content of the webpage resides in this tag.
  • <section> - This is used separate different sections in the webpage.
  • <article> - This tag is used to include different independent articles on the webpage.
  • <aside> - This tag is used to mention details of the main content aside.


Examples of Inline elements

  • <a> - This tag is used for including hyperlinks in the webpage.
  • <br> - This tag is used for mentioning line breaks in the webpage wherever needed.
  • <script> - This tag is used for including external and internal JavaScript codes.
  • <input> - This tag is used for taking input from the users and is mainly used in forms.
  • <img> - This tag is used for including different images in the webpage to add beauty to the webpage.
  • <span> - This is an inline container that takes necessary space only.
  • <b> - This tag is used in places where bold text is needed.
  • <label> - The tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control.


Difference between Inline and Block elements

Inline Elements

  • Inline elements occupy only sufficient width required.
  • Inline elements don’t start in a new line.
  • Inline elements allow other inline elements to sit behind.
  • Inline elements don’t have top and bottom margin.


Block Elements

  • Block Elements occupy the full width irrespective of their sufficiency.
  • Block elements always start in a line.
  • Block elements doesn’t allow other elements to sit behind.
  • Block elements have top and bottom margin.