HTML Cheatsheet. All HTML Tags and more!

HTML

Web Development

Frontend Development

HTML Cheatsheet

This cheatsheet provides a quick reference to all HTML tags and their uses in web development. Whether you’re a beginner or an experienced developer, this guide will help you quickly find the information you need.

HTML Tags

Tag	Description
`<a>`	Anchor/hyperlink
`<abbr>`	Abbreviation
`<address>`	Contact information
`<area>`	Image map area
`<article>`	Article content
`<aside>`	Sidebar content
`<audio>`	Audio content
`<b>`	Bold text
`<base>`	Base URL for relative URLs
`<bdi>`	Bidirectional text isolation
`<bdo>`	Bidirectional text override
`<blockquote>`	Block quotation
`<body>`	Document body
`<br>`	Line break
`<button>`	Clickable button
`<canvas>`	Graphics canvas
`<caption>`	Table caption
`<cite>`	Citation
`<code>`	Computer code
`<col>`	Table column
`<colgroup>`	Table column group
`<data>`	Machine-readable data
`<datalist>`	Input options list
`<dd>`	Description list description
`<del>`	Deleted text
`<details>`	Disclosure widget
`<dfn>`	Definition term
`<dialog>`	Dialog box
`<div>`	Generic container
`<dl>`	Description list
`<dt>`	Description list term
`<em>`	Emphasized text
`<embed>`	Embedded content
`<fieldset>`	Form field grouping
`<figcaption>`	Figure caption
`<figure>`	Figure with caption
`<footer>`	Footer section
`<form>`	Form
`<h1>` to `<h6>`	Headings
`<head>`	Document metadata
`<header>`	Header section
`<hgroup>`	Heading group
`<hr>`	Horizontal rule
`<html>`	Root element
`<i>`	Italic text
`<iframe>`	Inline frame
`<img>`	Image
`<input>`	Form input
`<ins>`	Inserted text
`<kbd>`	Keyboard input
`<label>`	Form label
`<legend>`	Fieldset legend
`<li>`	List item
`<link>`	External resource link
`<main>`	Main content
`<map>`	Image map
`<mark>`	Highlighted text
`<meta>`	Metadata
`<meter>`	Scalar measurement
`<nav>`	Navigation links
`<noscript>`	No script fallback
`<object>`	Embedded object
`<ol>`	Ordered list
`<optgroup>`	Option group
`<option>`	Select option
`<output>`	Form output
`<p>`	Paragraph
`<picture>`	Responsive image
`<pre>`	Preformatted text
`<progress>`	Progress indicator
`<q>`	Inline quotation
`<rp>`	Ruby parenthesis
`<rt>`	Ruby text
`<ruby>`	Ruby annotation
`<s>`	Strikethrough text
`<samp>`	Sample output
`<script>`	Script
`<search>`	Search section
`<section>`	Document section
`<select>`	Dropdown list
`<slot>`	Web component slot
`<small>`	Small text
`<source>`	Media resource
`<span>`	Inline container
`<strong>`	Strong importance
`<style>`	Style information
`<sub>`	Subscript
`<summary>`	Details summary
`<sup>`	Superscript
`<table>`	Table
`<tbody>`	Table body
`<td>`	Table data cell
`<template>`	Template
`<textarea>`	Multi-line text input
`<tfoot>`	Table footer
`<th>`	Table header cell
`<thead>`	Table header
`<time>`	Date/time
`<title>`	Document title
`<tr>`	Table row
`<track>`	Media track
`<u>`	Underlined text
`<ul>`	Unordered list
`<var>`	Variable
`<video>`	Video content
`<wbr>`	Line break opportunity

Document Structure

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

HTML Attributes

HTML attributes provide additional information about elements. They are specified in the opening tag and usually come in name/value pairs like name="value".

Common Attributes

Attribute	Description
`class`	Specifies one or more class names for an element
`id`	Specifies a unique identifier for an element
`style`	Specifies inline CSS styles for an element
`title`	Specifies extra information about an element (tooltip)
`href`	Specifies the URL for a link
`src`	Specifies the URL of an image or script
`alt`	Specifies alternative text for an image
`type`	Specifies the type of an input element
`name`	Specifies the name of an input element
`value`	Specifies the value of an input element
`placeholder`	Specifies a short hint for an input element
`disabled`	Disables an input element
`checked`	Specifies that an input element is checked
`readonly`	Specifies that an input element is read-only
`required`	Specifies that an input element must be filled out before submitting the form
`data-*`	Custom data attributes for storing extra information

Example of Attributes

<a
  href="https://example.com"
  class="link"
  id="exampleLink"
  title="Visit Example"
  >Example Link</a
>
<img src="image.jpg" alt="Description of image" class="responsive" />
<input type="text" name="username" placeholder="Enter your username" required />
<button type="submit" class="btn primary">Submit</button>

HTML Entities

HTML entities are used to represent special characters that have a specific meaning in HTML. They start with an ampersand (&) and end with a semicolon (;). Here are some common HTML entities:

Entity	Description
`&`	Ampersand (`&`)
`<`	Less-than (`<`)
`>`	Greater-than (`>`)
`"`	Double quote (`"`)
`'`	Single quote (`'`)
` `	Non-breaking space
`©`	Copyright symbol (`©`)
`®`	Registered trademark symbol (`®`)
`€`	Euro sign (`€`)
`£`	British pound sign (`£`)

<p>Use &lt; and &gt; for less than and greater than symbols.</p>
<p>Use &amp; for the ampersand symbol.</p>
<p>Use &quot; for double quotes and &apos; for single quotes.</p>
<p>
  Use &copy; for the copyright symbol and &reg; for the registered trademark
  symbol.
</p>
<p>Use &euro; for the Euro sign and &pound; for the British pound sign.</p>

Conclusion

This HTML cheatsheet provides a quick reference to all HTML tags, attributes, and entities. Use it as a guide while developing your web projects to ensure you are using the correct syntax and structure. For more in-depth information, refer to the HTML documentation .

About the author

Vasil Kostadinov

Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.