The page provides a non-exhaustive list of HTML tags for quick reference purposes.
Why isn't it exhaustive?
I find that it's better to include less tags in order to focus only on those essential to HTML web development, and also to permit a more accurate classification of these tags into their respective categories.
Do you really need to know that <acronym> and <abbr> are used for acronyms and abbreviations?
To includes such obscure elements would unnecessarily clog up the page and detract from the essential HTML tag that every webmaster should know on the tip of his fingers.
We've seen all these tags throughout the tutorial so this chapter will naturally only provide a brief description of their usage and specifics.
You are free to bookmark this page for easy access.
HTML structure tags
Structure tags deal with the anatomy and metadata of a web page, they don't have any visible properties by default.
Rather, they provide information to the user-agent about the semantic markup of the page.
You can read more about these in the HTML structural tags chapter but here is a quick review anyway.
Document elements
Document level elements are the essential tags you need to define the minimal blueprint of your HTML page.
| Tag | Description |
|---|---|
<html> | Root element |
<head> | Header element |
<body> | Body element |
This is the minimal code you need to include for any valid HTML page.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> </head> <body> </body> </html>
Metadata elements
These tags are located in the header of your page and either provide additional information to the user-agent or indicate the source of another file that needs to be loaded with the page.
| Tag | Description |
|---|---|
<title> | Document title |
<meta> | Document metadata |
<link> | External resource |
<script> | Javascript code |
<style> | CSS code |
Structural elements
These tags go inside the body of your document and are used to build the skeleton or blueprint of your website layout.
| Tag | Description |
|---|---|
<header> | Page header |
<nav> | Navigation links |
<section> | Section element |
<article> | Article content |
<aside> | Additional information |
<footer> | Page footer |
Text organization
These HTML tags are used to organize your text in a semantically structured way.
You can read more about them in the chapter called organize your text at the beginning of this tutorial.
Paragraphs and lines
The following tags involve paragraphs, line breaks and other means of content delineation.
| Tag | Description |
|---|---|
<p> | Paragraph |
<br /> | Line break |
<hr /> | Horizontal rule |
Title elements
The tags are used to indicate a section heading, they are ranked by order of importance from highest to lowest.
| Tag | Description |
|---|---|
<h1> | Level 1 title |
<h2> | Level 2 title |
<h3> | Level 3 title |
<h4> | Level 4 title |
<h5> | Level 5 title |
<h6> | Level 6 title |
Emphasis elements
The HTML elements are used to add semantic emphasis to portions of your text.
| Tag | Description |
|---|---|
<em> | Emphasis |
<strong> | Strong importance |
<mark> | Visual highlight |
Quotation elements
Quotations can easily be managed with these HTML tags.
| Tag | Description |
|---|---|
<q> | Inline quote |
<blockquote> | Block quote |
<cite> | Title of a work |
External elements
Hyperlinks, images, audio elements, video players... anything that involves linking to or embedding an external resource into your page.
| Tag | Description |
|---|---|
<a> | Hypertext link |
<img /> | Image |
<audio> | Audio player |
<video> | Video player |
<figure> | Figure |
<figcaption> | Figure description |
More text markup
Some miscellaneous markup tags that can be added inside your paragraphs for semantically marking specific data.
| Tag | Description |
|---|---|
<del> | Deleted text |
<ins> | Inserted text |
<sup> | Superscript (exponent) |
<sub> | Subscript (index) |
<kbd> | Keyboard entry |
<pre> | Formatted display |
<progress> | Progress bar |
Generic elements
These elements have no semantic meaning, they are generally used to target a specific portion of your page via the class or id attributes when applying CSS.
| Tag | Description |
|---|---|
<span> | Inline element |
<block> | Block element |
Tables and lists
Tables and lists are two of the most common ways to organize data in order to improve readability and accessibility.
Since these elements are constructed with several distinct component, we will need to use several (usually nested) HTML tags to get the desired result.
Tables can seem particularly challenging for beginners due to the quantity of new HTML elements you must know, so I recommend reading the chapter on tables if you forget how these different tags are combined.
Table elements
Tables are built by combining at least some of the following HTML tags, which you can think of as different necessary components of the table model.
| Tag | Description |
|---|---|
<table> | Table element |
<tr> | Table row |
<th> | Header cell |
<td> | Regular (data) cell |
<caption> | Table title |
<thead> | Header section |
<tbody> | Body section |
<tfoot> | Footer section |
List elements
There are many types of lists you can use in HTML, the two most common being unordered (bullet) lists and ordered lists.
| Tag | Description |
|---|---|
<ul> | Bullet list |
<ol> | Ordered list |
<li> | List item |
<dl> | Description list |
<dt> | Description term |
<dd> | Description details |
Form elements
Finally, forms are a very useful way to interact with your visitors by providing them with entry fields to fill out, boxes to check, options to select from a drop-down list and so on.
Here are the essential HTML form element.
| Tag | Description |
|---|---|
<form> | Form element |
<fieldset> | Field group |
<legend> | Field group title |
<label> | Field description |
<input /> | Entry field |
<textarea> | Multi-line field |
<select> | Drop-down menu |
<option> | Drop-down item |
<optgroup> | Drop-down item group |
As I told you at the beginning of this chapter there are several tags that I have deliberately omitted.
You will have noticed that in HTML everything is a matter of meaning - we are talking about semantics.
What matters most is to use the most appropriate element at all times.
You could in theory do almost anything you want using just the <div> and <span> generic tags alongside CSS, but your HTML code wouldn't make any sense to non-human user-agents and would thus be penalized.
One last time with the golden rule of web development: HTML for content, CSS for style.