Document structure
28 steps in 6 sets of HTML.
The document itself. Doctype and head, headings and text, lists, links and images, and tables done properly with a caption and real header cells.
Twenty-eight steps, all of it validated by the Nu Html Checker, the same validator behind validator.w3.org. Every snippet here parses clean, which is more than can be said for most HTML on the web.
The document
- The document skeletonFive lines that every page needs before it needs anything else.
- Comments and where whitespace mattersA comment is invisible to the reader and very visible in view-source.
- Character entitiesEscaping the characters that markup itself reserves.
Text & headings
- HeadingsHeadings are the outline of a document, not a way to change font size.
- Paragraphs and breaksBlock text: paragraphs, a thematic break, and a line break where it matters.
- Inline semanticsInline elements that carry meaning: emphasis, importance, code and abbreviations.
- Emphasis and importanceFour elements that look like styling and are really meaning.
- Code, samples and variablesMarking up the parts of a terminal session so each one means something.
- QuotationsBlock quotes, inline quotes and citations, each with its own element.
- Abbreviations, times and machine valuesThree elements that carry a machine-readable value beside the human one.
Lists
- Unordered listsA bullet list: order carries no meaning, and lists can nest.
- Ordered listsA numbered list for steps, where the order is the point.
- Nested listsA sub-list goes inside the item it belongs to, not beside it.
- Controlling list numbersAn ordered list can start anywhere, count backwards, or skip a number.
- Description listsTerm and definition pairs: glossaries, metadata, key-value detail.
Links & images
- LinksThe anchor element and the shapes a destination can take.
- Non-web linksAnchors can address mail, phone numbers and downloads too.
- Link targets and relationshipsThe attributes that say where a link opens and what it is for.
- Linking within a pageA fragment link jumps to whatever element carries that id.
- ImagesAn image needs a source, alternative text, and dimensions to reserve space.
- Images that do not shift the pageWidth and height are not styling: they reserve the space before the file arrives.
- Figures and captionsA figure ties an image, chart or code sample to its caption.
Tables
- TablesA data table: header cells label the columns, data cells hold the values.
- Table sections and scopeHead, body and foot sections, with scope telling each header what it labels.
- Cells that spancolspan widens a cell; rowspan deepens it. Count carefully or the grid breaks.
- Columns as a groupcolgroup is the one place you can address a whole table column at once.
Encore
- landing_page.htmlA complete landing page: head metadata, hero, feature list, footer.
- docs_page.htmlA documentation page: skip link, sidebar, a table of contents, and content that reads in order.