Blocklevel text

<p> paragraph
<h1>...<h6> headings
<blockquote> quote, pull quote
<ul>
  <li>...</li>
  <li>...</li>
</ul>
unordered list of similar items (also used for menus)
<ol>
  <li>...</li>
  <li>...</li>
</ol>
ordered list of similar items
<dl>
  <dt>...</dt><dd>...</dd>
  <dt>...</dt><dd>...</dd>
</dl>
definition list with definition terms / data pairs
<table>
  <caption>...</caption>
  <tr>
    <th>...</th>
    <th>...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>
basic table structure

Inline text

<em> emphasis: new term, speak slower
<strong> important term, speak louder
<small> usually in footer: sidenotes, legal text, copyright info...
<sup> superscript, e.g. m2
<sub> subscript, e.g. H2O
<small> usually in footer: sidenotes, legal text, copyright info...
<cite> reference to a work or publication
<code> code block, e.g. in programming tutorials
<abbr> abbreviation
<br> line break
&lt; &gt; &copy; &mdash; ... character entities: < > © — ...
<address> primary contact information (can also be phone nr etc...)

Links

<a href="...">...</a> hyperlink
<a href="..." title="...">...</a> hyperlink with description
<a href="mailto:...">...</a> email link
<a href="tel:...">...</a> telephone link
<a href="#ref1">...</a>
<p id="ref1">...</p>
anchor (page internal link)
<a href="">company name</a>
<a href="">
   <img src="img/logo.png" alt="logo">
</a>
typical logo code
<ul>
   <li><a href="">home</a></li>
   <li><a href="">projects</a></li>
   <li><a href="">contact</a></li>
</ul>
typical menu code

Media

<img src="..." alt="..."> image
<figure>
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <figcaption>...</figcaption>
</figure>
one or more images with caption
<picture>
  <source media="..." srcset="...">
  <source media="..." srcset="...">
  <img src=-"..." alt=-"...">
</picture>
image with alternative sources
<audio src="tune.mp3">
  audio not supported
</audio>
audio element
<audio src="tune.mp3">
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>
audio with alternative sources
<video src="myvideo.mp4">
  video not supported
</video>
video element
<video src="media/myvideo.mp4">
  <source src="video_small.mp4" type="video/mp4" media="handheld">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
video with alternative sources

Structural

document
<!DOCTYPE html> HTML document type
<html> HTML document
<head> invisible meta content
<title> document title
<meta charset="utf-8"> UTF8 characterset declaration
<style>...</style> internal stylesheet
<link rel="stylesheet" href="..."> linked stylesheet
<script></script> internal script
<script src=""></script> linked script
<head> invisible meta content
<body> visible content
divisions
<div> blocklevel division (part of document)
<span> inline span (part of text)
<section> groups a title and content
<nav> main navigation block
<article> self-contained independent content
<main> main page content
<header> introductory content (page or section)
<aside> related content (page or section)
<footer> closing content (page or section)

Forms

form structure
<form action="...">...</form> basic form
<div>
  <label for="inp1">...</label>
  <input id="inp1" type="...">
</div>
control group
<div>
  <label>...</label>
  <label><input type="checkbox"> option A</label>
  <label><input type="checkbox"> option B</label>
  <label><input type="checkbox"> option C</label>
</div>
checkboxlist
<div>
  <label>...</label>
  <label><input name="grp1" type="radio"> option A</label>
  <label><input name="grp1" type="radio"> option B</label>
  <label><input name="grp1" type="radio"> option C</label>
</div>
radiobutton group
controls
<input type="text"> text field
<textarea>...</textarea> text area
<input type="passwoord"> password field
<input type="email"> email field
<input type="tel"> telephone field
<input type="url"> url field
<input type="date"> datepicker field
<input type="color"> colorpicker field
<input type="range" min="1" max="10"> slider field
<select>
  <option>value A</option>
  <option>value B</option>
  <option>value C</option>
</select>
dropdown list
buttons
<input type="submit" value="send"> submit button
<button type="submit">send</button> submit button, alternative syntax
<input type="reset" value="clear form"> reset button
attributes
<input ... placeholder="..."> set watermark text
<input ... value="..."> set input value
<input ... disabled> control is disabled
<input ... autofocus> autofocus on this control
<input ... required> value is required
<input type="radio" checked>
<input type="checkbox" checked>
control is checked
<option selected>...</option> option is checked