HTML Block Elements
HTML
A block element always starts on a new line in the document flow, which forces any preceding content to end and any subsequent content to start on a new line. Block elements always start in a new line no matter how much space they need.
Block Elements
➔ Block element starts new line always.
➔ A Block element can take up one or more line as one block.
➔ Block elements occupy the entire available width of their parent container.
➔ Block elements act as containers and can contain both other block-level elements (such as sections, headings, paragraphs, lists) and inline elements (such as text, images, links, b, i, span).
➔ Block elements are primarily used to organize and define the main sections of a webpage, such as headers, footers, main content areas, articles, categories, and navigation.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<!-- Example: Block Elements -->
<head>
<title>Block Elements Example</title>
<style>
.highlight {
background-color: rgb(78, 78, 78);
color: white;
}
</style>
</head>
<body>
<h1>Block Elements Example</h1>
<div>Lorem Ipsum is <p class="highlight">simply dummy text </p> of the <div class="highlight">printing and </div>
typesetting industry.
<h1 class="highlight">Lorem Ipsum</h1> has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<p>Note: h1, div, p elements are block elements, and they will start on a new line and occupy the entire space of
the line.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Block Elements are
<address>,
<article>,
<aside>,
<blockquote>,
<details>,
<dialog>,
<dd>,
<div>,
<dl>,
<dt>,
<fieldset>,
<figcaption>,
<figure>,
<footer>,
<form>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
<header>,
<hr>,
<li>,
<main>,
<nav>,
<ol>,
<p>,
<pre>,
<section>,
<table>,
<ul>.