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