HTML Cheat Sheet

Basic Document Structure

Tag	Description
<!DOCTYPE html>	Declares the document type to be HTML5. Must be the very first thing in your HTML document.
<html>	The root element of an HTML page.
<head>	Contains meta-information about the HTML document, like the title, character set, styles, scripts, etc.
<title>	Specifies the title for the HTML document (which is shown in the browser's title bar or in the page's tab).
<body>	Contains the visible page content.

Head Elements

Tag	Description	Common Attributes
<meta>	Provides metadata about the HTML document.	charset, name, content, http-equiv
<link>	Defines the relationship between the current document and an external resource (most used to link to style sheets).	rel, type, href, media
<style>	Defines internal CSS styles for the HTML document.	type
<script>	Used to embed or reference executable scripts (usually JavaScript).	src, type, async, defer
<base>	Specifies the base URL/target for all relative URLs in the document.	href, target

Text Formatting

Tag	Description
<h1> to <h6>	Defines headings of different levels (1 being the most important).
<p>	Defines a paragraph.
<span>	An inline container used to mark up a part of a text or a part of a document.
<strong>	Defines important text (usually displayed in bold).
<em>	Defines emphasized text (usually displayed in italic).
<u>	Defines text that should be stylistically different from normal text, like misspelt words or proper nouns in Chinese (usually underlined). Use CSS for styling.
<s>	Defines text that is no longer correct or accurate (usually displayed with a strikethrough). Use CSS for styling.
<br>	Inserts a single line break.
<hr>	Represents a thematic break between content at the paragraph level (e.g., a shift of topic).
<pre>	Defines preformatted text. Text inside is displayed in a fixed-width font, and it preserves both spaces and line breaks.
<code>	Defines a piece of computer code.
<kbd>	Defines keyboard input.
<samp>	Defines sample output from a computer program.
<var>	Defines a variable.
<abbr>	Defines an abbreviation or an acronym.	title
<address>	Defines contact information for the author/owner of a document or an article.
<bdo>	Overrides the current text direction.	dir (rtl or ltr)
<cite>	Defines the title of a work (e.g., a book, a poem, a song, a movie, a painting, etc.).
<q>	Defines a short quotation.

Lists

Tag	Description
<ul>	Defines an unordered list.
<ol>	Defines an ordered list.	type (1, A, a, I, i), start, reversed
<li>	Defines a list item.
<dl>	Defines a description list.
<dt>	Defines a term/name in a description list.
<dd>	Describes each term/name in a description list.

Links

Tag	Description	Common Attributes
<a>	Defines a hyperlink.	href, target (_blank, _self, _parent, _top, framename), rel (noopener, noreferrer, nofollow), download

Images

Tag	Description	Common Attributes
<img>	Embeds an image in the document.	src, alt, width, height, loading (lazy, eager), srcset, sizes
<figure>	Represents self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element.

Tables

Tag	Description
<table>	Defines a table.
<thead>	Groups the header content in a table.
<tbody>	Groups the body content in a table.
<tfoot>	Groups the footer content in a table.
<tr>	Defines a row in a table.
<th>	Defines a header cell in a table.	scope (col, row, colgroup, rowgroup)
<td>	Defines a data cell in a table.	colspan, rowspan
<caption>	Defines a title for the table.
<colgroup>	Specifies a group of one or more columns in a table for formatting.
<col>	Specifies column properties for each column within a <colgroup> element.	span

Forms

Tag	Description	Common Attributes
<form>	Defines an HTML form used to collect user input.	action, method (get, post), target, autocomplete (on, off)
<input>	Defines an input control.	type (text, password, radio, checkbox, submit, reset, file, hidden, number, email, url, date, time, datetime-local, range, color), name, value, placeholder, required, readonly, disabled, maxlength, min, max, step, autocomplete, list
<textarea>	Defines a multiline input control (text area).	name, rows, cols, placeholder, required, readonly, disabled, maxlength
<button>	Defines a clickable button.	type (button, submit, reset), name, value, disabled
<select>	Defines a drop-down list.	name, multiple, size, disabled
<option>	Defines an option in a drop-down list.	value, selected, disabled
<optgroup>	Defines a group of related options in a drop-down list.	label, disabled
<label>	Defines a label for an input element.	for
<fieldset>	Groups related elements in a form.	disabled, form, name
<legend>	Defines a caption for a <fieldset> element.
<datalist>	Specifies a list of pre-defined options for an <input> element.	id
<keygen>	Generates a key pair for secure form submission. Deprecated.
<output>	Represents the result of a calculation or user action.	for, name

Semantic Elements

Tag	Description
<article>	Represents a self-contained composition in a document, page, application, or site (e.g., a forum post, a blog entry, a news story).
<aside>	Represents content aside from the content it is placed in (e.g., sidebars, pull quotes, advertisements).
<details>	Defines a disclosure widget in which information is visible on demand.
<figcaption>	Provides a caption for a <figure> element.
<figure>	Represents self-contained content, potentially with a caption.
<footer>	Defines a footer for a document or section.
<header>	Represents an introductory content, usually containing a set of introductory or navigational aids.
<main>	Specifies the main content of a document.
<mark>	Represents text marked for reference or notation, due to its relevance in a particular context.
<nav>	Represents a section of a page whose purpose is to provide navigation links.
<section>	Represents a thematic grouping of content, typically with a heading.
<summary>	Defines a visible heading for the <details> element.
<time>	Represents a specific period in time.	datetime

Multimedia

Tag	Description	Common Attributes
<audio>	Embeds sound content.	src, controls, autoplay, loop, muted, preload
<video>	Embeds video content.	src, controls, autoplay, loop, muted, preload, width, height, poster
<source>	Specifies multiple media resources for <audio> and <video> elements.	src, type, media
<track>	Specifies text tracks for <audio> and <video> elements (e.g., subtitles).	src, kind (subtitles, captions, descriptions, chapters, metadata), srclang, label, default
<embed>	Embeds external content at a specified point in the document.	src, type, width, height
<object>	Represents an external resource.	data, type, width, height, name
<param>	Defines parameters for an <object> element.	name, value

Canvas and SVG

Tag	Description
<canvas>	Used to draw graphics on the fly (usually with JavaScript).
<svg>	A container for Scalable Vector Graphics.

Global Attributes

These attributes can be used on most HTML elements:

class: Specifies one or more class names for an element (often used to point to a class in a style sheet).
id: Specifies a unique id for an element.
style: Specifies inline CSS styles for an element.
title: Specifies extra information about an element (displayed as a tooltip).
lang: Specifies the language of the element's content.
dir: Specifies the text direction for the content of an element (ltr or rtl).
data-*: Used to store custom data private to the page or application.
hidden: Specifies that an element is not yet, or is no longer, relevant.
tabindex: Specifies the tabbing order of an element.
draggable: Specifies whether an element is draggable.
spellcheck: Specifies whether the element should have its spelling and grammar checked.
contenteditable: Specifies whether the content of an element should be editable.

Common Event Attributes

Event attributes define actions that can be performed on HTML elements (JavaScript is usually used to handle these events):

**Window Events:** onload, onunload, onresize, onerror
**Form Events:** onchange, onsubmit, onblur, onfocus
**Keyboard Events:** onkeydown, onkeypress, onkeyup
**Mouse Events:** onclick, ondblclick, onmouseover, onmouseout, onmousedown, onmouseup
**Media Events:** onabort, oncanplay, onended, onloadeddata, onpause, onplay, onseeked, onseeking, onvolumechange