HTML - 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 element, because each one can fall into one of two categories; Block Level Element. 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 appears 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 sentence 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 

You May Also Like...

Subscribe Us