An HTML tags table with brief explanation. Markdown practice. 😄
| Tag | Description |
|---|---|
<!DOCTYPE> |
Basically tells the browser what kind of document we're loading. |
<html> |
The root level tag of an HTML document. All other HTML tags go inside the HTML tag. |
<head> |
The head section. Used mostly for metadata/information for the document. |
<title> |
The title of an HTML document. |
<body> |
Establishes the body of an HTML document. |
<h1> to <h6> |
Defines HTML headings and its levels. |
<p> |
Defines a paragraph. |
<br> |
Inserts a single line break. |
<hr> |
This can be used for separating text within a paragraph. Typically renders as a horizontal line running across the page. |
<!--...--> |
For commenting out sections of HTML or placing comments within HTML. Anything between wont be rendered as text when the page loads in a web browser. |
| Tag | Description |
|---|---|
<abbr> |
Defines an abbreviation or an acronym. Use it with the title attribute to define abbreviations. <abbr title="Cascading Style Sheets">CSS</abbr>. Hovering the mouse over it brings up a little tool tip generated by the abbreviation tag. |
<address> |
Defines contact information for the author/owner of a document/article. Alternatively, this could be general contact information for the website. |
<b> |
For bolding or otherwise styling text without conveying any additional meaning such as with <em> and <strong> and etc. |
<bdi> |
Short for bidirectional isolation. Useful for working with languages that use right to left text.Short for bidirectional isolation. Useful for working with languages that use right to left text. |
<bdo> |
Short for Bidirectional Override. Use this to override the current direction of text. Useful for languages that use right to left text. |
<blockquote> |
For quoting from an external source. Typically rendered as indented text. |
<cite> |
For citing. |
<code> |
For code examples. A little bit like <samp> and <kbd>, but specifically for code. |
<del> |
Mark text as deleted without actually deleting it. This will typically be rendered as a strikethrough. |
<dfn> |
Stands for the "definition element", and it specifies a term that is going to be defined within the content. |
<em> |
Defines emphasized text. For something stronger, use <strong>. |
<i> |
Defines a part of text in an alternate voice or mood. Often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc. The content inside is typically displayed in italic. |
<ins> |
Useful for denoting text that has been added to an HTML file since the original version. Updates to a blog post for example. Rendered as underlined text. |
<kbd> |
Used to define keyboard input. The content inside is displayed in the browser's default monospace font. |
<mark> |
Defines marked/highlighted text. |
<meter> |
Defines a scalar measurement within a known range, or a fractional value. Also known as a gauge. E.g.: Disk usage. Should not be used to indicate progress (as in a progress bar). For progress bars, use <progress>. |
<pre> |
For preformatted text. This can be useful for demonstrating code, especially if there are multiple lines. |
<progress> |
Represents the progress of a task/action. |
<q> |
Defines a short quotation from some source. |
<rp> |
It can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations. |
<rt> |
Defines an explanation/pronunciation of characters (for East Asian typography). |
<ruby> |
Specifies a ruby annotation. A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. Often used in Japanese publications. Use it together with <rt> and <rp>. |
<s> |
For marking up text that is not longer relevant, applicable, or accurate. |
<samp> |
Used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font. |
<small> |
Defines smaller text (like copyright and other side-comments) |
<strong> |
Defines important text |
<sub> |
For displaying subscript. Useful for math. |
<sup> |
For displaying superscript. Useful for math. |
<template> |
Used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript. You can use it if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without <template>, you have to create the HTML code with JavaScript to prevent the browser from rendering the code. |
<time> |
Defines a specific time (or datetime). The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results. |
<u> |
Defines some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text. The content inside is typically displayed with an underline. |
<var> |
Defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic. |
<wbr> |
(Word Break Opportunity) Specifies where in a text it would be ok to add a line-break. Tip: When a word is too long, the browser might break it at the wrong place. You can use it to add word break opportunities. |
| Tag | Description |
|---|---|
<form> |
Defines an HTML form for user input. |
<input> |
Defines an input control. |
<textarea> |
For multi-line text entry. |
<button> |
Defines a clickable button. |
<select> |
Defines a drop-down list. |
<optgroup> |
Defines a group of related options in a drop-down list. |
<option> |
Defines an option in a drop-down list. |
<label> |
For assigning labels to interface elements such as forms. |
<fieldset> |
Groups related elements in a form. Draws a box around the related elements. |
<legend> |
Defines a caption for a <fieldset> element. |
<datalist> |
Specifies a list of pre-defined options for input controls. |
<output> |
Displays the output of an action, such as from a script or form. |
| Tag | Description |
|---|---|
<iframe> |
Makes it possible to embed another page within a page. In HTML5 this is known as nested browsing. 1 |
| Tag | Description |
|---|---|
<img> |
Defines an image. |
<map> |
Defines a client-side image map. |
<area> |
Defines an area inside an image map. Always used inside of <map> |
<canvas> |
Used for rendering graphics on the fly, typically in conjunction with a scripting language. |
<figcaption> |
Defines a caption for a <figure>. |
<figure> |
Define self contained content such as photos or diagrams. |
<picture> |
Defines a container for multiple image resources. |
<svg> |
Defines a container for SVG graphics. |
| Tag | Description |
|---|---|
<audio> |
Used to place an audio stream within an HTML document. |
<source> |
Defines multiple media resources for media elements (<video>, <audio> and <picture>). |
<track> |
Defines text tracks for media elements. |
<video> |
For embedding video within an HTML page. |
| Tag | Description |
|---|---|
<a> |
Defines a hyperlink (anchor). |
<link> |
Used for linking to external resources. Typically seen in <head> referring to an external style sheet. |
<nav> |
Used for specifying a navigational region within a document. |
| Tag | Description |
|---|---|
<ul> |
Defines an unordered list. |
<ol> |
Defines an ordered list. |
<li> |
Defines a list item. |
<dl> |
Defines a description list. |
<dt> |
Defines a term in a description list. |
<dd> |
Defines a description of a term/name in a description list. |
| Tag | Description |
|---|---|
<table> |
Defines a table. |
<caption> |
Used for table caption. Placed just after <table>. |
<th> |
Header cell in a table. |
<tr> |
Row in a table. |
<td> |
Table data; Data cell within a table. |
<thead> |
Groups the header content(row) in a table. |
<tbody> |
Groups the body content(rows) in a table. |
<tfoot> |
Groups the footer content in a table. |
<col> |
Specifies column properties for each column within a <colgroup> element. Useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. |
<colgroup> |
Specifies a group of one or more columns in a table for formatting. Useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. 2 |
| Tag | Description |
|---|---|
<style> |
For declaring style sheets within a document. |
<div> |
A divider or a kind of generic container. |
<span> |
Used as a container. Useful for applying styles to or around text, especially inline. |
<header> |
A container for introductory content or a set of navigational links that goes above the body. |
<footer> |
Defines the footer of a document, below the main content. |
<main> |
Specifies the main content of a document. |
<section> |
Defines a section in a document. |
<article> |
Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. This tag can be used to contain blog entries, forum posts, news story etc. |
<aside> |
Defines content aside from the page content. The <aside> content is often placed as a sidebar in a document. |
<details> |
Defines additional details that the user can view or hide. |
<dialog> |
Defines a dialog box or window. |
<summary> |
Defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. It should be the first child element of <details> |
<data> |
Used to add a machine-readable translation of a given content. This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser. |
| Tag | Description |
|---|---|
<head> |
The head section. Used mostly for metadata/information for the document. |
<meta> |
Defines metadata about an HTML document. It always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. |
<base> |
Specifies the base URL and/or target for all relative URLs in a document. It must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element. |
| Tag | Description |
|---|---|
<script> |
Defines a client-side script. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. |
<noscript> |
Defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script. |
<embed> |
Defines a container for an external(non-HTML) application. |
<object> |
For embedding objects within a document. |
<param> |
Used to define parameters for an <object> element. |
Footnotes
-
Tip 1: Use CSS to style it. Tip 2: It is a good practice to always include a title attribute for this. This is used by screen readers to read out what the content of the
<iframe>is. ↩ -
Note 1:
<colgroup>must be a child of a<table>, after any<caption>elements and before any<thead>,<tbody>,<tfoot>, and<tr>elements. Tip 1: To define different properties to a column within a<colgroup>, use the<col>tag within the<colgroup>tag. ↩