Structure Website with HTML

This post is based on Document and website structure on MDN.

Instead of using <div>s and <span>s everywhere to structure your website, we should use semantic elements to make our markup clean, readable, and most importantly, accessible.

Block-level Structural Element

We can and should use semantic block-level element to define different areas of our website.

Most well-designed web pages tend to share similar standard component:

  • header

    Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

  • navigation bar

    Links to the site’s main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that’s not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

  • main content

    A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you’re reading, This is the one part of the website that definitely will vary from page to page!

  • sidebar

    Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author’s bio, or links to related articles) but there are also cases where you’ll find some recurring elements like a secondary navigation system.

  • footer

    A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It’s a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

Visuals don’t tell the whole story. We use color and font size to draw sighted users’ attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like “pink” and “large font” very useful?

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like “find the main navigation”, or “find the main content.”

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

  • header: <header>.
  • navigation bar: <nav>.
  • main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements.
  • sidebar: <aside>; often placed inside <main>.
  • footer: <footer>.

the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS

HTML layout elements in more detail

  • <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn’t be nested within other elements.
  • <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
  • <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It’s considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context.
  • <aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
  • <header> represents a group of introductory content. If it is a child of <body>, it defines the global header of a webpage, but if it’s a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings).
  • <nav> contains the main navigation functionality for the page. Note that secondary links, etc., would not go in the navigation.
  • <footer> represents a group of end content for a page.

Non-semantic wrappers

<div> is used when no better semantic block element, while <span> is used when no better semantic text element.

Only use non-semantic wrappers when you cannot think of a better semantic element.

Warning: Divs are so convenient to use that it’s easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you’ll have a hard time updating and maintaining your documents.

Line breaks and horizontal rules

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem.

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line.