Inline Elements : Inline elements take up only enough width that is sufficient to them and allow other elements next to it inline. They do not have top and bottom margins as block elements have only the left and right and consider the padding.
Examples of Inline elements :
<a> : This inline element includes hyperlinks in the webpage.
<br> : This inline element mentions line breaks in the webpage where ever needed.
<script> : This inline element is used to include external and internal JavaScript codes.
<input> : This inline element accepts input from the users and is mainly used in forms.
<img> : This inline element includes different images in the webpage to add beauty to the webpage.
<span> : This inline element is an inline container that takes necessary space only.
<b> : This inline element is used in places where bold text is needed.
<label> : This inline element provides a usability improvement for mouse users, i.e., if a user clicks on the text within the <label> element, it toggles the control.
Block Elements : Block elements are types of blocks that contain many elements in a line itself. They consider top and bottom margins and don't contain any other elements next to them. They consume the full width available and always start in a new line.
Examples of Block elements :
<h1>-<h6> : These elements include headings of different sizes ranging from 1 to 6. Here, the smaller the number, the bigger the heading size.
<div> : This element is used to make separate content divisions on the web page.
<li> : This block element includes list items of an ordered or unordered list.
<ul> : This block element is used to make an unordered list.
<ol> : This block element is used to make an ordered list.
<hr> : This block element is an empty tag used to separate content by horizontal lines.
<p> : This block element includes paragraphs of content in the webpage.
<table> : This block element includes the tables in the web page when it requires tabular data.
HTML 5 Semantic block elements :
<header> : This semantic block element includes all the main things of the webpage like navbar, logos, and heading of the webpage.
<nav> : This semantic block element helps navigate different sections by including different blocks of hyperlinks in the webpage.
<footer> : This semantic block element contains all information about the web page's authorization, contact, and copyright details.
<main> : This semantic block element is used to specify the main content of the webpage.
<section> : This semantic block element is used to specify separate different sections in the webpage.
<article> : This semantic block element includes different independent articles on the webpage.
<aside> : This semantic block element mentions details of the main content aside.
