About Lesson
Definition:
A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element’s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements.
Types of Block Elements:
Some common block elements in HTML5 include :
- headings (h1 to h6)
- paragraphs (p)
- lists (ul or ol)
- divs
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="logo-dark.png" />
</head>
<body>
<h1>HTML Block elements</h1>
<h2>p, h1 to h6,div,ul or ol</h2>
<p>they starts on a new line</p>
<ul>
<li>p</li>
<li>h1 to h6</li>
<li>div</li>
<li>ul or ol</li>
</ul>
<div
style="
background-color: blueviolet;
border: 2px solid black;
height: 50px;
"
>
This is block level element
</div>
<div style="background-color: blue; border: 2px solid black; height: 50px">
This is block level element
</div>
</body>
</html>
Output:
