An A-Z Index of HTML 5 Tags

For many of the tags listed below it is possible to add attributes, which provide additional information about the content of the element. They appear on the opening tag and consist of a name and a value separatedby an equals sign. <tag attribute_name="attribute_value">demo text</tag>

 <a>       Create a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
           e.g. <a href="demo.html">Link to Demo page</a>

 <abbr>    An abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.
           e.g. <abbr title="This is a full description typically shown on hover only">Text thats shown on page</abbr>

 <address>  Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

 <area>    Defines a hot-spot region on an image, and optionally associates it with a hypertext link.
           This element is used only within a <map> element.

 <article> A self-contained composition in a document, page, application, or site, which is intended to be independently
           distributable or reusable (e.g., in syndication).
           Examples include: a forum post, a magazine or newspaper article, or a blog entry.

 <aside>   Represents a portion of a document whose content is only indirectly related to the document's main content.

 <audio>   Embed sound content in documents. It may contain one or more audio sources, represented using the src attribute
           or the <source> element: the browser will choose the most suitable one.
           It can also be the destination for streamed media, using a MediaStream.

 <b>       Draw the reader's attention to the element's contents, which are not otherwise granted special importance.

 <base>    The base URL to use for all relative URLs contained within a document.
           There can be only one <base> element in a document.

 <bdi>     The HTML Bidirectional Isolate element (<bdi>)  tells the browser's bidirectional algorithm to treat the text it
           contains in isolation from its surrounding text.

 <bdo>     The HTML Bidirectional Text Override element (<bdo>) overrides the current directionality of text, so that the
           text within is rendered in a different direction.

 <blockquote>   Indicates that the enclosed text is an extended quotation.
                Usually, this is rendered visually by indentation (see Notes for how to change it).
                A URL for the source of the quotation may be given using the cite attribute, while a text representation of the
                source can be given using the <cite> element.

 <body>    Represents the content of an HTML document. There can be only one <body> element in a document.

 <br>      Produces a line break in text (carriage-return).
           It is useful for writing a poem or an address, where the division of lines is significant.

 <button>  Represents a clickable button, which can be used in forms or anywhere in a document that needs a standard button.

 <canvas>  Draw graphics and animations with either the canvas scripting API or the WebGL API.

 <caption> Specifies the caption (or title) of a table, and if used is always the first child of a <table>.

 <cite>    Used to describe a reference to a cited creative work, and must include the title of that work.

 <code>    Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.

 <col>     Defines a column within a table and is used for defining common semantics on all common cells.
           It is generally found within a <colgroup> element.

 <colgroup>   Defines a group of columns within a table.

 <data>    Links a given content with a machine-readable translation.
           If the content is time- or date-related, the <time> element must be used.

 <datalist>   Contains a set of <option> elements that represent the values available for other controls.

 <dd>      Provides the details about or the definition of the preceding term (<dt>) in a description list (<dl>).

 <del>     Represents a range of text that has been deleted from a document.

 <details> Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

 <dfn>     Used to indicate the term being defined within the context of a definition phrase or sentence.

 <dialog>  Represents a dialog box or other interactive component, such as an inspector or window.

 <div>     Generic container for flow content. It has no effect on the content or layout until styled using CSS.

 <dl>      A description list.
           The element encloses a list of groups of terms (specified with <dt>) and descriptions (provided by <dd>).
           Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

 <dt>      A term in a description or definition list, and as such must be used inside a <dl> element.

 <em>      Mark text that has stress emphasis.
           The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

 <embed>   Embed external content at the specified point in the document.
           This content is provided by an external application or other source of interactive content such as a browser plug-in.

 <fieldset>   Group several controls as well as labels (<label>) within a web form.

 <figcaption> The HTML <figcaption> or Figure Caption element represents a caption or legend describing the rest of the contents
              of its parent <figure> element.

 <figure>  Represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element.

 <footer>  The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element.
           A footer typically contains information about the author of the section, copyright data or links to related documents.

 <form>    A document section that contains interactive controls for submitting information to a web server.

 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>   The six levels of section headings.
           <h1> is the highest section level and <h6> is the lowest.

 <head>    Machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

 <header>  Introductory content, typically a group of introductory or navigational aids.
           It may contain some heading elements but also a logo, a search form, an author name, and other elements.

 <hgroup>  The HTML <hgroup> element represents a multi-level heading for a section of a document.
           It groups a set of <h1>–<h6> elements.

 <hr>      A thematic break between paragraph-level elements: for example, a shift of topic within a section.

 <html>    The root (top-level element) of an HTML document, so it is also referred to as the root element.
           All other elements must be descendants of this element.

 <i>       A range of text that is set off from the normal text for some reason.
           Some examples include technical terms, foreign language phrases, or fictional character thoughts.
           It is typically displayed in italic type.

 <iframe>  A nested browsing context, embedding another HTML page into the current one.

 <img>     Embed an image into the document. It is a replaced element.

 <input>   Create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data
           and control widgets are available, depending on the device and user agent.

 <ins>     A range of text that has been added to a document.

 <kbd>     A span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

 <label>   A caption for an item in a user interface.

 <legend>  A caption for the content of its parent <fieldset>.

 <li>      An item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
           In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed
           with an ascending counter on the left, such as a number or letter.

 <link>    Specifies relationships between the current document and an external resource. This element is most commonly used to link
           to stylesheets, but is also used to establish site icons ("favicon" / mobile) among other things.

 <main>    The dominant content of the <body> of a document. The main content area consists of content that is directly related to
           or expands upon the central topic of a document, or the central functionality of an application.

 <map>     Used with <area> elements to define an image map (a clickable link area).

 <mark>    Represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance
           or importance in the enclosing context.

 <menu>    A group of commands that a user can perform or activate. This includes both list menus, which might appear across the top
           of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.

 <menuitem>  A command that a user is able to invoke through a popup menu.
             This includes context menus, as well as menus that might be attached to a menu button.

 <meta>    Metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

 <meter>   Either a scalar value within a known range or a fractional value.

 <nav>     A section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
           Common examples of navigation sections are menus, tables of contents, and indexes.

 <noscript>  A section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently
             turned off in the browser.

 <object>  An external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

 <ol>      An ordered list of items, typically rendered as a numbered list.

 <optgroup>  Creates a grouping of options within a <select> element.

 <option>  Define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu
           items in popups and other lists of items in an HTML document.

 <output>  A container element into which a site or app can inject the results of a calculation or the outcome of a user action.

 <p>       A paragraph.
           e.g. <p lang="en-GB">demo paragraph</p>

 <param>   Parameters for an <object> element.

 <picture> Zero or more <source> elements and one <img> element to provide versions of an image for different display/device scenarios.

 <pre>     Preformatted text which is to be presented exactly as written in the HTML file.

 <progress>  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

 <q>       Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the
           text in quotation marks.

 <rb>      Used to delimit the base text component of a  <ruby> annotation, i.e. the text that is being annotated.

 <rp>      Used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element.

 <rt>      Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or
           transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element.

 <rtc>     Embraces semantic annotations of characters presented in a ruby of <rb> elements used inside of <ruby> element.
           <rb> elements can have both pronunciation (<rt>) and semantic (<rtc>) annotations.

 <ruby>    Represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.

 <s>       Render text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant
           or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and
           <ins> elements, as appropriate.

 <samp>    Enclose inline text which represents sample (or quoted) output from a computer program.

 <script>  Embed or reference executable code; this is typically used to embed or refer to JavaScript code.

 <section> A standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.

 <select>  A control that provides a menu of options

 <slot>    A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees
           and present them together.

 <small>   Make the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the
           browser's minimum font size.
           In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text,
           independent of its styled presentation.

 <source>  Specifies multiple media resources for the <picture>, the <audio> element, or the <video> element.

 <span>    A generic inline container for phrasing content, which does not inherently represent anything.
           It can be used to group elements for styling purposes (using the class or id attributes),
           or because they share attribute values, such as lang.

 <strong>  Indicates that its contents have strong importance, or urgency. Browsers typically render this in bold type.

 <style>   Style information for a document, or part of a document.

 <sub>     Inline text which should be displayed as subscript for solely typographical reasons.

 <summary> A summary, caption, or legend for a <details> element's disclosure box.

 <sup>     Specifies inline text which is to be displayed as superscript for solely typographical reasons.

 <table>   Tabular data, information presented in a two-dimensional table comprised of rows and columns of cells.

 <tbody>   A set of table row (<tr> elements), indicating that they comprise the body of the table (<table>).

 <td>      The HTML <td> element defines a cell of a table that contains data. It participates in the table model.

 <template>  A mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be
             instantiated during runtime using JavaScript.

 <textarea>  A multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text,
             for example a comment on a review or feedback form.

 <tfoot>   A set of rows summarizing the columns of the table.

 <th>      Defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.

 <thead>   Defines a set of rows defining the head of the columns of the table.

 <time>    A specific period in time.

 <title>   The document's title that is shown in a browser's title bar or a page's tab.

 <tr>      A row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
           The HTML <tr> element specifies that the marµkup contained inside the <tr> block comprises one row of a table, inside which
           the <th> and <td> elements create header and data cells, respectively, within the row.

 <track>   A child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for
           example to automatically handle subtitles.
           The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).

 <tt>      The obsolete HTML Teletype Text element (<tt>) creates inline text which is presented using the user agent's default monospace font face.

 <u>       A span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

 <ul>      An unordered list of items, typically rendered as a bulleted list.

 <var>     The name of a variable in a mathematical expression or a programming context.

 <video>   Embed a media player which supports video playback into the document.

 <wbr>     A word break opportunity where the browser may  break a line, if its line-breaking rules would not otherwise create a break.


How-to: HTML Page structure

Copyright © 2013-2022
Some rights reserved