home

programming

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:

rolesemantic 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>

resources