Home/HTML/Block and Inline Elements

Block-level, Inline, and Organizational Elements

HTML Basics•Reading time: 7 min

Understanding how elements are displayed and organized is crucial for creating well-structured HTML documents.

In this tutorial, you'll learn about block-level and inline elements, as well as semantic organizational elements that help structure your web page content.

1Block-level Elements

Block-level elements always start on a new line and take up the full width available. They create a "block" in the flow of content.

Common Block Elements

<div> - generic container
<h1> to <h6> - headings
<p> - paragraph
<ul>, <ol> - lists
<li> - list item
<table> - table
<form> - form
<header>, <footer> - page sections
<section>, <article> - content sections

Key Characteristics

Always starts on a new line
Takes up full width available
Creates a "block" in the document flow
Can contain other block elements and inline elements
Can have margin and padding on all sides
Height and width properties apply

block-elements.html

Example Code

html

<h1>This is a heading</h1>
<p>This is a paragraph. Notice how it creates a distinct block on the page.</p>
<p>This is another paragraph, which starts on a new line.</p>

<div style="border: 1px solid blue; padding: 10px;">
  <p>This paragraph is inside a div. The div is also a block element.</p>
</div>

Visual Example:

This is a heading

This is a paragraph. Notice how it creates a distinct block on the page.

This is another paragraph, which starts on a new line.

This paragraph is inside a div. The div is also a block element.

Note: Gray backgrounds added to show element boundaries

2Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. They flow within the content and don't break the flow of text.

Common Inline Elements

<span> - generic inline container
<a> - hyperlink
<strong>, <b> - bold text
<em>, <i> - italic text
<mark> - highlighted text
<small> - smaller text
<img> - image
<code> - code snippet
<button> - clickable button
<input> - input field

Key Characteristics

Does not start on a new line
Takes only as much width as necessary
Flows with surrounding text
Cannot contain block-level elements
Vertical margins and paddings have limited effect
Height and width properties have limited effect

inline-elements.html

Example Code

html

<p>
  This is a paragraph with <strong>bold text</strong>, <em>italic text</em>,
  and a <a href="#">hyperlink</a>. All of these elements are
  <span style="color: blue;">inline elements</span> that flow with the text.
</p>

Visual Example:

This is a paragraph with bold text, italic text, and a hyperlink. All of these elements are inline elements that flow with the text.

Note: Yellow backgrounds added to show inline element boundaries

Block vs. Inline: Key Difference

The fundamental difference is how they flow in the document: block elements create distinct "blocks" that stack vertically, while inline elements flow horizontally within text content. In modern web development, CSS can be used to change how elements display through the display property.

3Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer. They provide information about the content they contain, improving accessibility and SEO.

Page Structure Elements

<header> - page or section header
<nav> - navigation links
<main> - main content
<article> - self-contained content
<section> - thematic grouping
<aside> - sidebar content
<footer> - page or section footer

Content Elements

<figure> and <figcaption> - images with captions
<time> - dates and times
<mark> - highlighted text
<summary> and <details> - collapsible content
<address> - contact information

semantic-structure.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <p>Posted on <time datetime="2023-05-15">May 15, 2023</time></p>
      </header>
      
      <section>
        <h3>Introduction</h3>
        <p>This is the main content of the article...</p>
      </section>
      
      <section>
        <h3>Details</h3>
        <p>More information about the topic...</p>
        
        <figure>
          <img src="image.jpg" alt="Descriptive image">
          <figcaption>Caption for the image</figcaption>
        </figure>
      </section>
    </article>
    
    <aside>
      <h3>Related Content</h3>
      <ul>
        <li><a href="#">Related link 1</a></li>
        <li><a href="#">Related link 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
    <address>
      Contact: <a href="mailto:info@example.com">info@example.com</a>
    </address>
  </footer>
</body>
</html>

Benefits of Semantic HTML

Improved accessibility for screen readers and assistive technologies
Better SEO as search engines better understand page content
Easier code maintenance and readability
More consistent styling across browsers
Future-proofing as browsers and technologies evolve

4Divs and Spans

While semantic elements are preferred, sometimes you need generic containers for styling or JavaScript purposes. This is where <div> and <span> come in.

Div Element

The <div> element is a block-level container with no semantic meaning. It's used to group content for styling purposes.

html

<div class="container">
  <h2>Section Title</h2>
  <p>Content goes here...</p>
</div>

Span Element

The <span> element is an inline container with no semantic meaning. It's used to style pieces of text within larger content.

html

<p>
  This text has a <span class="highlight">highlighted</span> word.
</p>

divs-spans.html

Example Code

html

<!-- Using divs for layout -->
<div class="card">
  <div class="card-header">
    <h3>Product Title</h3>
  </div>
  <div class="card-body">
    <p>Product description goes here...</p>
    <p>Price: <span class="price">$99.99</span></p>
    <p>Status: <span class="status-available">Available</span></p>
  </div>
  <div class="card-footer">
    <button>Add to Cart</button>
  </div>
</div>

When to Use Divs vs. Semantic Elements

Always prefer semantic elements when they match your content's purpose. For example, use <header> instead of <div class="header">. Only use <div> and <span> when no semantic element fits your need, typically for styling purposes or creating complex layouts.

5Try It Yourself

Create an HTML document with a semantic structure that includes both block and inline elements.

semantic-blog.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
  <style>
    /* Some basic styling to visualize the structure */
    header, footer, main, aside, article, section, nav {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
    }
    header, footer { background-color: #f0f0f0; }
    main { display: flex; }
    article { flex: 3; }
    aside { flex: 1; background-color: #f8f8f8; }
    .highlight { color: #0066cc; font-weight: bold; }
  </style>
</head>
<body>
  <header>
    <h1>My Personal Blog</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Understanding HTML Elements</h2>
        <p>Published on <time datetime="2023-09-15">September 15, 2023</time> by <span class="highlight">Jane Doe</span></p>
      </header>

      <section>
        <h3>Introduction</h3>
        <p>HTML elements are the building blocks of web pages. They can be categorized as <strong>block-level</strong> or <strong>inline</strong> elements based on how they display in the document flow.</p>
      </section>

      <section>
        <h3>Block vs. Inline</h3>
        <p>Block elements like <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, and <code>&lt;h1&gt;</code> create new blocks in the document flow, while inline elements like <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, and <code>&lt;strong&gt;</code> flow with the text.</p>
        
        <figure>
          <img src="placeholder.jpg" alt="Diagram showing block vs inline elements">
          <figcaption>Visual representation of block and inline elements</figcaption>
        </figure>
      </section>

      <footer>
        <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a>, <a href="#">Frontend</a></p>
      </footer>
    </article>

    <aside>
      <h3>Recent Posts</h3>
      <ul>
        <li><a href="#">CSS Flexbox Explained</a></li>
        <li><a href="#">Getting Started with JavaScript</a></li>
        <li><a href="#">Responsive Design Tips</a></li>
      </ul>
      
      <h3>Categories</h3>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 My Personal Blog. All rights reserved.</p>
    <address>
      Contact: <a href="mailto:blog@example.com">blog@example.com</a>
    </address>
  </footer>
</body>
</html>

Pro Tip

When structuring your HTML, think about the meaning of your content first, then choose the most appropriate semantic element. Only reach for <div> or <span> when there's no suitable semantic element. This practice improves accessibility, SEO, and maintainability of your code.

Summary

✓
Block-level elements start on new lines and take up full width (e.g., <div>, <p>, <h1>)
✓
Inline elements flow with text and only take necessary width (e.g., <span>, <a>, <strong>)
✓
Semantic elements provide meaning about their content (e.g., <header>, <article>, <nav>)
✓
Use <div> and <span> only when no semantic element is suitable
✓
Well-structured HTML improves accessibility, SEO, and maintainability

Previous: Interactive Elements Next: Metadata and the Head Element