HTML Quick Reference
HTML5 has almost one hundred different elements, each of which is represented by a tag. You are not required to be familiar with all of them in order to create functional web pages, however. The average web page will usually only utilise a relatively small number of tags, most of which you will have already come across in these pages. The W3C's HTML5 Reference organises the HTML5 elements into a number of different types, as shown in the table below.
| W3C Categorisation | Elements |
|---|---|
| Root Element | html |
| Document Metadata | base, head, link, meta, style, title |
| Scripting | noscript, script |
| Sections | address, article, aside, body, footer, h1, h2, h3, h4, h5, h6, header, main, nav, section |
| Grouping Content | blockquote, br, dd, dialog, dl, dt, hr, li, ol, p, pre, ul |
| Text-Level Semantics | a, abbr, b, bdi, bdo, cite, code, dfn, em, i, kbd, mark, meter, progress, q, rp, rt, ruby, samp, small, span, strong, sub, sup, time, var |
| Edits | del, ins |
| Embedded Content | area, audio, canvas, embed, figure, iframe, img, map, object, param, source, video |
| Tabular Data | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr |
| Forms | button, datalist, fieldset, form, input, label, optgroup, option, output, select, textarea |
| Interactive Elements | details, menu |
| Miscellaneous Elements | div, legend |
You may find yourself wondering why there are so many new elements in HTML5. It is partly to do with something called the "Semantic Web". The idea is that the data in web pages should be structured in such a way (using tags) that they are machine-readable, and can be sorted, categorized and indexed by computers.
The subject of the semantic web has been controversial, thanks largely to the practical difficulties involved in implementing it. Therefore, although we are happy to present here brief details of all of the elements currently defined by HTML5, the question of whether or not a particular element should be used in an HTML document is left for the reader to decide.
The following table lists the HTML 5 elements alphabetically.
| Element | Description |
|---|---|
| <a> … </a> | Anchor - creates a hypertext link. |
| <abbr> … </abbr> | Abbreviation - represents an abbreviation or acronym (does not affect the appearance of the text in a browser window). |
| <address> … </address> | Address - represents the address of an individual or organisation. |
| <area …> | Area - used within a <map> element to define a clickable area of an image that may be associated with a hypertext link. |
| <article> … </article> | Article - represents independent and self-contained content such as a blog post or news article. |
| <aside> … </aside> | Aside - represents content that is (indirectly) related to the content within which it appears. |
| <audio> … </audio> | Audio - used to embed sound content in a document. |
| <b> … </b> | Bold - renders the enclosed text in a bold font. |
| <base …> | Base - specifies the base URL or target to use for all relative URLs in a document. |
| <bdi> … </bdi> | BiDirectional Isolation - used to isolate text that might need to be rendered in a direction opposite that of the surrounding text. |
| <bdo> … </bdo> | BiDirectional Override - used to override the direction of the enclosed text so that it is rendered in a different direction - requires the dir attribute to be set to ltr (left-to-right) or rtl (right-to-left). |
| <blockquote> … </blockquote> | Block Quotation - indicates that the enclosed text is quoted from another source, usually through the use of indentation. |
| <body> … </body> | Body - contains all of the HTML elements that define the content of an HTML document. |
| <br> | Break - inserts a single line break in a block of text (equivalent to a carriage return followed by a line feed) - an empty tag that requires no end tag. |
| <button> … </button> | Button - represents a clickable button that can be used with forms, or wherever else in a document a button may be required. |
| <canvas> … </canvas> | Canvas - used to create an area within the browser window in which script-generated graphics or animations - created with either the canvas scripting API or the WebGL API - will be displayed. |
| <caption> … </caption> | Caption - specifies the caption (or title) of a table, which will be displayed centre-aligned above the table by default. |
| <cite> … </cite> | Cite - defines the enclosed text (usually displayed in italics) as a reference to a creative work - for example, the title of a book, film, or painting, or the URL of a web page. |
| <code> … </code> | Code - renders the enclosed text using a style intended to indicate that it is a computer code fragment (typically using a fixed-width font). |
| <col …> | Column - used within a <colgroup> element to specify style properties for all of the cells in one or more table column. |
| <colgroup> … </colgroup> | Column Group - specifies a group of one or more columns in within a table - used with the <col> element to specify style properties for all of the cells in one or more table column. |
| <datalist> … </datalist> | Datalist - specifies a set of pre-defined <option> elements that represent values available for other controls - for example, as an "autocomplete" feature for an <input> element. |
| <dd> … </dd> | Description list Detail - provides a description of the description list term (<dt>) element that precedes it in in a description list (<dl>). |
| <del> … </del> | Delete - represents text that has been deleted from a document (the text is displayed as strikethrough text). |
| <details> … </details> | Details - creates an interactive disclosure widget (usually a small triangle that rotates to represent opening or closing the widget) that either displays or hides the enclosed information when the user toggles the state of the widget by clicking on it. A <summary> element within the <details> element provides the label for the widget. |
| <dfn> … </dfn> | Definition - identifies the text it encloses (usually displayed in italics) as the term being defined or explained by the text that follows it. |
| <dialog> … </dialog> | Dialog - creates an interactive component such as a pop-up dialog box or window. |
| <div> … </div> | Division - a generic container for other HTML elements that has no effect on either the format of its contents or page layout unless its properties are defined through styling or scripting. |
| <dl> … </dl> | Description list - encloses a description list consisting of key-value pairs, each comprising a description list term (<dt>) element and a description list detail (<dd>) element. |
| <dt> … </dt> | Description list Term - specifies a term in a description list (<dl>) element, and will be followed by a description list detail (<dl>) element that contains a description of the term. |
| <em> … </em> | Emphasis - renders the enclosed text as s emphasized text (i.e. in italics). |
| <embed …> | Embed - embeds external content (provided by an external application or another source of interactive content such as a browser plug-in) at the specified point in the document. |
| <fieldset> … </fieldset> | Fieldset - groups together a number of related elements within a form and draw a box around them. |
| <figure> … </figure> | Figure - represents self-contained content such as a diagram or a photograph. |
| <footer> … </footer> | Footer - contains information pertaining to an HTML document, or a section of an HTML document, such as the name of the author, contact details, copyright data, and links to related documents. |
| <form> … </form> | Form - creates an HTML form that can contain one or more interactive controls to enable the user to submit information to a web server. |
| <h1> … </h1> | Heading (level 1) - a level 1 section heading |
| <h2> … </h2> | Heading (level 2) - a level 2 section heading |
| <h3> … </h3> | Heading (level 3) - a level 3 section heading |
| <h4> … </h4> | Heading (level 4) - a level 4 section heading |
| <h5> … </h5> | Heading (level 5) - a level 5 section heading |
| <h6> … </h6> | Heading (level 6) - a level 6 section heading |
| <head> … </head> | Head - the part of an HTML document that contains information (metadata) about the document, such as the title of the document, the name of the author, a brief description of the contents, a list of keywords, and links to any external stylesheet or script files used by the document. |
| <header> … </header> | Header - contains information pertaining to an HTML document, or a section of an HTML document, such as a heading, introductory content (e.g. an abstract), a search form, navigational elements, or a logo. |
| <hr> | Hard Return - creates a horizontal line that can be used to separate content (for example to indicate a change of topic within a section). |
| <html> … </html> | HTML document root - represents the top-level element, i.e. the root element, of an HTML document; it is a container for all other HTML elements except the <!doctype> element. |
| <i> … </i> | Italic - displays the enclosed text in italics in order to emphasize or draw attention to the text; the W3C recommends the use of the appropriate semantic element in preference to the <i> tag wherever possible (for example, the <em> tag or the <cite> tag). |
| <iframe> … </iframe> | Inline frame - used to embed a second HTML document within the current HTML document. |
| <img> | Image - embed a reference to an image file into an HTML document; the image is displayed by the browser when it renders the HTML document, in the position corresponding to the position of the <img> tag within the HTML document. |
| <input …> | Input - creates an interactive control (i.e. an input field of some kind) that allows an HTML form to accept data from the user. |
| <ins> … </ins> | Insert - represents text that has been added to a document (the text is displayed as underlined text). |
| <kbd> … </kbd> | Keyboard Input - represents text input generated by a user (for example keyboard input or text created by voice recognition software) - typically displayed using a fixed-width font. |
| <label> … </label> | Label - defines a label for an <input> element. Depending on the input type clicking on the enclosed text may initiate an action (for example, it will toggle the value of a checkbox or radio button input type). |
| <legend> … </legend> | Legend - defines a caption for the contents of a <fieldset> element. |
| <li> … </li> | List Item - used to represent a list item within an ordered (<ol>) or unordered (<ul>) list element, or a menu (<menu>) list element. |
| <link …> | Link - defines a link between an HTML document and an external resource such as a style sheet. |
| <main> … </main> | Main content area - represents the main content area within the body of an HTML document. There can only be one <main> element in a document. |
| <map> … </map> | Image Map - used together with <area> elements to create an image map (an image in which different areas of the image act as clickable links). |
| <mark> … </mark> | Mark text - the enclosed text is rendered as highlighted text. |
| <menu> … </menu> | Menu - defines a command list or menu containing commands that can be invoked by the user - typically used for toolbars, context menus and form controls (currently not supported by popular browsers except Firefox, which offers limited support). |
| <meta …> | Meta - a meta tag encloses a single item of information (metadata) about an HTML document, e.g. a description, a list of keywords, or the name of the author. The information is not displayed in the main browser window but may affect the way in which the document is rendered or be used by search engines to index the document. |
| <meter> … </meter> | Meter - creates a meter (or gauge) that graphically represents either a scalar value (within a specific range of values) or a fractional value; it could be used, for example, to represent the amount of disk space used, or to represent a temperature reading. |
| <nav> … </nav> | Navigation - defines a section of an HTML document that contains hypertext links to locations within the current document or to other HTML documents; typically used to create a table of contents or a website navigation menu. |
| <noscript> … </noscript> | Noscript - displays alternative content if client-side scripts are not supported by the browser or the user has disabled support for client-side scripts. |
| <object> … </object> | Object - embeds external content (provided by an external application or another source of interactive content such as a browser plug-in) at the specified point in the document. |
| <ol> … </ol> | Ordered List - represents an ordered (typically numbered) list of items, each enclosed within a separate list item (<li>) tag. |
| <optgroup> … </optgroup> | Option Group - defines a grouping of related <option> elements within a drop-down list defined by a <select> element. |
| <option> … </option> | Option - defines a single option within a <select> element, an <optgroup> element, or a <datalist> element. |
| <output> … </output> | Output - a container that receives the result of a calculation or displays the outcome of a user action. |
| <p> … </p> | Paragraph - identifies the text it encloses as a paragraph; a web browser will automatically add the appropriate amount of whitel space between the paragraph and the HTML elements immediately above or below it. |
| <param …> | Parameter - defines a parameter for an <object> element. |
| <pre> … </pre> | Preformatted - represents preformatted text which will be rendered in a fixed-width font, exactly as it appears within the HTML file (spaces and line breaks will be preserved). |
| <progress> … </progress> | Progress - displays an indicator (typically a progress bar) showing the completion progress of a task. |
| <q> … </q> | Quotation - indicates that the enclosed text is an inline quotation, usually by enclosing the text in quotation marks. |
| <rp> … </rp> | Ruby Fallback Parenthesis - used within a ruby text (<rt>) element; inserts parentheses around ruby annotations in browsers that do not support the display of ruby annotations. |
| <rt> … </rt> | Ruby Text - used within a <ruby> element; encloses the text part of a ruby annotation (i.e. the part used to provide a translation or to give pronunciation information for one or more East Asian characters). |
| <ruby> … </ruby> | Ruby annotation - encloses one or more East Asian characters, together with a translation or pronunciation information (provided by a ruby text (<rt>) element). |
| <samp> … </samp> | Sample - used to enclose text that represents sample output from a computer program (usually rendered in a fixed-width font). |
| <script> … </script> | Script - used either to embed client-side scripts, or to reference external files containing client-side scripts (typically written in JavaScript). |
| <section> … </section> | Section - represents a section of an HTML document. |
| <select> … </select> | Select - used to create a drop-down list consisting of a number of options from which a user can choose (each option is defined by an <option> element). |
| <small> … </small> | Small - reduces the font size of the enclosed text to the next size down from the parent element's font size (e.g. large to medium, or small to x-small) - its intended use (in HTML5) is for representing comments or small print items. |
| <source …> | Source - specifies a media resource for a <picture>, <audio> or <video> element - commonly used to provide alternative formats for the same media content, enabling the browser to select the most appropriate format. |
| <span> … </span> | Span - a generic inline container that can be used to enclose a group of HTML elements that have a common style, or that share the same attribute values. |
| <strong> … </strong> | Strong - indicates that the enclosed text is important, typically by rendering it in a bold typeface. |
| <style> … </style> | Style - contains style information for a document or part of a document that will determine how HTML elements will be rendered by the browser. |
| <sub> … </sub> | Subscript - an inline element that renders the enclosed text as subscripted text. |
| <sup> … </sup> | Superscript - an inline element that renders the enclosed text as superscripted text. |
| <table> … </table> | Table - defines a two-dimensional table consisting of rows and columns of cells containing data items; each row is defined using a table row (<tr>) element), and each cell is defined using a table data (<td>) element. The table may additionally include one or more of the <caption>, <col>, <colgroup>;, <thead>, <tfoot>, or <tbody> elements. |
| <tbody> … </tbody> | Table Body - used to enclose the table row (<tr>) elements that make up the main body of a table; must appear inside the <table> element, but after any <caption>, <colgroup>, or <thead> elements. Can be scrolled independently of any table header or footer. |
| <td> … </td> | Table data - defines a single cell containing data in an HTML table; any text appearing in a table date element is left-aligned by default. |
| <textarea> … </textarea> | Text area - defines a text input field (typically within an HTML <form> element) that can span multiple lines and hold an unlimited number of characters; text is rendered using a fixed-width font by default. |
| <tfoot> … </tfoot> | Table footer - used to enclose the table row (<tr>) elements that make up the footer of a table; must appear inside the <table> element, but after any <caption>, <colgroup>, or <thead> elements and before any <tbody> element. The contents of a table footer will appear at the bottom of each page when printing a table that spans multiple pages. |
| <th> … </th> | Table header cell - defines the header cell for a single table column in an HTML table - rendered as bold, centre-aligned text by default. |
| <thead> … </thead> | Table header - used to enclose the table row (<tr>) elements that define the column headings for the table; must appear inside the <table> element, but after any <caption> or <colgroup> elements and before any <tbody> or <tfoot> elements. The contents of a table header will appear at the top of each page when printing a table that spans multiple pages. |
| <time> … </time> | Time - defines a human-readable date and/or time that can also be used to encode machine-readable date and/or time information - for example, to enable browsers to display reminders or schedule events, or to enable search engines to refine searches (does not affect the appearance of the text in a browser window). |
| <title> … </title> | Title - the enclosed text is the title of an HTML document; the title is not displayed in the main browser window, but it will appear in the browser tab belonging to the web page, just above the main browser window. |
| <tr> … </tr> | Table Row - defines a row of cells in a table, and contains one or more table header (<th>) or table data (<td>) cells. |
| <ul> … </ul> | Unordered List - represents an unordered list of items, each enclosed within a separate list item (<li>) tag. |
| <var> … </var> | Variable - the enclosed text represents the name of a variable in a mathematical expression or computer program; typically rendered in italics. |
| <video> … </video> | Video - embeds a media player into the HTML document, enabling the user to play a video clip (specified using one or more <source> elements); currently supported video formats include MP4, WebM, and Ogg, although browser support for these formats varies. |