HTML Block-level and Inline Elements
This article explains HTML block-level and inline elements.
This explains the differences between block-level elements and inline elements, as well as the main block-level elements and inline elements.
YouTube Video
Block-level elements and inline elements
HTML has two primary categories of elements that determine how they are displayed on the screen: 'block-level elements' and 'inline elements'. These elements play an important role in page layout and directly affect how they are positioned. Here, we will explain in detail the characteristics and usage of each element.
What is a block-level element?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Block-level elements typically occupy the entire width of the page and appear on a separate line from other elements. These elements can contain other block-level or inline elements inside them and define the larger structure of a document.
Features:
- The elements begin on a new line and expand to occupy as much width as possible (usually the entire width of the parent element).
- They are separated from other block elements vertically, with margins applied between them.
- They can contain other block or inline elements within them.
Here, the following block-level elements are utilized:.
- The
<div>tag is commonly used to build layouts. - The
<p>tag is used to define a paragraph. <h1>to<h6>are elements used to define headings.<h1>is the largest heading, and<h6>is the smallest.- The
<ul>tag creates an unordered list. - The
<ol>tag creates an ordered list. - The
<section>tag defines a section within a document.
What is an inline element?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Inline elements are placed on the same line as other elements and usually only take up as much width as their content. These elements are treated as part of the text and, unlike block-level elements, do not occupy the entire line.
Features:
- Elements appear on the same line and are placed side by side with other inline elements.
- The width is determined by the content of the element (text or images).
- They can be included inside block-level elements, but not vice versa.
Here, the following inline elements are utilized:.
- The
<span>tag is used to emphasize a part of the text with a specific style. - The
<a>tag defines a hyperlink. - The
<img>tag is an element used to embed images. <strong>highlights important text (usually displayed in bold).<em>indicates emphasized text (usually displayed in italics).
Differences between block-level elements and inline elements
- Display method: Block-level elements are displayed on a new line and take up the full width of the page, while inline elements are displayed on the same line with other elements and their width is determined by their content.
- Handling of internal elements: Block-level elements can contain other block-level elements as well as inline elements, but inline elements cannot contain block-level elements.
- Layout role: Block-level elements are mainly used to create the layout structure of a page, while inline elements define small elements like text and links.
Key points for differentiation
Creating layouts: Use block-level elements such as <div>, <section>, <article> to define large sections and content blocks.
Text decoration and links: Use inline elements like <span>, <a>, <strong>, <em> to decorate parts of text or add links.
Mixing block-level and inline elements
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Block-level elements such as
<main>,<header>, and<section>are used, and they are typically rendered on a new line, occupying the entire width of their parent element. - Inline elements such as
<a>,<strong>,<span>, and<img>are used, and they are placed within the line without occupying the full width within block-level elements.
Including inline elements within block-level elements is a common pattern. For example, it's common to include links (<a>) or emphasis (<strong>) within a paragraph (<p>). However, since you cannot include block-level elements within inline elements, it's important to use them appropriately.
Summary
Block-level elements and inline elements are two basic types of HTML elements, each with its own role. Block-level elements form the foundation of page layout, while inline elements are used to decorate and manipulate fine content within them. Understanding and properly utilizing these two types of elements enables efficient HTML coding.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.