| HTML5 element | | Utility ⁄ Purpose | Demo |
|---|
| !DOCTYPE | = | ensures standards compliant rendering | video |
| a | = | allows you to create a hyperlink, a hypertext anchor, or represents simply a placeholder | video |
| abbr | = | allows you to mark up an abbreviation or an acronym | video |
| address | = | allows you to mark up contact information for the whole web page or for an article within it | video |
| area | = | allows you to create areas on an image map; the areas can be hyperlinked | video |
| article | = | allows you to mark up a section of content that can be independently distributable or reusable | video |
| aside | = | allows you to 'put aside' (figuratively speaking) less relevant content from the relevant content | video |
| audio | = | allows you to embed audio data | |
| b | = | allows you to draw attention to a part of text | video |
| base | = | allows you to set a base URL ((absolute) for all relative urls that don't precede it) AND a default browsing context | video |
| bdi | = | allows you to isolate text from its surrounding content for bidirectional text formatting | video |
| bdo | = | allows you to override the directionality of a text set by the Unicode BIDI algorithm | video |
| blockquote | = | allows you to mark up a block quotation | video |
| body | = | container: almost all html elements can be found inside it | video |
| br | = | allows you to add a line break | video |
| button | = | allows you to mark up a button | |
| canvas | = | allows you to dynamically render images (graphics, graphs..) | |
| caption | = | allows you to add a title to your table | video |
| cite | = | allows you to mark up the title of a (creative) work | video |
| code | = | allows you to mark up computer code | video |
| col | = | represents a column inside a column group (colgroup) in a table | video |
| colgroup | = | allows you to group one or more columns in a table | video |
| data | = | allows you to mark up data in your HTML5 page | video |
| datalist | = | allows you mark up a predefined set of options, suggested to the user | video |
| dd | = | allows you to mark up the value, the description or the definition of a term or name, in a description list | video |
| del | = | allows you to mark up removed (deleted) content | video |
| details | = | its role is to hold details /additional information about something | video |
| dfn | = | allows you to mark up a definition term | video |
| dialog | = | allows you to mark up the part of an application that allows user interaction | video |
| div | = | container: its role is simply to group flow content for styling purpose, interactivity purpose, or other purposes | video |
| dl | = | allows you to mark up a description list organized in name-value pairs / associations or term-description groups | video |
| dt | = | allows you to mark up a term or a name to which you can associate a value, a description, a definition | video |
| em | = | allows you to emphasize text (stress emphasis) | video |
| embed | = | allows you to embed an external application or interactive content | |
| fieldset | = | allows you to group form controls (under a common name) | |
| figcaption | = | allows you to add a caption / a legend to the content of a figure element | video |
| figure | = | allows you to mark up an independent unit of flow content, (from the main flow of the document) | video |
| footer | = | allows you to mark up a footer (the footer of your HTML5 document, or the footer of a section) | video |
| form | = | allows you to group form-associated elements for server-submission/processing | |
| h1..h6 | = | allows you to add headings to your document | video |
| head | = | container for the following elements: meta, base, title, link, style, script, noscript, template | video |
| header | = | allows you to mark up a header (the header of your HTML5 document or the header of a section) | video |
| hgroup | = | allows you to group headings h1, h2, h3, h4, h5, h6, group that represents the heading of a section | video |
| hr | = | allows you to separate paragraphs with different thematic, by adding a horizontal line between them | video |
| html | = | root element / main container | video |
| i | = | allows you to mark up a different quality text (text in a different voice or mood) | video |
| iframe | = | represents a nested browsing context (document in document), an inline frame | video |
| img | = | allows you to embed non-interactive static or dynamic images into your HTML document | video |
| input | = | allows you to mark up an input field | |
| ins | = | allows you to mark up inserted content | video |
| kbd | = | allows you to mark up user input | video |
| keygen | = | a key pair generator control (for sending encrypted form data) | |
| label | = | allows you to label a form control | |
| legend | = | allows you to add a caption to the content of a fieldset element | |
| li | = | allows you to add items to the lists (ordered, unordered) or to a menu | video |
| link | = | allows you to link resources to your web page | video |
| main | = | allows you to mark up the dominant /main content of an element | video |
| map | = | serves rendering client-side image maps in your HTML document | video |
| mark | = | allows you to mark /highlight relevant text (keywords, expressions, run of text, phrases) for reference purpose | video |
| menu | = | allows you to create a toolbar menu or a popup menu containing commands | video |
| menuitem | = | allows you to add a command to a popup menu | video |
| meta | = | allows you to add metadata /pragma directives /character encoding to your HTML5 document | video |
| meter | = | allows you to represent the result of a scalar measurement within a known range (a gauge) | video |
| nav | = | allows you to mark up a navigation section (blocks of navigation links like: navigation menus, site maps...) | video |
| noscript | = | allows you to add fallback content for the script element | |
| object | = | allows you to embed external content into your page (Flash, Java Applets, HTML pages ...) | |
| ol | = | allows you to render an ordered list of items in your HTML document | video |
| optgroup | = | allows you to group the options from a list of options under a common label | video |
| option | = | allows you to mark up an option inside select or datalist elements | video |
| output | = | allows you to mark up an output (the result: of a calculation/of a user action) | |
| p | = | allows you to mark up paragraphs in your HTML document | video |
| param | = | allows you to define parameters for plugins within object elements | |
| pre | = | allows you to mark up preformatted text | video |
| progress | = | allows you to represent, through a progress bar, the degree of progress of a task | video |
| q | = | allows you to add an inline quotation (at intra-paragraph level) | video |
| rp | = | allows you to mark up parentheses around the annotations of a ruby base text | video |
| rt | = | allows you to mark up the ruby annotations of the base text marked up through ruby element | video |
| ruby | = | allows you to mark up phrasing content for which you can provide ruby annotations (small annotations) | video |
| s | = | allows you to mark up inaccurate or no longer relevant content | video |
| samp | = | allows you to mark up a sample of computer output | video |
| script | = | allows you to add scripts to page or link a script file to the page | |
| section | = | allows you to mark up a section of content, part of a thematic group of content | video |
| select | = | a control which allows you to select one or multiple options from a predefined set of options | video |
| small | = | allows you to mark up a fine print (a small print) | video |
| source | = | allows you to specify media resources for media elements | |
| span | = | container: its role is simply to group phrasing content for styling purpose, interactivity purpose, or other purposes | video |
| strong | = | allows you to mark up a span of text as being important | video |
| style | = | allows you to add CSS rules in order to style your web page | video |
| sub | = | allows you to add a subscript | video |
| summary | = | allows you to specify the summary of the details of a details element | video |
| sup | = | allows you to add a superscript | video |
| table | = | allows you to render tables in your HTML document | video |
| tbody | = | allows you to group rows of cells representing the body of the table | video |
| td | = | allows you to add data cells to rows, in a table | video |
| textarea | = | allows you to add a multiline plain text input control | |
| tfoot | = | allows you to group rows of cells representing the footer of the table | video |
| th | = | allows you to add header cells to rows, in a table | video |
| thead | = | allows you to group rows of cells representing the header of the table | video |
| time | = | allows you to mark up times/+dates in your HTML5 page | video |
| title | = | allows you to set the title of your HTML5 document | video |
| tr | = | allows you to add rows to a table | video |
| track | = | allows you to add text tracks (caption, subtitles, meta, descriptions..) to media elements (audio, video) | |
| u | = | allows you to mark up text offset from its surrounding content | video |
| ul | = | allows you to render an unordered list of items in your HTML document | video |
| var | = | allows you to mark up a variable | video |
| video | = | allows you to embed video data | |
| wbr | = | allows you to add a line break opportunity | video |
| <!-- --> | = | allows you to comment your source code for various reasons | video |
