Semantic HTML Notes

HTML Interview Questions: Semantics and Accessibility

Thirty questions on the topic that appears in almost every front end interview now, and where vague answers are most obvious.

HTML

Project: A Personal Profile Page

Your first complete page. One file, semantic structure, a photograph, a list, a table and a link out - built to a specification and checked against it...

HTML

Clean HTML: Structure, Naming and Maintainability

Markup you can still read in six months. Consistent conventions, meaningful names, shallow nesting and a house style that survives more than one devel...

HTML

Headings and Content Structure for Search

Headings are how a crawler works out what a page covers and how it is organised. They are also how you become eligible for a featured snippet.

HTML

SEO Friendly HTML Structure

Search engines read markup, not screenshots. The structural decisions that make a page understandable to a crawler are the same ones that make it unde...

HTML

Accessibility: What It Means and Where HTML Fits

Most of accessibility is choosing the right element. The rest is a short list of habits. Here is the framework and the small number of things that fix...

HTML

div and span: When Nothing Else Fits

Two elements with no meaning at all, and that is the point. Learn what they are for, why they are not a failure, and how to know you have too many.

HTML

details, summary, time, address and other Semantic Elements

A disclosure widget with no JavaScript, machine readable dates, contact details and a progress bar. Small elements that replace a surprising amount of...

HTML

section, article and aside

The three most argued about elements in HTML. There are clear tests for each, and once you know them the choice stops being a matter of taste.

HTML

Page Landmarks: header, nav, main and footer

Four elements divide a page into regions a screen reader can jump between. Learn the rules for each, including the one that says main appears exactly...

HTML

Why Semantic HTML Matters

Two pages can look identical and be worlds apart. Semantic markup is what tells browsers, screen readers and search engines what each part of a page a...

HTML

Description Lists: dl, dt and dd

The third list type, and the most misunderstood. A description list pairs terms with descriptions, which makes it right for glossaries, metadata and s...