HTML5 Tag Cheat Sheet

HTML is the vital programming language of the Internet. But if you’re new to HTML, there’s quite a lot of stuff to remember — hundreds of tags all with their own attributes and a near-unlimited level of customization.

If you’re creating your first website — or if you just want to brush up on your coding — then this cheat sheet is for you! We’ve compiled all of the valid HTML5 tags, their functions, and whether they have SEO value so you can create and grow the website that you want.

To find the tags you need, just scroll through our list of tags. And if you don’t feel like working out your scrolling finger on your mouse, you can just type a query in the search bar!

<!-->

Inserts comments into source code; not displayed in browsers.

<!DOCTYPE>

Must be the first tag in any page; identifies following code and version of follow code.

<a>

Defines a hyperlink.
SEO

<abbr>

Defines an abbreviation.

<address>

Defines contact information for content owner or author.

<area>

Defines an area inside <map>; must nest with <map>.

<article>

Defines a self-contained piece of content.
New

<aside>

Places content aside from primary content.
New

<audio>

Embeds an audio file.
New SEO

<b>

Bolds text.

<base>

Defines base URL for other URLs in document; must be within <head>

<bdi>

Isolates text that is formatted differently from text around it.

<bdo>

Allows you to change direction of text.

<blockquote>

Groups a quote into a separate block of text.

<body>

Defines the body area of a page.
SEO

<br>

Adds a line break.

<button>

Creates a clickable button.

<canvas>

Draws graphics using instructions in code.
New

<caption>

Adds a title to a table.

<cite>

References a work you cite in text.
SEO

<code>

Displays computer code as text in default monotype font.

<col>

Establishes properties for columns within <colgroup>.

<colgroup>

Defines a group of columns within a table.

<content>

Displays text and images within a shadow DOM insertion point.
SEO

<data>

Links a piece of content with machine-friendly translation.

<datalist>

Identifies pre-defined options for items with <input> tags.
New

<dd>

Indicates a definition in a <dl> element.

<decorator>

Overrides the defaults of other tags like <template> or <content> with extra markup.

<del>

Represents text that has been deleted.

<details>

Creates an interactive widget that users can click to see more information.
New

<dfn>

Represents a defining instance of a term within text (HTML as HypterText Markup Language).

<dialog>

Begins dialogue box or other interactive component.
New

<div>

Generic content container.

<dl>

Creates a list of terms and definitions.

<dt>

Identifies a term in a <dl> element.

<element>

Identifies new custom DOM elements.

<em>

Italicizes text.

<embed>

Adds an external application, interactive content, etc.

<figcaption>

Adds a caption to a <figure> element.

<figure>

Identifies self-contained content; independent of document flow.
New
Contains informative or navigational elements at the bottom of a page.
New

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

Various headings that rank in importance with h1 as the strongest and h6 as the weakest.
SEO
Contains titles, metadata, and other information relevant to a page.
SEO
Contains informative or navigational elements at the top of a page.
New

<hgroup>

Defines the heading of a section.
New

<hr>

Adds a thematic break between text such as a horizontal rule.

<html>

Defines document as using HTML coding; must be present before HTML is implemented.
SEO

<i>

Italicizes text.

<iframe>

Embeds document within current page.

<img>

Embeds an image.
SEO

<input>

Creates a field where users can enter data; function can vary wildly depending on attributes.

<ins>

Adds text or external elements.

<kbd>

Defines keyboard input using <em>, <strong>, <code>, <samp>, <kbd>, and <var>.

<keygen>

Acts as a key for authentication and certification materials.
New

<label>

Defines a caption for user interface.

<legend>

Defines a caption within the <fieldset> tag.

<li>

Adds an individual element within a <ol> or <ul>.
Connects a document to an external resource such as a spreadsheet.
SEO

<listing>

Renders text in list form without interpreting HTML.

<main>

Defines primary area of a page, typically body.
SEO

<map>

Defines clickable areas on an image.

<mark>

Highlights text.
New
Identifies commands that users can choose within list or context menus.
Indicates a command that users can choose within a popup menu.

<meta>

Defines metadata of page.
SEO

<meter>

Displays the current number of a measurement such as progress percentage or used bytes of memory.
New
Creates a section of a page for navigation links.
New SEO

<noscript>

Displays alternate content for browsers that don't support <script> contents.

<object>

Displays an external source, commonly multimedia.
SEO

<ol>

Adds an ordered list.
SEO

<optgroup>

Creates a group of options within a menu.

<option>

Displays individual items such as within a list.

<output>

Displays the result of a user interaction or calculation.
New

<p>

Adds a paragraph.
SEO

<param>

Defines parameters for elements in <object>, <audio>, and <video>.

<plaintext>

Renders the entire page raw as plain text; no closing tag needed.

<pre>

Defines preformatted text that appears different from other text.

<progress>

Displays the progress of a task, as with a progress bar.

<q>

Renders text within quotes.

<rp>

Defines what to show if a browser does not support <ruby>.
New

<rt>

Adds pronunciation to data in <ruby>.

<rtc>

Adds semantic annotations to data in <ruby>.

<ruby>

Displays pronunciation of East Asian characters.

<s>

Renders text with a line striking through the middle of it.

<samp>

Displays sample output of a computer program.

<script>

Adds an executable script.
SEO

<section>

Generic content container.
New

<select>

Creates a drop-down list on a page.

<shadow>

Organizes multiple DOM shadow trees.

<small>

Makes text one font size smaller up to the limit a browser allows.

<source>

Identifies resources for media elements; identifies alternate files based on users' browsers.
New

<spacer>

Adds white space to pages.

<span>

Groups different tags together when more specific tags don't suit a situation.

<strong>

Adds importance to text; typically shown in bold.
SEO

<style>

Defines how information such as text should render as a page loads.

<sub>

Shows text as a subscript (lower and smaller than regular text).

<summary>

Captions information within <details>.

<sup>

Shows text as a superscript (higher and smaller than regular text).

<table>

Creates a data table.

<tbody>

Establishes the body of a data table.

<td>

Creates a cell for data in a table.

<template>

Identifies content that is rendered after a page initially loads.

<textarea>

Displays text in a fixed-width font.

<tfoot>

Creates a set of rows at the bottom of a table.

<th>

Creates a cell that is the heading for a group of cells in a table.

<thead>

Creates a set of rows as the header for a table.

<time>

Shows time on a clock or calendar.

<title>

Adds title tags to page.
SEO

<tr>

Creates a row of table cells.

<track>

Adds text to multimedia elements that are visible as multimedia plays.

<u>

Underlines text.

<ul>

Adds an unordered list.

<var>

Defines a variable in mathematical equations.

<video>

Embeds a video.
New SEO

<wbr>

Identifies where browsers can add line breaks, if needed.

<xmp>

Renders text in a single-spaced font without rendering HTML.
© 2024 - WebFX