Web Development

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 <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 

Tuts

About Author

Tutsmaster.org provides tutorials related to tech and programmings. We are also setting up a community for the users and students.

You may also like

HTML introduction
Web Development

HTML – Introduction, History & Syntax

  • December 21, 2019
So, first of all, I would like to ask a question for the first time when you heard this term
html heading tag
Web Development

HTML – Heading Tag With Syntax

  • December 21, 2019
A heading tag is one of the most important tags we focus on in HTML or web development because, without