html

language

By default, a webpage’s language is set to “unknown.”

<!DOCTYPE html>
<html lang="en">

meta

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="avanier">
<meta name="description" content="about this page">

To fuck with analytics, let’s not send HTTP referrer headers:

<meta name="referrer" content="no-referrer,same-origin">

Forget the OpenGraph shit.

For light and dark themes. Some browsers will use these values to customise the browser user interface accordingly.

<meta name="color-scheme" content="light dark">
<meta name="theme-color" media="(prefers-colors-scheme: light)" content="#f8f8f8">
<meta name="theme-color" media="(prefers-colors-scheme: dark)" content="#030303">

guidelines

Have only one <main> element per page
Have only one <h1> element per page
Use <abbr> for abbreviations and acronyms
Use <time> for datetime texts
Use <samp> for sample output from a computer program, e.g. 404 Not Found
Use <kbd> for presenting user input, e.g. Ctrl+Z
Add translate="no" around content that shouldn’t be translated

lists

You can use start to set a custom counter start for ordered lists. A list item’s number value can also be overridden with value.

<ol start="5">
  <li>five
  <li>six
  <li value="8">eight
</ol>

aria

roles

Use semantic HTML in lieu of these role values:

role	semantic HTML
`article`	`<article>`
`banner`	`<header>`
`button`	`<button>`
`cell`	`<td>`
`checkbox`	`<input type="checkbox">`
`columnheader`	`<th>`
`contentinfo`	`<footer>`
`definition`	`<dfn>` `<dd>`
`figure`	`<figure>`
`form`	`<form>`
`heading`	`<h1>`–`<h6>`
`img`	`<img>`
`link`	`<a>`
`list`	`<ol>` / `<ul>`
`listbox`	`<select>` `<option>`
`listitem`	`<li>`
`main`	`<main>`
`mark`	`<mark>`
`meter`	`<meter>`
`navigation`	`<nav>`
`progressbar`	`<progress>` / `<input type="range">`
`radio`	`<input type="radio">`
`region`	`<section>`
`row`	`<table>` `<tr>`
`searchbox`	`<input type="search">`
`separator`	`<hr>`
`slider`	`<input type="range">`
`suggestion`	`<ins>` / `<del>`
`switch`	`<input type="checkbox">`
`table`	`<table>`
`term`	`<dfn>` `<dt>`
`textbox`	`<input type="text">` / `<textarea>`