Feature list

Add product features with semantic tags and lists.

The features section

The features section shows the product's value as items. Each feature is a self-contained card; you use <article> for it. Cards are grouped in a <section>.

Each card has:

an <h3> with the feature name
a <p> with a description
important words in <strong>, emphasized words in <em>

section vs article

<section> groups topically related content and usually holds a heading. <article> is self-contained, distributable content: a blog post, a feature card, a news item.

In a feature list each card is an <article>, and all cards sit in a <section>. Screen readers then grasp the structure.

Exercise Add the features section

Take the previous step's <main> with the hero. After the <button> add a <section>. Inside the section put a non-empty h2, at least two article elements (each with a non-empty h3 and p) and a ul with at least three li items. Use strong and em inside p.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskFlow - Task management</title>
  </head>
  <body>
    <main>
      <h1>Keep tasks in flow, not in mind</h1>
      <p>Manage your team's tasks, deadlines and progress from a single panel with TaskFlow.</p>
      <a href="/signup">Start free</a>
      <button>Request a tour</button>
      <section>
        <h2>Why TaskFlow?</h2>
        <article>
          <h3>Kanban boards</h3>
          <p>Move tasks with <strong>drag and drop</strong> and see the flow <em>live</em>.</p>
        </article>
        <article>
          <h3>Automatic reminders</h3>
          <p>Get <strong>email</strong> and <em>instant notifications</em> as deadlines approach.</p>
        </article>
        <ul>
          <li><strong>Calendar</strong> view</li>
          <li><strong>File</strong> attachments</li>
          <li><strong>Tag</strong> system</li>
        </ul>
      </section>
    </main>
  </body>
</html>

Test yourself

Match each tag to its role

section

Topic group
article

Standalone content
strong

Important text
em

Emphasized text
Which tag best fits a self-contained feature card?
- article
- aside
- footer
- nav
Show answer

article — Correct. article suits independent, distributable content blocks.

Write the tag name for a standalone feature card

<____>
  <h3>Quick setup</h3>
  <p>Start your team in minutes.</p>
</article>

Show answer

<article>
  <h3>Quick setup</h3>
  <p>Start your team in minutes.</p>
</article>

Next lesson: Pricing table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies