HTML5 Cheatsheet

Your ultimate quick-reference guide for all essential HTML tags and attributes.

Document Structure

<!DOCTYPE html> Declares HTML5
<html> Root element
<head> Contains meta info
<title> Page title
<body> Visible content
 Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Text Content

<h1> - <h6> Headings
<p> Paragraph
<br> Line break
<hr> Thematic break
<strong> Important text
<em> Emphasized text
<small> Smaller text
<mark> Marked text
<sup> Superscript
<sub> Subscript
<blockquote> Block quote
<code> Inline code
<pre> Preformatted text

Lists

Unordered List
<ul> List container
<li> List item
Ordered List
<ol> Numbered container
<li> List item
Description List
<dl> List container
<dt> Term
<dd> Description

Tables

<table> Table container
<tr> Table row
<th> Table header
<td> Table data cell
<thead> Header section
<tbody> Body section
<tfoot> Footer section

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

Forms

<form> Form container
<label> Input label
<input> Input field
<textarea> Multiline text
<select> Dropdown menu
<button> Clickable button

<form action="/submit">
  <label for="name">Name:</label>
  <input type="text" id="name">
  <input type="submit" value="Send">
</form>

Semantic Elements

<header> Header of section/page
<nav> Navigation links
<main> Main content area
<section> Section in a document
<article> Independent content
<aside> Sidebar content
<footer> Footer of section/page
<figure> Self-contained content

Media

Audio
<audio controls> Audio player
<source> Media resource path
Video
<video controls> Video player
width / height Set dimensions

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Important Attributes

id="" Unique identifier
class="" CSS class (reusable)
style="" Inline CSS
title="" Extra info / tooltip
lang="" Language of content
hidden Hide element
data-*="" Store custom data
placeholder="" Hint in input field
required Field is mandatory

HTML Entities

< < (Less than)
> > (Greater than)
& & (Ampersand)
" " (Double quote)
' ' (Single quote)
  Non-breaking space
© © (Copyright)
® ® (Registered)

Doctype Explained

The <!DOCTYPE html> declaration defines this document to be HTML5.

It must only appear once, at the very top of the page (before any HTML tags). It helps browsers render the page correctly in standards mode, preventing older quirks modes from activating.

About HTML

The foundation of every website on the internet.

🧱

Building Blocks

HTML (HyperText Markup Language) provides the fundamental structure of a webpage. It allows you to organize text, images, and other media elements logically for the browser to render.

🔍

SEO & Accessibility

Using the correct semantic tags (like <nav> or <article>) not only helps screen readers understand your layout, but also drastically boosts your search engine rankings.

🌐

Universal Standard

No matter what complex frameworks or backend technologies you use, every web application ultimately compiles down to HTML to be displayed in a user's browser.