Make my website accessible and look OK

Let's say you want to put a blog, a digital garden or a wiki page online. You ain't fancy, you just want a readable column of text, good markup, and throw content without it breaking.

The basics

Start with this and customize it to have dynamic information where needed:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unique page title - My Site</title>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <meta name="description" content="Page description">
</head>
 
<body>
  <!-- Content -->
</body>
</html>

If you want a more evolved version with link embeds for social media, favicons, a color theme, etc. see Matuzo's boilerplate which details line by line what you can have in the <head>.

In your stylesheet, add a padding to the <body> and bump the font size a little bit while keeping it readable:

body {
  padding: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}

If you have a part of your website at the top that people can skip, name it <header>. If you have a part of your website at the bottom that people can skip, name it <footer>.

If you have a navigation menu to go to different parts of your website, put them inside <nav>. You can nest <nav> inside <header> or <footer> if you want.

For the links inside your navigation menus, use a list.

<header>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</header>

If you have several <nav> in your page, name them using aria-label.

<header>
  <nav aria-label="Main">
   ...
  </nav>
</header>
 
...
 
<footer>
  <nav aria-label="Secondary">
   ...
  </nav>
</footer>

If you have a breadcrumb menu, name it with aria-label="breadcrumbs" and use the aria-current="page" on the link corresponding the current page.

<nav aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="/">Home</a></li>
    <li><a href="/page2">Second Page</a></li>
     <li><a href="/page2/current-page" aria-current="page">Current page</a></li>
  </ol>
</nav>

And use this style to make it look like a breadcrumb:

[aria-label="Breadcrumb"] ol {
  display: flex;
  padding:0;
}
 
[aria-label="Breadcrumb"] ol * + *::before {
  content: ">";
  padding:0.5rem;
}

Structure the page

Put the main content of the website inside <main>. Then, if you have different sections, split them. The easiest way is to use one or several <article> for the content, and <aside> for the related but not main content.

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>

Prefer using several <article> tags instead of using <section>. For example if you have a list of articles:

<main>
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
 
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
 
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
</main>

The page content

Add everything you want inside the <article> tag. Texts, images, videos, audios, embeds, everything will fit.

Since most of these elements are inline, you might have things being side by side, and be tempted to nest them inside a <div>. Don't do it for now, as we will fix this later.

Just don't forget to order your titles correctly! Only a single <h1>, subsequent <h2> and <h3>, and don't use them for styling. If you need a specific size for an element, style it.

Add sensible defaults

Add Andy Bell's CSS reset to your CSS file. It will reset some styles to avoid headaches later down the road.

Then reduce the width of the text column and center it (work for anything else like the <header>, <nav>, etc.):

article,
header,
nav,
footer {
  max-width: 70ch;
  margin: auto;
}

You want a regular vertical flow between the elements inside your column of text. Avoid styling each element and instead use this:

article > * + * {
  margin-top: 1rem;
}

It will add a similar margin at the top of elements if they have another element before them. This way, the first element of your text column won't have it, and no matter what you insert inside the text column, it will be have a margin.

Note that you can use this technique everywhere. In lists, on the body, it works perfectly. You can even create a set of .flow classes with different margin size inside.

That's it!

You now have a simple and barebones website, but made with sensible defaults and decently accessible. You can see the result of these bits of code here.

You can now add your own styles like fonts, colors, anything that make it more personal.

Have fun!


Initially published: November 1st, 2022
Generated: November 1st, 2022