HTML Block Elements
Block elements in HTML are used to create content that appears on a new line or in a separate block. Learn how to use block elements to structure your HTML pages and create visually appealing layouts.
HTML elements are generally divided into two categories:
- Block-level elements
- Inline elements
No matter what the width is, block elements will always start on a new line and take up the full available width of their container by default. This means they essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line. But the inline elements will fit snugly within the flow of other elements, taking up only as much width as their content requires.
What are Block-level Elements
Block-level elements are used to create content that appears on a new line or in a separate block. They take up the full width available to them by default and will start on a new line. Block elements are used to structure your HTML pages and create visually appealing layouts.
Characteristics of Block-level Elements
- Always start on a new line.
- Take up the full width available.
- Width and height can be controlled via CSS.
- Can contain other block-level as well as inline elements.
Common Block-level Elements
Here is an exhaustive list of the most used Block-level Elements:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- Headings<p>- Paragraphs<hr>- Horizontal rule<address>- Address information<article>- Article content<aside>- Sidebar content<blockquote>- Block quotations<canvas>- Drawing area<dd>- Description in a description list<div>- Generic container<dl>- Description list<dt>- Term in a description list<fieldset>- Group of related form elements<figcaption>- Caption for a figure<figure>- Image or media with a caption<footer>- Footer of a section or page<form>- HTML form<header>- Header of a section or page<li>- List item<main>- Main content of a document<nav>- Navigation links<noscript>- Alternate content when JavaScript is not enabled<ol>- Ordered list<ul>- Unordered list<pre>- Preformatted text<section>- Standalone section in a document<table>- Table<video>- Video content
How is this guide?
Sign in to share your feedback
Help us improve by sharing your thoughts on this guide.
Last updated on
Skeletal Tags
HTML skeletal tags are used to structure the content of a web page. They include the `<html>`, `<head>`, `<title>`, and `<body>` tags. Learn how to use these tags to create a well-structured HTML document.
HTML Inline Elements
Inline elements in HTML are used to create content that flows within the text. Learn how to use inline elements to add links, images, and other content to your HTML pages.