HTML Block and Inline Elements-How HTML

HTML Block and Inline Elements

When creating a web page using HTML, it’s important to understand the differences between block and inline elements. Block elements typically start on a new line and take up the full width available, while inline elements only take up as much width as necessary and do not start on a new line. In this article, we’ll discuss the various HTML block and inline elements and provide examples of each.

Block Elements

Example 1: \

div> Element

<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<div>how2html.com</div>
</body>
</html>

Output:

HTML Block and Inline Elements

Example 2: \

Element

<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<p>This is a paragraph element containing how2html.com.</p>
</body>
</html>

Output:

HTML Block and Inline Elements

Example 3: \

h1> – \

h6> Elements

<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

Output:

HTML Block and Inline Elements

Example 4: \

ul> Element

<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

Output:

HTML Block and Inline Elements

Example 5: \

ol> Element

<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>

Output:

HTML Block and Inline Elements

Inline Elements

Example 6: \ Element

<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p>This is a <span>span</span> element within a paragraph.</p>
</body>
</html>

Output:

HTML Block and Inline Elements

Example 7: \ Element

<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p>Visit <a href="https://www.how2html.com">how2html</a> for HTML tutorials.</p>
</body>
</html>