Show Menu
Cheatography

HTML Cheat Sheet (DRAFT) by

Quick reference for HTML tags

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Document

<!DOCTYPE>
Used for document format valida­tion. Inner nodes are not allowed.
<ht­ml>
The root tag for the document. Sub nodes allowed are <he­ad> and <bo­dy>.
<he­ad>
Where meta inform­ation for the document does.
<bo­dy>
The document's main body.
<!-- ... -->
Comment, it will be ignored by the browser.

<he­ad> tags

<ti­tle>
Title of the document. Usually displayed in a broswer tab or window. Also used for SEO.
<me­ta>
Metadata inform­ation for the document, like author, keywords, descri­pti­on...
<script>
Javascript code block, for page behaviour.
<st­yle>
Style defini­tions for the page.
<li­nk>
Allows for the inclusion of JS and CSS external files, and also related pages (previous, next,...)
<ba­se>
Base URI for the links in the page.

Text

<sp­an>
A section of text.
<pr­e>
Prefor­mated text, white space will be respected.
<br­/>
Explicit line break.
<hr>
Horizontal line.
&..;
Character entities, can be used to render characters that are used as markup.
<su­p>
Supers­cript.
<su­b>
Subscript.
<ci­te>
Citation (person), usually italic­ized.
<ab­br>
Will show a little box with the full name for the abbrev­iation (title attribute) on mouse over.
<acronym>
Will show a little box with the full name for the acronym (title attribute) on mouse over.
<em>
Emphasis (italic), consider CSS.
<st­ron­g>
Emphasis (bold), consider CSS.
<co­de>
Code format­ting.
<sa­mp>
Sample.
<kb­d>
Keyboard input.
<va­r>
Code variables.
<q>
Inline quote.

Text (block)

<h1>
Primary heading, should only have one per document, used for SEO.
<h2> to <h6>
Sub heading, should not include higher level heading inside it.
<di­v>
A section of the document, can contain other data.
<p>
A paragraph of content, should contain just text.
<bl­ock­quo­te>
Quote, can use the cite attribute to specify a URI where the quote was obtained.

Links and Anchors

<a>
HTML anchor. While there is only one tag, it serves two purposes, you can use attributes to specify the use. The name attibute is used to define a target anchor, and the href attibute for a source anchor. Use # to go to a target anchor in the document, or a element id, or title attribute to for a little popup.

Images and objects

<im­g>
Displays the image specified in the src attribute
<ob­jec­t>
Embedded object. Use the attributes data and type to specify the type object, and the inner content for an altern­ative when the browser has no support for the object.
<param>
Object inner tag, to pass parameters for the object. The parameters expected depend on the object type.
 

Lists

<ul>
Unordered list, rendered as bullet points.
<ol>
Ordered list, rendered with numeric or alpha charac­ters.
<li>
List item, used with ordered and unordered lists.
<dl>
Definition list, list of terms and their defini­tion.
<dt>
Term, for definition lists.
<dd>
Defini­tion, for definition lists.

Tables

<ta­ble>
Main table tag, encaps­ulates all the others.
<caption>
Title for the table
<th­ead>
The table header, usually a single row.
<tf­oot>
The table footer, usually a single row.
<tb­ody>
The table body, with multiple rows repres­enting the data. Must come after the header and footer.
<tr>
Table row, required for the header, footer and body.
<th>
Data cell for the header.
<td>
Data cell for the footer and body.

Semantic elements

<ma­in>
Wraps the main content of the page. Navigation and copyright inform­ation, for example, should not be included inside the main block.
<ar­tic­le>
Usually inside the <ma­in>, represents a way to group important inform­ation.
<as­ide>
Represents inform­ation that might be important, but not as important as the rest of the content.
<se­cti­on>
Used to group related content.
<he­ade­r>
Logical header for the content.
<fo­ote­r>
Logical footer for the content.
<na­v>
Logical container for site naviga­tion.
<ti­me>
Identifies a point in time. Can be a date, a time or a datetime. Can have a pubdate attribute to specify a public­ation date, but there can only be one pubdate on the page.
<fi­gur­e>
Adds semantic meaning to images.
<figcaption>
Used inside a <fi­gur­e>, contains the caption for the figure.
<de­tai­ls>
Will initially be collapsed to show the <su­mma­ry> content, will expand to the rest of the content once clicked.
<su­mma­ry>
Contains short descri­ption about the detail. Used inside <de­tai­ls>.
<ma­rk>
Used to highlight terms in search results.
<bd­i>
Bidire­ctional isolated element. Used to change the horizontal direction of text.
<wb­r>
Word break element. Tells the browser where to hyphenate a word when wrapping is required.
<ou­tpu­t>
Used to show the result of a calcul­ation, or the output of a command line.
<em­bed>
Host container for external contai­ners.
These are used to describe content to a search engine, not to add behaviour to a page.