HTML Cheatsheet
The grand recap! Here's the whole HTML story in one place. Skim this to refresh your memory any time.
The skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- visible content here -->
<script src="app.js"></script>
</body>
</html>
Structure tags
| Tag | Use |
|---|
<header> | top of a page/section |
<nav> | navigation links |
<main> | main content (once) |
<section> | themed chunk |
<article> | standalone piece |
<aside> | side/related content |
<footer> | bottom of a page/section |
<div> | generic box |
Text tags
| Tag | Use |
|---|
<h1>...<h6> | headings |
<p> | paragraph |
<strong> / <em> | important / emphasized |
<a href="..."> | link |
<ul> / <ol> / <li> | lists |
<dl> / <dt> / <dd> | description list |
<br> / <hr> | line break / divider |
<mark> / <small> | highlight / fine print |
<sub> / <sup> | below / above line |
<code> / <kbd> | code / keyboard |
Media tags
| Tag | Use |
|---|
<img src alt> | image |
<figure> / <figcaption> | image + caption |
<video controls> | video |
<audio controls> | audio |
<iframe src title> | embed another page |
<source> / <track> | media sources / subtitles |
Table tags
| Tag | Use |
|---|
<table> / <tr> | table / row |
<th> / <td> | header / data cell |
<caption> | table title |
<thead> / <tbody> / <tfoot> | table parts |
<col> / <colgroup> | columns |
Form tags
| Tag | Use |
|---|
<form action method> | the form |
<input type name> | a field |
<label for> | a label |
<button type="submit"> | submit button |
<select> / <option> | dropdown |
<textarea> | long text |
<fieldset> / <legend> | group + title |
<datalist> | autocomplete suggestions |
<progress> / <meter> | progress / gauge |
Handy attributes
| Attribute | Use |
|---|
id / class | unique / shared names |
title | hover tooltip |
lang / dir | language / direction |
hidden | hide element |
tabindex | keyboard focus order |
data-* | custom data |
contenteditable | editable text |
required / pattern | form validation |
placeholder / autocomplete | hints / autofill |
loading="lazy" | lazy load images |
The golden rules
- Start with
<!DOCTYPE html>. - Use semantic tags: tell everyone what things mean.
- Always add
alt to images and label to inputs. - Write tags in lowercase.
- Keep the
<head> for info, the <body> for content.
You've made it to the end: go build something amazing!