Semantic HTML Patterns for Small Business Sites

Course progress

Lesson 1 of 9 – Welcome & who this is for Lesson 2 of 9 – A site-wide skeleton for small business sites Lesson 3 of 9 – Home page hero & value proposition Lesson 4 of 9 – Services, pricing, and feature sections Lesson 5 of 9 – About, team, and story sections Lesson 6 of 9 – Contact, opening hours, and location Lesson 7 of 9 – Testimonials, reviews, and social proof Lesson 8 of 9 – Blog/news patterns for simple articles Lesson 9 of 9 – Starter layout & semantic checklist

1 Welcome & who this is for
2 Site-wide layout skeleton
3 Home hero & value proposition
4 Services, pricing, and features
5 About, team, and story sections
6 Contact details & opening hours
7 Testimonials & social proof
8 Blog/news patterns
9 Starter layout & checklist

Step 1

Welcome & who this is for

This tutorial is aimed at anyone building small business sites: cafés, consultants, local services, studios, shops, and similar sites with a handful of pages.

You will learn semantic patterns for:

Headers, navigation, and site-wide layout.
Home page hero sections and value propositions.
Services and pricing layouts.
About pages with team and story sections.
Contact sections with forms, opening hours, and maps.
Testimonials and social proof blocks.
Simple news or blog posts.

You can follow along in a simple index.html, or apply these patterns directly to a real project. Each lesson includes code snippets you can copy, plus quick questions to reinforce the concepts.

Step 2

A site-wide skeleton for small business sites

Why `:root` for tokens?

Most small business sites share a similar structure: a header with logo and navigation, a main content area, and a footer with contact details and legal links.

Pattern: site-wide layout skeleton

<body>
  <header class="site-header">
    <div class="site-header__inner">
      <a href="/" class="site-logo">Willow &amp; Co.</a>

      <nav class="site-nav" aria-label="Main navigation">
        <ul class="site-nav__list">
          <li class="site-nav__item"><a href="/" aria-current="page">Home</a></li>
          <li class="site-nav__item"><a href="/services">Services</a></li>
          <li class="site-nav__item"><a href="/about">About</a></li>
          <li class="site-nav__item"><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <!-- Page-specific content goes here -->
  </main>

  <footer class="site-footer">
    <section class="site-footer__section">
      <h2 class="site-footer__heading">Willow &amp; Co.</h2>
      <address>
        123 Market Street<br>
        London, UK<br>
        <a href="tel:+441234567890">+44 1234 567 890</a><br>
        <a href="mailto:hello@willowandco.example">
          hello@willowandco.example
        </a>
      </address>
    </section>

    <section class="site-footer__section" aria-label="Legal links">
      <ul>
        <li><a href="/privacy">Privacy policy</a></li>
        <li><a href="/terms">Terms of service</a></li>
      </ul>
    </section>
  </footer>
</body>

Key points:

<header>, <main>, and <footer> act as landmarks.
<nav> with an aria-label holds the main site navigation.
<address> is used for business contact details in the footer.

Quick check: where does the main content go?

For a small business site, which element should wrap the primary, page-specific content (e.g. hero, services, contact form)?

<section> <main> <article>

Correct: <main> should contain the unique main content for that page. Inside it, you can use <section> and <article> as needed.

Not quite. <section> and <article> are for 'parts' of the main, and there can be more than one of each.

Step 3

Home page hero & value proposition

The home page usually starts with a “hero” section that states what the business does and who it helps. Semantically, this is often the main heading and a short summary.

Pattern: home page hero

Start with a small set of roles instead of hundreds of direct hex codes:

<header class="hero hero--home">
  <div class="hero__inner">
    <h1 class="hero__title">
      Handmade floristry for weddings and events
    </h1>

    <p class="hero__subtitle">
      Willow &amp; Co. is a London-based studio creating bespoke floral designs
      for weddings, events, and intimate celebrations.
    </p>

    <a href="#services" class="hero__cta">
      View wedding packages
    </a>
  </div>
</header>

The hero acts as a page header, with a single <h1> that states clearly what the business offers. The subtitle expands on who it helps, and the primary call-to-action is a link to the relevant section.

Optional: "secondary hero" for subpages

<header class="page-hero">
  <h1 class="page-hero__title">Wedding floristry packages</h1>
  <p class="page-hero__lead">
    Choose a package that fits your day, then customise the details with our team.
  </p>
</header>

Quick check: which level for the main home page heading?

On the home page, the "What we do" heading is usually:

<h1> <h2> <h3>

Correct: the main page heading should be an <h1>. Additional sections on the page will use <h2> and below.

Incorrect. <h2> and <h3> are used for 2nd and 3rd level headings.

Step 4

Services, pricing, and feature sections

Most small business sites have a "What we offer2 or "Services" section, sometimes with pricing. We can model this as a <section> containing a list of <article> cards.

Pattern: services list

First, define your stacks and common weights:

<section id="services" class="services" aria-labelledby="services-heading">
  <h2 id="services-heading" class="services__title">
    Services
  </h2>

  <ul class="services__list">
    <li class="services__item">
      <article class="service-card">
        <h3 class="service-card__title">Wedding floristry</h3>
        <p class="service-card__summary">
          Bouquets, buttonholes, table arrangements, and venue styling for your day.
        </p>
        <p class="service-card__meta">
          From <strong>£950</strong> for full wedding packages.
        </p>
        <a href="/services/weddings" class="service-card__link">
          View wedding packages
        </a>
      </article>
    </li>

    <li class="services__item">
      <article class="service-card">
        <h3 class="service-card__title">Corporate events</h3>
        <p class="service-card__summary">
          Installations and arrangements for launches, conferences, and seasonal events.
        </p>
        <p class="service-card__meta">
          Quotes tailored by event size and venue.
        </p>
        <a href="/services/corporate" class="service-card__link">
          Explore event options
        </a>
      </article>
    </li>
  </ul>
</section>

Each service is an <article> because it could stand alone on a dedicated services page or listing.

Pattern: simple pricing overview

<section class="pricing" aria-labelledby="pricing-heading">
  <h2 id="pricing-heading" class="pricing__title">
    Package overview
  </h2>

  <table class="pricing-table">
    <caption>Summary of wedding floristry packages</caption>
    <thead>
      <tr>
        <th scope="col">Package</th>
        <th scope="col">Ideal for</th>
        <th scope="col">From price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Essentials</th>
        <td>Small, intimate weddings</td>
        <td>£950</td>
      </tr>
      <tr>
        <th scope="row">Signature</th>
        <td>Classic full-day celebrations</td>
        <td>£1,650</td>
      </tr>
    </tbody>
  </table>
</section>

Use a real <table> when you have genuine tabular data, like packages and prices.

Quick check: services as articles

Why is an individual service often a good candidate for <article>?

It is a self-contained, reusable piece of content. It is only ever used on the home page. It controls the layout of the page.

Correct: services can appear on listing pages and detail pages, so treating each one as an <article> is a good fit.

Incorrect. It can be used on almost any page, and has no control over the layout of the page.

Step 5

About, team, and story sections

"About" pages help visitors trust the business. Semantically, this is usually a combination of headings, paragraphs, and sometimes a list of people.

Pattern: about section

<section id="about" class="about" aria-labelledby="about-heading">
  <h2 id="about-heading" class="about__title">
    About Willow &amp; Co.
  </h2>

  <p>
    Willow &amp; Co. is an independent floral design studio based in London,
    specialising in bespoke arrangements for weddings and events.
  </p>

  <p>
    Founded in 2012 by florist Daisy Willow, our team combines technical skill
    with a love of seasonal, sustainable flowers.
  </p>
</section>

Pattern: team members list

<section class="team" aria-labelledby="team-heading">
  <h2 id="team-heading" class="team__title">
    Meet the team
  </h2>

  <ul class="team__list">
    <li class="team__member">
      <article class="team-card">
        <h3 class="team-card__name">Daisy Willow</h3>
        <p class="team-card__role">Founder &amp; Creative Director</p>
        <p class="team-card__bio">
          Emma brings over 15 years of floristry experience, with a focus on natural,
          garden-inspired designs.
        </p>
      </article>
    </li>

    <li class="team__member">
      <article class="team-card">
        <h3 class="team-card__name">James Hart</h3>
        <p class="team-card__role">Studio Manager</p>
        <p class="team-card__bio">
          James coordinates logistics, deliveries, and on-the-day setup for each event.
        </p>
      </article>
    </li>
  </ul>
</section>

Quick check: heading levels on the About page

On the About page, which element is usually best for the page title?

<h1> <h2> <h3>

Correct: the page title is still an <h1>, with sections like "About us" and "Meet the team" using <h2>.

Incorrect. <h2> and <h3> are used for 2nd and 3rd level headings.

Step 6

Contact, opening hours, and location

Contact information is critical on small business sites. Semantically, we can combine a section with a heading, an address, a phone/email, opening hours, and a form if needed.

Pattern: contact section with details

<section id="contact" class="contact" aria-labelledby="contact-heading">
  <h2 id="contact-heading" class="contact__title">
    Contact us
  </h2>

  <div class="contact__grid">
    <section class="contact__details" aria-label="Contact details">
      <h3>Studio</h3>
      <address>
        Willow &amp; Co.<br>
        123 Market Street<br>
        London, UK<br>
      </address>

      <p>
        Phone:
        <a href="tel:+441234567890">+44 1234 567 890</a><br>
        Email:
        <a href="mailto:hello@willowandco.example">
          hello@willowandco.example
        </a>
      </p>
    </section>

    <section class="contact__hours" aria-label="Opening hours">
      <h3>Opening hours</h3>
      <dl>
        <div>
          <dt>Monday – Friday</dt>
          <dd>09:00 – 17:30</dd>
        </div>
        <div>
          <dt>Saturday</dt>
          <dd>10:00 – 14:00</dd>
        </div>
        <div>
          <dt>Sunday</dt>
          <dd>Closed</dd>
        </div>
      </dl>
    </section>
  </div>
</section>

<address> and a definition list <dl> make contact details and opening hours easier to understand.

Pattern: simple contact form

<section class="contact-form" aria-labelledby="contact-form-heading">
  <h2 id="contact-form-heading">Send us a message</h2>

  <form action="/contact" method="post">
    <div class="form-field">
      <label for="contact-name">Name</label>
      <input id="contact-name" name="name" type="text" autocomplete="name" required>
    </div>

    <div class="form-field">
      <label for="contact-email">Email address</label>
      <input id="contact-email" name="email" type="email" autocomplete="email" required>
    </div>

    <div class="form-field">
      <label for="contact-message">How can we help?</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send message</button>
  </form>
</section>

Quick check: using <address>

For a small business contact section, which of these is a correct use of <address>?

Wrapping the physical address and contact details of the business. Wrapping a testimonial quote from a customer. Wrapping all content on the page.

Correct: <address> is for contact details for the business or person, not for arbitrary text.

No, you shoud not wrap a testimonial or the entire page in an <address> tag.

Step 7

Testimonials, reviews, and social proof

Testimonials and reviews help build trust. Semantically, quotes belong in <blockquote> with optional citations.

Pattern: testimonials section

<section class="testimonials" aria-labelledby="testimonials-heading">
  <h2 id="testimonials-heading" class="testimonials__title">
    What our clients say
  </h2>

  <ul class="testimonials__list">
    <li class="testimonials__item">
      <figure class="testimonial-card">
        <blockquote class="testimonial-card__quote">
          Willow &amp; Co. transformed our venue. The flowers were beyond anything
          we imagined.
        </blockquote>
        <figcaption class="testimonial-card__meta">
          — Sarah &amp; Daniel, London
        </figcaption>
      </figure>
    </li>

    <li class="testimonials__item">
      <figure class="testimonial-card">
        <blockquote class="testimonial-card__quote">
          Professional, calm, and creative from start to finish. Highly recommended.
        </blockquote>
        <figcaption class="testimonial-card__meta">
          — Maya, corporate client
        </figcaption>
      </figure>
    </li>
  </ul>
</section>

Using <blockquote> and <figure> makes it clear that these are quotations with attributions.

Pattern: logo strip for partners or features

<section class="logos" aria-label="Press and partners">
  <h2 class="visually-hidden">Press and partners</h2>
  <ul class="logos__list">
    <li class="logos__item">
      <span class="logos__label">As seen in</span>
      <img src="/images/press-magazine.svg" alt="Press Magazine">
    </li>
    <li class="logos__item">
      <img src="/images/wedding-blog.svg" alt="Wedding Blog">
    </li>
  </ul>
</section>

A visually hidden heading ensures screen readers have a label for the section, even if you do not show that heading visually.

Quick check: quoting a client

Which element is the best fit for a short paragraph that is a direct quote from a client?

<p> <blockquote> <aside>

Correct: <blockquote> is for quoted content. You can wrap it in <figure> with a <figcaption> for the client name.

Incorrect. <p> is used for generic paragraphs. <aside> is used for additional, connected, information.

Step 8

Blog/news patterns for simple articles

Many small business sites have a simple "News" or "Blog" area. Semantic HTML gives each post a clear structure that works with or without CSS.

Pattern: news listing

<section class="news" aria-labelledby="news-heading">
  <h2 id="news-heading" class="news__title">
    Latest news
  </h2>

  <ul class="news__list">
    <li class="news__item">
      <article class="news-card">
        <header class="news-card__header">
          <h3 class="news-card__title">
            Spring workshop dates announced
          </h3>
          <p class="news-card__meta">
            <time datetime="2025-03-10">10 March 2025</time>
          </p>
        </header>
        <p class="news-card__excerpt">
          Join us in the studio to learn bouquet basics and table arrangements…
        </p>
        <a href="/news/spring-workshops" class="news-card__link">
          Read more
        </a>
      </article>
    </li>
  </ul>
</section>

Pattern: individual article

<article class="post">
  <header class="post__header">
    <h1 class="post__title">Spring workshop dates announced</h1>
    <p class="post__meta">
      <time datetime="2025-03-10">10 March 2025</time> ·
      <span class="post__category">Workshops</span>
    </p>
  </header>

  <div class="post__body">
    <p>
      We are excited to share our spring workshop series for 2025…
    </p>
    <p>
      In each session, you will learn hands-on techniques for creating your own
      bouquets and table arrangements.
    </p>
  </div>

  <footer class="post__footer">
    <p>Back to <a href="/news">All news</a></p>
  </footer>
</article>

Quick check: which is the main heading a single article page?

On a specific news article page, which element should wrap the article title?

<h1> <h2> <h3>

Correct: the article title is normally an <h1>. This should also match the <title> of the page.

No, <h2> and <h3> are 2nd and 3rd level headings.

Step 9

Starter layout & semantic checklist

Starter home page layout (condensed)

<body>
  <header class="site-header">
    <div class="site-header__inner">
      <a href="/" class="site-logo">Willow &amp; Co.</a>
      <nav class="site-nav" aria-label="Main navigation">
        <ul class="site-nav__list">
          <li><a href="/" aria-current="page">Home</a></li>
          <li><a href="/services">Services</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <header class="hero hero--home">
      <div class="hero__inner">
        <h1>Handmade floristry for weddings and events</h1>
        <p>
          London-based, bespoke floral design for weddings, corporate events,
          and intimate celebrations.
        </p>
        <a href="#services">View wedding packages</a>
      </div>
    </header>

    <section id="services" aria-labelledby="services-heading">
      <h2 id="services-heading">Services</h2>
      <!-- Services list pattern here -->
    </section>

    <section id="about" aria-labelledby="about-heading">
      <h2 id="about-heading">About Willow &amp; Co.</h2>
      <!-- About/story pattern here -->
    </section>

    <section id="testimonials" aria-labelledby="testimonials-heading">
      <h2 id="testimonials-heading">What our clients say</h2>
      <!-- Testimonials pattern here -->
    </section>

    <section id="contact" aria-labelledby="contact-heading">
      <h2 id="contact-heading">Contact us</h2>
      <!-- Contact details and/or form pattern here -->
    </section>
  </main>

  <footer class="site-footer">
    <!-- Footer pattern here -->
  </footer>
</body>

Semantic checklist for small business pages

Is there exactly one <main> per page with the primary content?
Does the page have a single clear <h1> for its main purpose?
Are major navigation areas wrapped in <nav> with labels?
Is contact information correctly wrapped in <address> where appropriate?
Are services and news items represented as <article> cards where they can stand alone?
Are headings used in a logical order (h1 → h2 → h3)?
Are testimonials using <blockquote> and, ideally, <figure> with <figcaption>?
Are tables only used for true tabular data (like pricing comparisons)?
Does the page still read clearly with CSS disabled?

With these patterns, you can build small business sites that are easy to redesign, accessible to more visitors, and straightforward for future developers to understand.

Small business semantic cheat sheet

Homepage skeleton: <header> + <nav> + <main> + <footer> gives you landmarks that keep working across redesigns.
Services: Use a <section> for “Services” and an <article> per service so each one can stand alone on its own page.
Contact details: Use <address> for the business address and key contact links. Pair it with a simple, labelled form for enquiries.
Social proof: Wrap quotes in <blockquote> and use <figure> + <figcaption> for named testimonials.

Nail these patterns once and you can reuse them across dozens of small business sites.

Reusable structures for home, services, about, contact, and more

You will learn semantic patterns for:

Why :root for tokens?

Pattern: site-wide layout skeleton

Quick check: where does the main content go?

Pattern: home page hero

Optional: "secondary hero" for subpages

Quick check: which level for the main home page heading?

Pattern: services list

Pattern: simple pricing overview

Quick check: services as articles

Pattern: about section

Pattern: team members list

Quick check: heading levels on the About page

Pattern: contact section with details

Pattern: simple contact form

Quick check: using <address>

Pattern: testimonials section

Pattern: logo strip for partners or features

Quick check: quoting a client

Pattern: news listing

Pattern: individual article

Quick check: which is the main heading a single article page?

Starter home page layout (condensed)

Semantic checklist for small business pages

Why `:root` for tokens?