CodeBlanks Logo Icon CodeBlanks
Login Register

Feature list

HTML course · Intermediate · Lesson 15/67

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

  1. Match each tag to its role

    section
    Topic group
    article
    Standalone content
    strong
    Important text
    em
    Emphasized text

  2. Which tag best fits a self-contained feature card?

    • article
    • aside
    • footer
    • nav
    Show answer

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

  3. 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>

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone