By Jerome Kalumbu

Semantic HTML

Work from the content-out to write semantic & accessible HTML

Writing semantic HTML is the foundation for coding pages that are meaningful, accessible and optimised for SEO.

Now that the assets folder has been created, let’s forget about writing CSS for now. We will get to it once the HTML pages are ready.

Problem: Bad HTML ruins accessibility & SEO

One reason most websites perform poorly is that the web pages have been mainly structured with non-semantic HTML elements like span or div, which makes it hard for screen-readers or users with disabilities to access the content.

Solution: Use semantic HTML

To avoid implementing inaccessible pages, use semantic HTML to write meaningful pages and enhance critical aspects like accessibility, SEO, cross-device compatibility and page load times.

Checklist

Start from the content to write meaningful HTML and set up a good foundation for accessibility & SEO.

  1. Did we describe every element that is on the page? (e.g. Heading? Is it an article? Is it a running text composed of paragraphs? Section? Tab? Menu? Paragraph? Button? Link? List?…)
  2. Did we use a naming convention to name our classes?
  3. Did we use minimum semantic HTML tags to structure our pages?
  4. Did we respect the content flow and hierarchy on pages?
  5. Did we optimise images for screen readers?
  6. Did we use ARIA to improve accessibility where necessary?
  7. Did we add ARIA on interactive elements?
  8. Did we add page descriptions (metatags)?
  9. Did we structure our <head> section properly?
  10. Did we tell search engine to read your metatatags?
  11. Did we use microformats to enhance user-experience?

Takeaways

  • Use native semantic HTML tags to markup the content
  • Use a clear naming convention like BEM Methodology to name your classes
  • Don't use unecessary non semantic tags to structure your pages
  • Structure the content with clear headings (e.g. h1, h2, h3, h4…)
  • Use alt="..." attributes to describe each images
  • Use ARIA landmark roles and ARIA labels to enhance accessibility
  • Use metatags on <head> section to describe your web pages
  • Use meta name="robots" content="index, follow, noodp" to require search engines to use your page's meta description by default

Resource

Links for further reading:

Don't Start With Visuals

By Jerome Kalumbu

Don't Start With Visuals Book

A creative approach with UX design tips to help you design effective and engaging websites.

Discover E-book