TutorialsHTMLInline & Block Elements
Share:

Inline & Block Elements

beginner

Part of Getting Started with HTML

Theory

Every HTML element has a default display behavior: block-level or inline. Understanding this distinction is crucial for controlling page layout and structure.

Block-Level Elements

A block-level element always starts on a new line and takes up the full width available (stretches left and right as far as possible). Block elements create a "block" in the page flow.

Common block elements:

  • <h1> through <h6> — headings
  • <p> — paragraph
  • <div> — generic container
  • <ul>, <ol>, <li> — lists
  • <table> — table
  • <header>, <footer>, <section>, <article>, <nav>, <aside>, <main> — semantic HTML5 elements
  • <hr> — horizontal rule
  • <pre> — preformatted text

Block elements can contain other block elements and inline elements.

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary. Inline elements flow within the text, like words in a sentence.

Common inline elements:

  • <span> — generic inline container
  • <a> — anchor / link
  • <strong> — bold text (semantic)
  • <b> — bold text (presentational)
  • <em> — italic text (semantic emphasis)
  • <i> — italic text (presentational)
  • <img> — image
  • <br> — line break
  • <code> — inline code
  • <abbr> — abbreviation

Inline elements should only contain other inline elements or text, never block-level elements.

The <div> Element

The <div> is a generic block-level container with no semantic meaning. It is used primarily for styling and layout purposes — grouping elements together to apply CSS or JavaScript.

<div class="container">
  <h2>Section Title</h2>
  <p>Content inside the div.</p>
</div>

While <div> is indispensable for layout, overusing it without semantic meaning is considered poor practice.

The <span> Element

The <span> is a generic inline container. Use it to style a specific portion of text or group inline elements:

<p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>

Semantic HTML5 Elements

HTML5 introduced semantic elements that give meaning to the structure of a page. Using them improves accessibility, SEO, and code readability.

  • <header> — introductory content or navigational aids for a page or section
  • <nav> — navigation links
  • <main> — the dominant content of the page (use once per page)
  • <section> — a thematic grouping of content
  • <article> — a self-contained composition (blog post, news article, comment)
  • <aside> — content indirectly related to the main content (sidebar, pull quote)
  • <footer> — footer for a page or section (author info, copyright, related links)

A typical semantic layout:

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>
      <section>...</section>
      <section>...</section>
    </article>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>

Using semantic elements makes your HTML more descriptive and helps screen readers navigate the page. Search engines also prioritize semantic content for better indexing.

Practical Examples

Example: Block vs Inline Elements
html
Example: Semantic HTML5 Layout
html

Exercises

Convert a Div-Based Layout to Semantic HTML

medium

Rewrite the following div-based layout using semantic HTML5 elements (header, nav, main, article, section, aside, footer). Keep the same visual structure but use meaningful tags.

Starter Code:

<div id="page">\n  <div id="top">\n    <h1>Site Title</h1>\n    <div id="menu">\n      <a href="#">Home</a>\n      <a href="#">Blog</a>\n    </div>\n  </div>\n  <div id="content">\n    <div id="post">\n      <h2>Blog Post</h2>\n      <p>Content here.</p>\n    </div>\n    <div id="sidebar">\n      <p>Widgets here.</p>\n    </div>\n  </div>\n  <div id="bottom">\n    <p>Copyright 2026</p>\n  </div>\n</div>

Expected Output:

A semantically structured page using <header>, <nav>, <main>, <article>, <aside>, and <footer> instead of generic <div> elements.

Identify Inline vs Block Elements

easy

Look at the following HTML and identify which elements are block-level and which are inline. Write your answer as an HTML comment at the bottom of the page.

Expected Output:

The same HTML with an HTML comment at the bottom listing: Block elements: p, div, h2, ul, li. Inline elements: strong, a, em, img, span.

Mini Quiz

Mini Quiz

Mini Project

Mini Project: Semantic Layout Page

Build a complete blog-style page using semantic HTML5 elements. The page should have a header with navigation, a main content area with an article and aside, and a footer.

Requirements:

    Bonus Challenge

    Add an additional <section> inside <article> with a table of contents linking to each section using anchor IDs.

    Previous
    Skeletal Tags
    Next
    HTML Content & Structure