HTML Cheat Sheet

Written by
Gary Stevens

Edited by
Nathan Navidzadeh

Updated On
November 8, 2023

Reading Time
66 min

List of HTML Elements by Category

HTML Tag

tag is the top-level, root tag and communicates to the browser that it is an HTML document. Every element in an HTML document is a descendant of this tag.

Base Tag

This is an HTML element inside the Head tag that specifies the base URL of a site. The tag provides the main URL relative to other paths in the document. It provides a starting point-of-reference, eliminating the need to specify the absolute URL path to a resource within the page.

Head Tag

Thetag is a container for the head elements and descriptive tags in the document. It is placed at the beginning of the document, usually after the opening HTML tag and doesn’t get displayed. It includes descriptive metadata information such as the document title but also links to external resources the browser needs to render the webpage like CSS documents, scripts, links to scripts and external stylesheets.

Link Tag

The tag is useful in establishing a link between the HTML document and an external source. A tag can only be used in the document’stag and it shouldn’t be confused with hyperlinks created with anchor tags. This is because the tag does not create a clickable link, but it is used to specify resources like external stylesheets that are used to customize the web page’s appearance and layout. 

Meta Tag

Also part of the Head section, this element is used to describe and provide metadata in a structured way to the web document. These aren’t necessarily for the benefit of the user so don’t get displayed on the page. Rather, they are machine-parsable information used by web services such as browsers, and search engines.

Style Tag

Used to change the layout, position, and appearance of elements in an HTML document. Inside the tags, the style information can be administered by applying inline CSS to a single element. Or placed inside the Head section as internal styles tags <styles> and implemented as a class.

Title Tag

Compulsory in HTML documents, this tag specifies the

Address Tag

Provides contact information of the document owner or author. The

<address>tag may include whatever information is deemed appropriate to be made public such as an address, phone numbers, email, URL in the enclosed tags. 

Article Tag

The

<article>tag is an independent composition in a webpage, web application, or site that ought to make sense in its own right. This is because it could potentially be distributed on its own, reused or syndicated, and therefore sectioned separately though it is related to other content of the site. 

Aside Tag

The

<aside>tag highlights the main objective of a webpage in a shorter, succinct manner that grabs attention, therefore emphasizing it to the user.

Body Tag

Theconstituents the body of the web document where the main content of the web page, such as text, images, lists, tables, and so on, are displayed. Like the base and head tag, there can only be one body tag in a document.

Footer Tag

The

<footer>is a purely structural element used to define the footer of a document. It typically contains contact information, copyright information, authorship, sitemap, back-to-top links, and other navigational elements.

H1 to H6 Tag

These tags are used exclusively to define a range of headings in a document. They are in decreasing order of size, with
<h1>denoting the largest heading, while</h1>
<h6>the smallest. Likewise, they are graduated along with levels of importance, with</h6>
<h1>defining the most important heading, down to</h1>
<h6>as the least.

Header Tag

Not to be confused with the head tag, the

<header>tag is more similar to the footer tag as it is a structural element mainly used for introductory content or navigational elements. As the name suggests, it is used to demarcate the header of a document or section. It usually includes authorship information, relevant logos or icons, search forms, one or more heading elements tags (
<h1>…</h1>
<h6>), and navigation links. The</h6>
<header>tag cannot be placed within a footer, address, or another header element tag.

Hgroup Tag

The

<hgroup>tag is a heading grouping tag used to consolidate heading elements into a unit. It is used to provide a multi-level grouping to wrap one or more heading elements (
<h1>…</h1>
<h6>), into headings and subheadings. 

Nav Tag

The purpose of the nav tag

<hgroup>
<h6></h6>
</hgroup><nav>is to declare a section comprised of navigational links, especially when represent different routing options. The nav tag is a semantic markup element, conveying unique meaning and importance to the block of links so designated. These links can be the route to content within the current document or other documents. It is not required or even advised that all links be placed inside an<nav>element but it should be used when demarcating a major block of navigation elements. The navigational elements inside the tag are usually comprised of anchor tags <a>.

Section Tag

The section element

<section>is a structural element used to represents a standalone section. It is used to divide the document content into sections and subsections, which may contain items such as headers, footers or chapters. It is a semantic element, describing its meaning both to the developer, user, and browser by virtue of grouping generic blocks of related content.

Blockquote Tag

This indicates that the text - usually a large section of text - enclosed by
<blockquote>tag is a quotation. The quote encapsulated by this tag is usually from another source, and browsers often render them indented both on the right and left sides to create a visual distinction. It provides a cite attribute to link the URL of the quotation’s source.

Br Tag

The
tag is used to create single line breaks on a web page. It doesn’t have any ending, enclosing tag because it is an empty tag. This void tag should only be used to separate lines that are parts of content, such as lines in addresses or poems. It is ill-advised to use it separate thematic groups in a paragraph, as

or multiple

tags are better suited for that purpose. 

DD Tag

A tag used in a description lists,

(DD - Definition Description) is used in conjunction with other description list tags to clarify the meanings and groupings in the list. While the

tag (DT - Definition Term) defines terms and names, the subsequenttag describes the aforementioned terms in clearer detail. You can place paragraphs, lists, images, line breaks, links and so on inside the

tag.

Div Tag

Often used as a container in HTML documents, the
<div>

tag is used to create a section, a division on a document that renders as a self-contained unit. Web developers often use the
<div>tag to encapsulate elements intended to be grouped together for commonality, like applying the same CSS styles to its underlying elements.

Dl Tag

The description list tag provides a mechanism for declaring a list that has its own terms and descriptions. The description list
<dl>allows the creation of a pair of two entries, a term
 	<dt>and a description</dt>
 	<dd>. The eventual list resembles a data structure such as an associative array with key-pair values.

Dt Tag

</dd>
 	<dt>constitutes the terms of a description list. The term or name the</dt>
 	<dt>provides must be done within a
<dl>list, and usually comes before its subsequent description by a
 	<dd>element.

Figcaption Tag

Provides a caption for a marked-up photo. It serves as a legend or caption for a
<figure>element. 

Figure Tag

This tag is for photo markup and other artistic annotations. It identifies an independent unit of content such as a diagram, photo, illustration, code listing, and so on.

Hr Tag

This tag means a horizontal rule is placed in a document to denote when a subject or topic has changed in the document, helping separate the content in a paragraph-like fashion. Layout attributes were removed for this tag in HTML5, so CSS is required for styling. When used in XHTML, it has to be enclosed properly:

<hr />

Li Tag

The list tag proves the mechanism to present lists items in an HTML document. The
<ul>
 	<li>tag is either nested within an
<ol>or
 	<li style="list-style-type: none;">
<ul>parent tags. The former is for creating numeric ordered lists, the latter, unordered. Each
 	<li>creates an individual item that constitutes the list.

Main Tag

Context distinctly unique to a document is placed in the

<main>tag. Therefore, it shouldn’t contained the same content found across pages of the same website. As a result, it shouldn’t contain elements such as headers, footers, and navigational items like menus. This tag is the central content of thetag. It should be related to and expound upon the main theme of the document.

Ol Tag

<ol>is for ordered items which are usually displayed as a numbered list, though they can also be rendered alphabetically. The start attribute provides a starting point, an ordinal number for the numbering the first item on the list. Each subsequent item is incremented by 1, unless overridden by the
 	<li>element’s value attribute, whereby that item and subsequent ones reset to the new value. Reverse the order of the list i.e., the ascending or descending order with the reverse attribute.

P Tag

The p tag demarcates a block of text into a paragraph. As opposed to being inline, this is a block-level tag, created placing text between the opening and closing tags. Most web browsers automatically added spacing before and after each paragraph, though you can alter this with the CSS margin property.

Pre Tag

Useful for preformatted text, this compels the browser to display the text as exactly as formatted. Browsers usually render it in a peculiar way, to distinguish it from other text. It is used for showing things such as computer code, ASCII art, and email correspondence.

Ul Tag

<ul>
 	<li style="list-style-type: none;">
<ul>is for unordered lists whose items have no sequential relationship with each other. The default style of display is the circle-style bulleted list, though the list-style-type property can be used to change it to another bullet type. In addition, the list-style-type property is used to apply images to the list instead of bullets.

A Tag

If you want to create clickable hyperlinks in your HTML document, then you’ll find the anchor, <a> tag virtually indispensable. It is used to link one document to another, or even create a link within the same document. This is achieved through its href attribute, which points to the URL of the webpage you want to redirect to. Omitted href will automatically render the following these attribute functions unusable: media, hreflang, download, target, and rel. Hyperlinks are given different colors to signify their current state. All are underlined, but a visited link is often purple, unvisited blue, and an active one red.

Abbr Tag

<abbr> Provides abbreviations of elements. You can use to make your life easier by associating a full-text description with a simpler acronym. The full length description is stored in the title attribute of the tag. The benefit is more for machine-readable agents such as browsers and search engines, since users do not see the full-text described in the title attribute.

B Tag

This makes a text bold, highlighting it to draw attention. This was formerly referred to as the Boldface. It is advised that <b> shouldn’t be used to style text, only to draw the user's attention. Styling should be done with CSS’s font-weight property, if you want to create boldface text. The <strong> element can also be used to signal that the enclosed text has some special significance.

BDI Tag

This is a bi-directional element, meaning that it works to isolate a range or span of text in such a way that the formatting of surrounding text in a different direction does not impact it. The call on how to do this is made by the browsers bidirectional algorithm, especially when right-to-left (RTL) direction languages (Arabic and Hebrew) are juxtaposed nearby with left-to-right languages, such as English.

BDO Tag

This overrides the browser's current bi-directionallity. It resolves the conflict which arises when you have to place a right-to-left (RTL) languages beside a left-to-right (LTR) one.

Cite Tag

This tag is used to cite a referenced work. The defined title can be linked to the referenced work with an href attribute pointing to the URL. 

Code Tag

The <code> tag is used to define and display computer code in an HTML document. The tag creates the text in a differently styled fashion to relay the fact that it is a short piece of code. It can be combined with the </code>
<pre>tag to preserve formatting within the code such as line breaks and indentation.

Del Tag

<del> identifies a text that has been deleted, though not removed in order to preserve the revision history. The deleted text is usually shown with strikethrough to indicate its status.

DFN Tag

Signifies a term being defined with a context. The nearest parent or ancestor element to the term defined by the <dfn> tag, whether it is a </dfn>

<section>,,

</section></li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</figure>
</dd>
 	<dt>/</dt>
 	<dd>is regarded as the definition of the term. 

Em Tag

This tag emphasizes a text relative to its surrounding text to highlight that it has greater emphasis. 

I Tag

This tag is for italics, to signify text is meant to convey a different mood, temperament or voice. It is based on semantics, so judgement is required when to use it, as opposed to choosing <em>, <strong>, and so on. Often used to distinguish technical terms, thought bubbles, word phrases from a foreign language and the like. 

Ins Tag

<ins> is used in conjunction with <del> to insert a text into a document. While a deleted element is denoted with a strikethrough, inserted text is highlighted with an underline.

Kbd Tag

This defines the kind of user input required of a user. This text is often highlighted by the browser in a default monospace font, those this may differ depending on the browser. <kbd> signifies the text expected from the user, not to be confused with <input type="text" /> which is a control for the user to make an entry.

Mark Tag

As the name suggests, <mark> is used to mark a text within another text content, in order to highlight it for relevance or importance. The marked text could be for notational and reference purposes.

Q Tag

<q> is for quotation and it provides a mechanism for declaring short quotations in text. The browser places the quotation marks for you, so you don’t need to bother with that. For long quotations that have paragraph breaks, use </q>
<blockquote>.

RP Tag

Provided parenthesis around a ruby text is its thing, so that browsers who don’t support ruby can display the text. works with the <ruby> element to provide this fall-back mechanism.

RT Tag

 is designed for ruby language annotations to specify the text component of the annotation, which is used to provide explanation, pronunciation, translation or transliteration for East Asian typography. This tag must always be placed with a <ruby> element.

Ruby Tag

<ruby> elements represent ruby language annotations which indicate the pronunciation of East Asian characters.

S Tag

<s> tag is used to markup text that is no longer accurate or correct with a strikethrough. However, document edits are better highlighted with the <del> tag.

Samp Tag

<samp> signifies a sample text being displayed in the document, which is usually output from a computer program. The content is often differentiated by rendering in the browser's default monospaced font.

Small Tag

The small tag <small> makes text one size smaller and is ideal for emphasizing things that are not part of the main text content but are still necessary to convey to an audience like side-comments, copyright, and legal text. It is styled different from the main presentation to create a meaningful contrast.

Span Tag

It is an inline container for group elements, perhaps for styling purposes or because they share common attributes. is often used to provide a small chunk of configured HTML inside a line, as a hook to a part of text or document.

Strong Tag

<strong> highlights the importance of a text visually, creating a differentiation between the text within its tag and the rest of the surrounding content. It is a phrase tag, depicting the text in bold to show that it has structural meaning.

Sub Tag

<sub> is often used in depicting chemical formulas in a text by creating subscript text which is rendered in smaller font and placed half a character below the normal line level. 

Sup Tag

<sup> is the superscript tag, essentially the opposite of <sub>, appearing half a character above the normal line but in similar small text fashion. It is used to denote footnotes and exponent powers in numeric values.

Time Tag

Implicit in its title, the <time> tag is all about time: encoding date and time in a human-readable form with its Datetime attribute, providing scheduled events such as birthday reminders, time intervals durations, precise date in the Gregorian calendar, and even time on a 24-hour clock.

Var Tag

Variables in mathematical equations or computer programs are denoted by the <var> tag, which is italicized.

Wbr Tag

This tag known by its acronym (Word Break Opportunity) provides an opportunity for the browser to potentially insert a line break at a text placed within <wbr /> tag when its window is resized.

Caption Tag

is not an all-purpose tag, but one restricted for use in tables. It should be placed immediately after the
<div>tag to create a caption for the table.

Col Tag

Embedded within the, this tag defines column properties within a table. is used to set style properties for all columns, so they don’t have to be repeated for each cell.

Colgroup Tag

Groups together a set of columns for collective formatting.

is the parent container for one or more elements, must be placed after thetag but before any table elements such as,, and.

Table Tag

Thetag provides the ability to render two-dimensional tabular data. It is comprised of one or more table elements such asand

, with,
<div>

, and

</div>
as other options.