Content has a purpose

Before choosing colors or sizes, ask what each part of a page represents. A header introduces the site, navigation groups links, and the main content serves the visitor's purpose.

In FULL TIME, services, questions and contact information have different goals. Clear structure helps people read the page and navigate it with assistive tools.

A small, organized document

HTML · minimal structure
<header>
  <nav aria-label="Main navigation">
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <h1>Laundry and tailoring</h1>
  <section id="services" aria-labelledby="services-title">
    <h2 id="services-title">Our services</h2>
    <p>Information about laundry and alterations.</p>
  </section>
  <section id="contact" aria-labelledby="contact-title">
    <h2 id="contact-title">Contact</h2>
    <a href="mailto:business@example.com">Email the business</a>
  </section>
</main>
<footer><p>Business information</p></footer>

Choose elements by meaning

  • main contains the main content; these pages use one.
  • section groups a topic and usually has a heading.
  • article represents a self-contained piece, such as this article or a project card.
  • div is still useful when you only need a layout container.

Headings describe organization. You don't choose an h2 because it “looks smaller”: CSS defines its size.

A practical check

Read the page without styles. Does the order make sense? Do the links explain their destinations? Then navigate with a keyboard and check that focus is visible.

Semantics help describe content, but they don't replace useful writing, accessibility or SEO review. Avoid turning every visual container into a section without a real topic.