HTML Cheatsheet
Sectioning
A semantic element for creating standalone sections in a web page.
<body></body>- /* represents the content of the document */
<article></article>- /* represents a complete, or self-contained, composition in a document, page, application, or site and that can be reused */
<section></section>- /* represents a generic section of a document or application */
<nav></nav><ul><li><a href="page1.html">Link 1</a></li>...</ul>/* lists of links intended to be used for website or page content navigation */<aside></aside>- /* represents a section of a page that consists of content that is tangentially related to the content around it and which could be considered separate from that content */
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>- /* represents section headings */
<header></header><h1></h1>/* contains a group of introductory or navigational aids */<footer></footer>- /* typically contains information about its section, such as who wrote it, links to related documents, and copyright data */
Grouping
These elements provide an easy way to target each group.
<p></p>- /* represents a paragraph */
<ol></ol>- /* represents an ordered list */
<ul></ul>- /* represents an unordered list */
<li></li>- /* represents a list item */
<dl></dl>- /* represents a description list */
<dt></dt>- /* represents a term in a description list */
<dd></dd>- /* represents description/definition in a description list */
<figure></figure>- /* represents self-contained content, like illustrations, diagrams, photos, code listings, etc. */
<figcaption></figcaption>- /* represents a caption for a figure element */
<div></div>- /* represents a division within a document, used as a container for HTML elements */
<main></main>- /* the primary content of the page */
Text
These are formatting elements designed to display special types of text.
<b></b>- /* bold text */
<strong></strong>- /* important text */
<i></i>- /* italic text */
<em></em>- /* emphasized text */
<mark></mark>- /* marked text */
<small></small>- /* smaller text */
<del></del>- /* deleted text */
<ins></ins>- /* inserted text */
<sub></sub>- /* subscript text */
<sup></sup>- /* superscript text */
Table
These allow web developers to arrange data into rows and columns.
<table></table>- /* defines a table */
<th></th>- /* defines a header cell in a table */
<tr></tr>- /* defines a row in a table */
<td></td>- /* defines a cell in a table */
<caption></caption>- /* defines a table caption */
<colgroup></colgroup>- /* specifies a group of one or more columns in a table for formatting */
<col></col>- /* specifies column properties for each column within a colgroup element */
<thead></thead>- /* groups the header content in a table */
<tbody></tbody>- /* groups the body content in a table */
<tfoot></tfoot>- /* groups the footer content in a table */
Form
This tag is used to create an HTML form for user input.
<input>checked/* specifies an element is pre-selected when the page loads (checkboxes or radio buttons) */
name/* specifies the name of an input element */
placeholder/* specifies a short hint that describes the expected value of an input element */
required/* specifies that an input field must be filled out before submitting the form */
type/* specifies the type of input element to display */
value/* specifies the value of an input element */<textarea>cols/* specifies the visible width */
rows/* specifies the visible height */
name/* specifies the name of the textarea */
placeholder/* specifies a short hint that describes the expected value of an input element */
required/* specifies that an input field must be filled out before submitting the form */<button>name/* specifies a button name */
type/* specifies the type of button (button, reset, submit) */
value/* specifies an initial value for the button */<select>multiple/* specifies that multiple options can be selected at once */
name/* defines a name for the drop-down list */
required/* specifies that the user is required to select a value before submitting the form */
size/* defines the number of visible options in a drop-down list */<option>label/* specifies a shorter label for an option */
selected/* specifies that an option should be pre-selected when the page loads */
value/* specifies the value to be sent to a server */<optgroup>label/* specifies a label for an option-group */<fieldset>name/* specifies a name for the fieldset */<label>for/* specifies the id of the form element the label is bound to */<output>for/* specifies the relationship between the result of the calculation and the elements used in the calculation */
name/* specifies a name for the output element */
Global Attributes
These attributes can be used with all HTML elements.
- All HTML elements
accesskey/* specifies shortcut key to activate/focus an element */
class/* specifies one or more class names for an element (refers to a class in a style sheet) */
contenteditable/* specifies whether the content of an element is editable or not */
data-*/* stores custom data private to the page or application */
dir/* specifies the text direction for the content in an element */
draggable/* specifies whether an element is draggable or not */
hidden/* specifies that an element is not yet or is no longer relevant */
id/* specifies a unique id for an element */
lang/* specifies the language of the element's content */
spellcheck/* specifies if the element is to have its spelling and grammar checked */
style/* specifies an inline CSS style for an element */
tabindex/* specifies the tabbing order of an element */
title/* specifies extra information about an element */
translate/* specifies if the element's content should be translated */