HTML – Block Level and Inline Element

Block Level and Inline Element

You have seen many of the elements that can be used to mark up text; it is important to make an observation about all the elements that live inside the <body> element because each one can fall into one of two categories;

  • Block Level Element. 
  • Inline Element. 

Block Level Element

Block-level elements appear on the screen as if they have a carriage return or line break before and after them.

For example, the <p>, <h1>, <h2>,<h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> elements are all block level elements.   

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on new lines of their own.

The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> and <var> element are all inline elements. 

HTML Code for Block Level Element

<html>
<head></head>
<body>
<h1>Hello World</h1>
<p>Say Hello 2 World </p>
<h2>Hello World</h2>
<p>Say Hello 2 World </p>
</body>
</html>

Output


Hello World


Say Hello 2 World


Hello World


Say Hello 2 World

HTML Code for Inline Element

<html>
<head></head>
<body>
<p>Say <b>Hello</b> 2 <strong>World Say </strong><i>Hello 2</i> <u>World Say Hello 2 World</u> Say Hello 2 World Say Hello 2 World </p>
</body>
</html>

Output

Say Hello 2 World Say Hello 2 World Say Hello 2 World Say Hello 2 World Say Hello 2 World