Tag Archives: html5 elements

HTML5 Tag Elements List

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

  •     It is a new version of the language HTML, with new elements, attributes, and behaviors,
  •     A larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

Valid HTML5 Elements List

* indicates that the element was added in HTML5.

Root element

<html> : Represents the root of an HTML or XHTML document. All other elements must be descendants of this element.

Document Metadata

<head> :    Represents a collection of metadata about the document, including links to, or definitions of, scripts and style sheets.
<title> :    Defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text and any contained tags are not interpreted.
<base> :    Defines the base URL for relative URLs in the page.
<link> :    Used to link JavaScript and external CSS with the current HTML document.
<meta> :    Defines metadata that can’t be defined using another HTML element.
<style> :     Used to write inline CSS.

Scripting

<script>     : Defines either an internal script or a link to an external script. The script language is JavaScript.
<noscript>     : Defines alternative content to display when the browser doesn’t support scripting.
<template>* : Container for client-side content instantiated during runtime using JavaScript.

Sections

<body>     : Represents the content of an HTML document. There is only one <body> element in a document.
<section>*     : Defines a section in a document.
<nav>*     : Defines a section that contains only navigation links.
<article>*     : Defines self-contained content that could exist independently of the rest of the content.
<aside>*     : Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> : Heading elements implement six levels of document headings; <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.
<header>*     : Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.
<footer>*     : Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.
<address>     : Defines a section containing contact information.
<main>*     : Defines the main or important content in the document. There is only one <main> element in the document.

Grouping content

<p> : Defines a portion that should be displayed as a paragraph.
<hr> : Represents a thematic break between paragraphs of a section or article or any longer content.
<pre> : Indicates that its content is preformatted and that this format must be preserved.
<blockquote> : Represents a content that is quoted from another source.
<ol> : Defines an ordered list of items.
<ul> : Defines an unordered list of items.
<li> : Defines a item of an enumeration list.
<dl> : Defines a definition list, that is, a list of terms and their associated definitions.
<dt> : Represents a term defined by the next <dd>.
<dd> : Represents the definition of the terms immediately listed before it.
<figure>* : Represents a figure illustrated as part of the document.
<figcaption>* : Represents the legend of a figure.
<div> : Represents a generic container with no special meaning.

Text-level semantics

<a> : Represents a hyperlink , linking to another resource.
<em> : Represents emphasized text, like a stress accent.
<strong> : Represents especially important text.
<small> : Represents a side comment , that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.
<s> : Represents content that is no longer accurate or relevant .
<cite> : Represents the title of a work .
<q> : Represents an inline quotation .
<dfn> : Represents a term whose definition is contained in its nearest ancestor content.
<abbr> : Represents an abbreviation or an acronym ; the expansion of the abbreviation can be represented in the title attribute.
<data>* : Associates to its content a machine-readable equivalent . (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
<time>* : Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.
<code> : Represents computer code .
<var> : Represents a variable, that is, an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
<samp> : Represents the output of a program or a computer.
<kbd> : Represents user input , often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.
<sub>,<sup> : Represent a subscript , or a superscript.
<i> : Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.
<b> : Represents a text which to which attention is drawn for utilitarian purposes . It doesn’t convey extra importance and doesn’t imply an alternate voice.
<u> : Represents a non-textual annoatation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.
<mark>* : Represents text highlighted for reference purposes, that is for its relevance in another context.
<ruby>* : Represents content to be marked with ruby annotations , short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana .
<rt>* : Represents the text of a ruby annotation .
<rp>* : Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
<bdi>* : Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.
<bdo> : Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
<span> : Represents text with no specific meaning. This has to be used when no other text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.
<br> : Represents a line break .
<wbr>* : Represents a line break opportunity , that is a suggested point for wrapping text in order to improve readability of text split on several lines.

Edits

<ins>  :   Defines an addition to the document.
<del>  :   Defines a removal from the document.

Embedded content

<img> : Represents an image .
<iframe> : Represents a nested browsing context , that is an embedded HTML document.
<embed>* : Represents a integration point for an external, often non-HTML, application or interactive content.
<object> : Represents an external resource , which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.
<param> : Defines parameters for use by plug-ins invoked by <object> elements.
<video>* : Represents a video , and its associated audio files and captions, with the necessary interface to play it.
<audio>* : Represents a sound , or an audio stream .
<source>* : Allows authors to specify alternative media resources for media elements like <video> or <audio>.
<track>* : Allows authors to specify timed text track for media elements like <video> or <audio>.
<canvas>* : Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, or any visual images on the fly.
<map> : In conjunction with <area>, defines an image map .
<area> : In conjunction with <map>, defines an image map .
<svg>* : Defines an embedded vectorial image .
<math>* : Defines a mathematical formula .

Tabular data

<table> : Represents data with more than one dimension .
<caption> : Represents the title of a table .
<colgroup> : Represents a set of one or more columns of a table.
<col> : Represents a column of a table.
<tbody> : Represents the block of rows that describes the concrete data of a table.
<thead> : Represents the block of rows that describes the column labels of a table.
<tfoot> : Represents the block of rows that describes the column summaries of a table.
<tr> : Represents a row of cells in a table.
<td> : Represents a data cell in a table.
<th> : Represents a header cell in a table.

Forms

<form> : Represents a form , consisting of controls, that can be submitted to a server for processing.
<fieldset> : Represents a set of controls .
<legend> : Represents the caption for a <fieldset>.
<label> : Represents the caption of a form control.
<input> : Represents a typed data field allowing the user to edit the data.
<button> : Represents a button .
<select> : Represents a control allowing selection among a set of options .
<datalist>* : Represents a set of predefined options for other controls.
<optgroup> : Represents a set of options , logically grouped.
<option> : Represents an option in a <select> element, or a suggestion of a <datalist> element.
<textarea> : Represents a multiline text edit control .
<keygen>* : Represents a key-pair generator control .
<output>* : Represents the result of a calculation .
<progress>* : Represents the completion progress of a task.
<meter>* : Represents a scalar measurement (or a fractional value), within a known range.

Interactive elements

<details>* : Represents a widget from which the user can obtain additional information or controls.
<summary>* : Represents a summary , caption , or legend for a given <details>.
<menuitem>* : Represents a command that the user can invoke.
<menu>* : Represents a list of commands .

* indicates that the element was added in HTML5.

Useful HTML5 related Links: