HTML Block Elements Tutorial

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing HTML Block Elements Tutorial

HTML block elements

HTML Elements are categorized by two types of display value by default.

Block Element

HTML block elements start with a new line and capture the available full width. This means the block elements add a line break before where it is placed and blocked the width.

Block Elements -lists

<address><figcaption><p>
<article><figure><pre>
<aside><footer><section>
<blockquote><form><table>
<canvas><h1> – <h6><tfoot>
<dd><header><uL>
<div><hr><video>
<dl><nav><li>
<dt><noscript>
<fieldset><ol>
block elements

Block Elements – Example

HTML block elements starts with a new line and capture the available full width.

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<style>
</style>
</head>
<body>
<p> line 1</p>
<p> Line 2</p>
</body>
</html>

Result

line 1

Line 2

Let see the previous example with the background color for better understand.

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<style>
.p1{
background-color:orange;
}
.p2{
background-color:blue;
}
</style>
</head>
<body>
<p class="p1"> line 1</p>
<p class="p2"> Line 2</p>
</body>
</html>

Result

line 1

Line 2

As we see the result the first paragraph captures the full width. The next paragraph is not placed in the empty width. We can change a block element to an inline element by changing its display property.

p {
display:inline;
}

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply