FactorPad
Faster Learning Tutorials

All HTML Tags List

Here is a plan to learn HTML. Use a comprehensive list of HTML tags and explore the most essential tags.
  1. Outline - Review the list of HTML tags.
  2. Take on a project - Start making web pages. All you need is a text editor and a browser.
  3. Reference - Return here for examples and syntax for the most important tags.
  4. Attributes - Learn the parameters that make a page look and act a certain way.
  5. Advance your skills - See how CSS for styling and JavaScript programming for interactivity are related.
Paul Alan Davis, December 26, 2017
Updated: December 22, 2018
Here we focus on the main elements, and our coverage will expand over time.

Outline Back Next

~/ home  / tech  / html5  / reference  / all html tags list


Outline and Guide to our HTML5 Reference with Examples

Beginner

We list 108 HTML tags, or elements, from HTML version 5, broken into categories and shown by frequency of use so you can focus on the most important elements.

HTML tag list sources

The developers of the most popular browsers Chrome, Safari, Firefox and Edge build features into their browsers on their own schedule based on recommendations from two organizations. Below are links to the related documentation (links open in a new window).

  • whatwg.org - The Web Hypertext Application Technology Working Group (WHATWG) issues a resource called the Living Standard.
  • w3.org - The World Wide Web Consortium issues a resource called the HTML5 Recommendation.

This All HTML Tags List was interpreted and compiled from these sources.

Categories

HTML elements fall within 7 broad categories.

  1. Document - settings for the document structure, including meta tags, elements pointing to related and optional CSS stylesheets and JavaScript files. Also includes comments and page declarations.
  2. Sections - ways to break a document into sections with horizontal lines, section headings, line breaks and paragraphs.
  3. Text - presentation of text, including hyperlinks, emphasis, strikethroughs, superscripts, citations and code blocks.
  4. Images - ways to place pictures and graphical images like icons.
  5. Lists - rules for establishing bulleted or numbered lists.
  6. Tables - settings for showing data in tables.
  7. Media - code to present audio and video within a web page.
  8. Forms - how to set up forms to collect requests from users.
Learning Priority

The column marked Priority refers to the frequency of usage within HTML documents and is a general guide for the order to learn HTML tags. The Low frequency tags in the table below are either not frequently used or do not have wide and consistent browser support.

  • High - refers to the handful of items that exist in nearly all well-formatted HTML documents.
  • Mid - refers to the set of about 30 tags that every beginner should know.
  • Low - refers to tags for specialized uses that people generally don't commit to memory and look up when needed.

HTML Tag Reference Outline

We currently offer detailed reference pages for the essential and most frequently-used HTML tags. With these you can create basic HTML web pages.

All HTML tags

For HTML tag syntax, attributes and code examples click the HTML5 link below.

Tag Category Priority Purpose
<!DOCTYPE>
Document High Describe the document type to browsers
<!-- -->
Document High Insert a partial line, whole line or multi-line comment
<a>
Text High Anchor a hyperlink
<abbr>
 
Text Low Insert an abbreviation
<address>
 
Text Mid Identify an address block
<area>
 
Images Low Map an area of an image
<article>
 
Text Low Identify an article or independent content
<aside>
 
Text Low Add a sidebar
<audio>
 
Media Low Set audio autoplay features
<b>
 
Text Low Set bold text
<bb>
 
Document Low Settings for the browser button
<base>
 
Document Low Set a base for relative URLs
<bdo>
 
Text Low Set bi-directional override for text direction
<blockquote>
 
Text Mid For a long block quotation
<body>
Document High Identify the main body of content and the part displayed in the main browser window
<br /> Sections High A line break
<button>
 
Forms Mid Insert a clickable button
<canvas>
 
Images Low A canvas to draw JavaScript graphics
<caption>
 
Tables Mid Include a caption with a table
<cite>
 
Text Low To cite a title of work
<code>
 
Text Mid A phrase tag for computer code
<col>
 
Tables Mid Specify column properties in a table.
<command>
 
Forms Low Specify a command
<colgroup>
 
Tables Mid Format columns in a group of a table
<datalist>
 
Tables Low Set options for a data list
<dd>
 
Lists Mid Define a Description in a list
<del>
 
Text Low Refer to strikethrough deleted content
<details>
 
Text Low Insert section so details can be expanded
<dfn>
 
Text Low A term definition
<dialog>
 
Forms Low Set up a dialog box
<div>
Sections High Set up a division or section in a document
<dl>
 
Lists Mid For a description list
<dt>
 
Lists Mid For a description term
<em>
 
Text High To add emphasis to text
<embed>
 
Media Mid To embed media into a document
<fieldset>
 
Forms Low Establish a fieldset for a form
<figure>
 
Images Low Set up a figure for an image
<footer>
 
Document Mid Create a footer on the page
<form>
 
Forms Mid Set up an input form
<h1>
Sections High The largest of six section headings
<h2>
Sections High The second largest of six section headings
<h3>
Sections High The third largest of six section headings
<h4>
Sections High The fourth largest of six section headings
<h5>
Sections High The fifth largest of six section headings
<h6>
Sections High The sixth largest of six section headings
<head>
Document High Include a head section of the document for metadata, file links, images, CSS, JavaScript and links to third party data
<header>
 
Text Low Provide introductory header information
<hr />
Sections High A horizontal rule or line showing a break
<html>
Document High The html tag is the root element of the document and within it sit all other tags
<i>
 
Text Mid Set text to italic
<iframe>
 
Media Mid To embed an inline frame
<img />
 
Images High Place an image in the document
<input>
 
Forms Mid Create an input form
<ins>
 
Text Low Indicates inserted or updated text
<kbd>
 
Text Low Show text as if it were entered in a keyboard
<keygen>
 
Forms Low A key generator for a form
<label>
 
Forms Low Give a form a label
<legend>
 
Forms Low Set a legend for a form
<li>
 
Lists High Create a list item like a bullet point
<link />
Document High For a link to an external document like stylesheet
<main>
 
Document Low Semantically identifies a main section of the document
<map>
 
Document Low For a clickable image map
<mark>
 
Text Low To mark text like a highlighter
<menu>
 
Document Low Establish a clickable menu
<meta />
Document High For non-visible metadata about the document including SEO data, character encodings and third-party data
<meter>
 
Images Low Show a progress meter graphic
<nav>
 
Document Low Define navigational links
<noscript>
 
Document Mid Text to display when browser selects no scripting
<object>
 
Media Low Embed an object like media
<ol>
 
Lists High Set an ordered list
<optgroup>
 
Forms Low Set up an option group in a form
<option>
 
Forms Mid For an option in a form
<output>
 
Forms Mid For a calculated output area for a form
<p>
Sections High Create a paragraph section
<param>
 
Media Low For parameters for embedded plugins
<picture>
 
Images Low Add flexibility with pictures and images
<pre>
 
Text Mid For preformatted text
<progress>
 
Images Low Show a progress meter
<q>
 
Text Mid Include a quote in text
<rp>
 
Text Low Add a ruby parentheses for text
<rt>
 
Text Low Add a ruby tag for text
<ruby>
 
Text Low Provide pronunciation for ruby text
<s>
 
Text Mid For strikethrough text
<samp>
 
Text Low Show sample output
<script>
 
Document High To include a script like JavaScript
<section>
 
Sections Low Set a section of the document
<select>
 
Forms Mid Establish a select list in a form
<small>
 
Text Mid Print using a smaller font
<source>
 
Media Low Settings for media sources
<span>
 
Text Mid Set a span of text with different formatting
<strong>
 
Text High Make text stronger or more important
<style>
 
Document Mid Set a style for an HTML document
<sub>
 
Text Low Print text in subscript
<summary>
 
Text Low Show a summary within a details tag
<sup>
 
Text Low Print text in superscript
<table>
 
Tables Mid Present data in a table
<tbody>
 
Tables Low Add a table body
<td>
 
Tables Mid Establish table data
<textarea>
 
Forms Low A multi-line text area for a form
<tfoot>
 
Tables Low For a table footer section
<th>
 
Tables Mid For a table heading
<thead>
 
Tables Low For a table header section
<time>
 
Media Low For time in a machine-readable form
<title>
Document High The title of a document
<tr>
 
Tables Mid Establish a table row
<ul>
 
Lists High For an unordered list
<var>
 
Text Low Give text a variable name
<video>
 
Media Low Insert media as a video

Other Related Content


Questions and Answers

Q:  How often do we post new HTML content?
A:  As with everything here new content depends on demand and whether we are working on projects for clients. If you want something pushed to the front of the queue let us know. Engage with us on YouTube or elsewhere on social media. Let us know what you want more of.


What's Next?

Consider subscribing to our YouTube Channel here, for more free opportunities to learn.

  • This is the Outline, so the Outline button is disabled.
  • To learn more about the HTML Reference, click Back.
  • To dive in and learn about the <!DOCTYPE> declaration, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / all html tags list



 
 
Keywords:
all html tags list
all html tags reference
all html tags
html elements list
html5 elements
all html
html attributes
html code
html codes list
html tags examples
tag html
basic html tags list