It’s normal to know what you are searching for, to know how to do something, but what was the naming again? That’s quite relatable, that’s why I am creating this cheat sheet. So that I am able to quickly find all things HTML.
Want the sister-in-law of this cheat sheet? (it’s the one about CSS)
HTML Element Cheat Sheet
| Element | Description | Possible Attributes |
|---|---|---|
<!DOCTYPE> | Document Type Declaration | |
<html> | Root element of an HTML page | lang |
<head> | Container for metadata | |
<title> | Title of the HTML document | |
<meta> | Metadata about the HTML document | charset, name, content, http-equiv |
<link> | External resource link | href, rel, type, media, sizes |
<style> | Internal CSS styling | type, media, scoped |
<script> | JavaScript code | async, defer, src, type, charset, language |
<body> | Container for the content of the page | onload, onunload, bgcolor, text, link, alink, vlink |
<h1> to <h6> | Heading levels | |
<p> | Paragraph | |
<a> | Anchor (hyperlink) | href, target, download, rel |
<img> | Image | src, alt, width, height, usemap, ismap |
<ul> | Unordered list | type, compact |
<ol> | Ordered list | type, start, compact |
<li> | List item | value |
<dl> | Definition list | |
<dt> | Definition term | |
<dd> | Definition description | |
<blockquote> | Block quotation | cite |
<q> | Inline quotation | cite |
<abbr> | Abbreviation | title |
<cite> | Citation | |
<code> | Code | |
<em> | Emphasis | |
<strong> | Strong emphasis | |
<span> | Generic container | |
<div> | Division/container | |
<br> | Line break | |
<hr> | Horizontal rule | align, color, noshade, size, width |
<a> | Anchor (hyperlink) | href, target, download, rel |
<img> | Image | src, alt, width, height, usemap, ismap |
<table> | Table | border, width, cellpadding, cellspacing, summary |
<tr> | Table row | align, valign |
<th> | Table header cell | abbr, axis, colspan, rowspan, scope, headers |
<td> | Table data cell | abbr, axis, colspan, rowspan, headers, align, valign |
<form> | Form | action, method, target, enctype, accept-charset |
<input> | Input | type, name, value, placeholder, disabled, readonly, checked, required |
<textarea> | Text area | name, rows, cols, wrap, placeholder, disabled, readonly, required |
<select> | Dropdown list | name, size, multiple, disabled, readonly, required |
<option> | Option | value, selected, disabled, label |
<button> | Button | name, value, type, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget |
<label> | Label for form controls | for, form |
<fieldset> | Fieldset grouping | disabled, form, name |
<legend> | Caption for a <fieldset> | |
<iframe> | Inline frame | src, width, height, frameborder, allowfullscreen, sandbox |
<audio> | Audio | src, controls, autoplay, loop, muted, preload, volume |
<video> | Video | src, controls, autoplay, loop, muted, preload, width, height |
<canvas> | Drawing surface for graphics | width, height |
<svg> | Scalable Vector Graphics | width, height, viewBox |
<nav> | Navigation block | |
<header> | Header block | |
<footer> | Footer block | |
<section> | Section block | |
<article> | Article block | |
<aside> | Aside content | |
<figure> | Multimedia content with a caption | |
<figcaption> | Caption for a <figure> | |
<details> | Disclosure widget | open |
<summary> | Summary for a <details> | |
<mark> | Marked/highlighted text | |
<progress> | Progress bar | value, max |
<output> | Result of a calculation | for, form, name |
<time> | Machine-readable date/time | datetime |
<meter> | Scalar measurement within a known range | value, min, max, low, high, optimum |
<ruby> | Ruby annotation | |
<rt> | Ruby text | |
<rp> | Parentheses for ruby text |
Common HTML Attributes Cheat Sheet
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier for an element | <div id="myDiv"></div> |
class | Specifies one or more class names for an element | <p class="highlight">Text</p> |
style | Inline CSS styling for an element | <span style="color: red;">Text</span> |
title | Provides additional information about an element | <a href="#" title="Click me">Link</a> |
lang | Specifies the language of the element | <html lang="en">...</html> |
dir | Specifies the text direction | <div dir="rtl">Right to left text</div> |
tabindex | Specifies the tab order of an element | <input type="text" tabindex="1"> |
accesskey | Defines a keyboard shortcut for an element | <button accesskey="s">Save</button> |
contenteditable | Makes an element editable | <div contenteditable="true">Editable content</div> |
hidden | Hides an element | <div hidden>Hidden content</div> |
draggable | Specifies whether an element is draggable | <img src="image.jpg" draggable="true"> |
role | Describes the role of an element | <div role="navigation">Navigation</div> |
aria-* | Accessible Rich Internet Applications (ARIA) attributes | <button aria-label="Close" aria-disabled="true">X</button> |
data-* | Custom data attributes | <div data-info="123">...</div> |