How HTMLHTML 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:
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:
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:
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:
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:
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:
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>
Output:
Example 8: \ Element
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p><strong>This text is bold.</strong></p>
</body>
</html>
Output:
Example 9: \ Element
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p><em>This text is italic.</em></p>
</body>
</html>
Output:
Example 10: \![]()
Element
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p><img src="image.jpg" alt="Image"></p>
</body>
</html>
Output:
Conclusion
Understanding the differences between block and inline elements is crucial when designing a web page layout. Block elements are used for larger sections of content that should appear on separate lines, while inline elements are used for small pieces of content within a block-level element. By utilizing both types of elements effectively, you can create well-structured and visually appealing web pages.