HudaTutorials.com

HTML5 Tags Categories

Last updated on

HTML5 Tags

This HTML5 tags or elements tutorial contains a complete list of standard tags belonging to the latest HTML5 and HTML specifications. All the HTML5 tags or elements are grouped into categories.

HTML tags or elements are components of a document written in HTML. An element is defined by HTML tags. Every page consists of a set of HTML elements or tags. They represent parts of the document, such as headings and paragraphs.

One of the most common issues for beginners is understanding the difference between HTML elements and tags. The HTML elements represent the document's structure, while tags are simply a part of the HTML syntax.

Nested HTML Elements

A simple HTML element is made of an opening tag, a closing tag, and some content (text, images, etc.) between the two. In case of element nesting, an HTML element can also contain other elements which are then called nested elements. Nesting occurs in all HTML pages, it provides better functionality and a neater look.

When you nest HTML elements, make sure you close them in the right order. The element which was opened last must be the first to close.

What is an Empty Element in HTML ?

A standard element in HTML has content enclosed within opening and closing tags, but some are empty (void). Such elements are mostly used to add or embed content into documents.

The following section contains a brief overview of HTML5 Tags. The following list of all HTML5 tags or elements are grouped into categories.

Structural Tags

What are Structural Tags ?

HTML is a mark-up language with tags identifying parts of the document to behave in a certain way, for example, to act as a link or to make the text bold. Tags generally consist of an opening and closing pair. They are written in lower case using angled brackets as <html> tag.

What are Document Structure Tags ?

Web pages have two basic containers: the head and the body tags.

The <head> tag, which contains information, or metadata, about the web page, such as a title for the page, javascripts, styles (CSS), meta information, and more. Whatever is inside the <head> tag does not display on the web page itself.

The <body> tag, containing the content that actually displays in a browser.

List of all HTML5 Structural Tags

<a> : The HTML5 a ( <a> ) or anchor tag or element creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. You can learn about anchor tag from Complete Tutorial on Anchor Tag.

<article> : This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

<aside> : Defines some content loosely related to the page content . This tag represents a piece of content that is only slightly related to the rest of the page.

<body> : Defines the document's body .

<br> : Produces a single line break .

<details> : Represents a widget from which the user can obtain additional information or controls on-demand .

<div> : Specifies a division or a section in a document .

<footer> : Represents the footer of a document or a section and can contain information about the author, copyright information, et cetera.

<form> : Defines an HTML form for user input . The forms section of HTML5 was originally a specification titled Web Forms 2.0 that added new types of controls for forms.

<h1> to <h6> : Defines HTML headings .

<head> : Defines the head portion of the document that contains information about the document such as title .

<header> : Represents the header of a document or a section .

<hgroup> : Defines a group of headings .

<hr> : Produce a horizontal line .

<html> : Defines the root of an HTML document .

<nav> : Defines a section of navigation links . This tag represents a section of the document intended for navigation.

<p> : Defines a paragraph .

<section> : This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure. Defines a section of a document , such as header , footer etc.

<span> : Defines an inline styleless section in a document .

<summary> : Defines a summary for the <details> element .

Metadata Tags

What are Metadata Tags ?

Meta tags are snippets of text that describe a page's content; the meta tags don't appear on the page itself, but only in the page's source code. Meta tags are essentially little content descriptors that help tell search engines what a web page is about.

The only difference between tags you can see on this page and tags you can’t see is location: meta tags only exist in HTML, usually at the head of the page, and so are only visible to search engines. The meta stands for metadata, which is the kind of data these tags provide that is data about the data on your page.

List of all HTML5 Metadata Tags

<base> : Defines the base URL for all linked objects on a page .

<link> : Defines the relationship between the current document and an external resource .

<meta> : Provides structured metadata about the document content .

<style> : Inserts style information ( commonly CSS ) into the head of a document .

<title> : Defines a title for the document .

Form Tags

What are Form Tags ?

The HTML5 form tags are used for creating a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user data to a specified URL.

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <output>

List of all HTML5 Form Tags

<button> : Creates a clickable button .

<datalist> : Represents a set of pre-defined options for an <input> element .

<fieldset> : Specifies a set of related form fields .

<form> : Defines an HTML form for user input .

<input> : Defines an input control .

<keygen> : Represents a control for generating a public-private key pair .

<label> : Defines a label for an <input> control .

<legend> : Defines a caption for a <fieldset> element .

<meter> : Represents a scalar measurement within a known range .

<optgroup> : Defines a group of related options in a selection list .

<option> : Defines an option in a selection list .

<select> : Defines a selection list within a form .

<textarea> : Defines a multi-line text input control ( text area ) .

Formatting Tags

What are Formatting Tags ?

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text.

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

List of all HTML5 Formatting Tags

<abbr> : Defines an abbreviated form of a longer word or phrase. You can learn about abbr tag from Complete Tutorial on HTML5 abbr Tag - Abbreviation Element.

<acronym> : Defines an acronym.

<address> : Specifies the author's contact information. You can learn more about address tag from Complete Tutorial on HTML5 address Tag - Contact Address Element.

<bdi> : Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting .

<bdo> : Overrides the current text direction .

<blockquote> : Defines a long quotation .

<cite> : Indicates a citation or reference to another source .

<code> : Specifies text as computer code .

<del> : Specifies a block of deleted text .

<dfn> : Specifies a definition .

<em> : Specifies emphasized text .

<i> : Displays text in an italic style .

<ins> : Defines a block of text that has been inserted into a document .

<kbd> : Specifies text as keyboard input .

<mark> : Represents text highlighted for reference purposes .

<output> : Represents the result of a calculation .

<pre> : Defines a block of preformatted text .

<progress> : Represents the completion progress of a task .

<q> : Defines a short inline quotation .

<rp> : Provides fall-back parenthesis for browsers that don't support ruby annotations .

<rt> : Defines the pronunciation of character presented in a ruby annotations .

<ruby> : Represents a ruby annotation .

<strong> : Indicate strongly emphasized text .

<sub> : Defines subscripted text .

<sup> : Defines superscripted text .

<var> : Defines a variable .

<wbr> : Represents a line break opportunity .

List Tags

What are List Tags ?

A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

HTML5 offers three ways for specifying lists of information. All lists must contain one or more list elements.

The types of lists that can be used in HTML5 are :

  1. ul - An unordered list. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.
  2. ol - An ordered list. This will use different schemes of numbers to list your items. Each list item starts with the <li> tag.
  3. dl - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

The HTML5 Description List

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.

List of all HTML5 List Tags

<dd> : Specifies a definition for a term in a definition list .

<dl> : Defines a definition list .

<dt> : Defines a term ( an item ) in a definition list .

<li> : Defines a list item .

<menu> : Represents a list of commands .

<ol> : Defines an ordered list .

<ul> : Defines an unordered list .

Table Tags

What are Table Tags ?

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data or cell is defined with the <td> tag.

An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

List of all HTML5 Table Tags

<caption> : Defines the title of a table .

<col> : Defines attribute values for one or more columns in a table .

<colgroup> : Specifies attributes for multiple columns in a table .

<table> : Defines a data table .

<tbody> : Groups a set of rows defining the main body of the table data .

<td> : Defines a cell in a table .

<tfoot> : Groups a set of rows summarizing the columns of the table .

<th> : Defines a header cell in a table .

<thead> : Groups a set of rows that describes the column labels of a table .

<tr> : Defines a row of cells in a table .

Scripting Tags

What are Scripting Tags ?

The <script> tag is used to define a client side script for example JavaScript. The <script> element contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

How Scripting is executed in the web page ?

There are several ways an external script can be executed.

  1. If the attribute of script tag has async="async", then the script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  2. If the attribute present defer="defer" then the script is executed when the page has finished parsing.
  3. If async and defer is not present, then the script is fetched and executed immediately, before the browser continues parsing the page.

List of all HTML5 Scripting Tags

<noscript> Defines alternative content to display when the browser doesn't support scripting .

<script> Places script in the document for client-side processing .

Embedded Content Tags

What are Embedded Tags ?

The <embed> tag defines a container for an external application or interactive content (a plug-in).

HTML and XHTML are embedded languages. You insert their directions or tags into the same document that load into a browser to view.

Permitted parent is any element that accepts embedded content.

List of all HTML5 Embedded Content Tags

<area>

Defines a specific area within an image map .

<audio>

Embeds a sound , or an audio stream in an HTML document .

<canvas>

Defines a region in the document , which can be used to draw graphics on the fly via scripting ( usually JavaScript ) . A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

<embed>

Embeds external application , typically multimedia content like audio or video into an HTML document .

<figcaption>

The <figcaption> tag defines a caption or legend for a figure. The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

<figure>

Represents a figure illustrated as part of the document . This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

<iframe>

Displays a URL in an inline frame .

<img>

Displays an inline image .

<map>

Defines a client-side image-map .

<object>

Defines an embedded object .

<param>

Defines a parameter for an object or applet element .

<source>

Defines alternative media resources for the media elements like <audio> or <video> .

<time>

Represents a time and/or date .

<track>

Defines text tracks for the media elements like <audio> or <video> .

<video>

Embeds video content in an HTML document .