MileciaThere are more HTML tags out there than you can imagine. Some of them have been deprecated with HTML5, some of them are completely new, and some of them live in a weird limbo between being supported and becoming obsolete.
A day might come where you need a big list of all of the HTML5 tags you can choose from because you need other options for your application. So, here's a list of all 97 of the HTML5 tags and some brief descriptions for each.
| Tag Name | Description |
|---|---|
| <!-- --> | This is a comment. Anything you put inside of these tags will not be a part of the code that runs. It is only there for information. |
| <!DOCTYPE ...> | This isn't really an HTML tag, but it should be used on every web page. It tells the browser that an HTML document is being rendered. |
| <a> | This is the anchor tag. It's used to add links to other web pages or positions on the current page. |
| <abbr> | This is associated with a title to explain an abbreviation or acronym. People won't be able to see it on your page, but browsers, search engines, and assistive devices use the information. |
| <address> | This identifies contact information relevant to the page. |
| <area> | This is used with the element to define a clickable area on an image map. |
| <article> | This is identifies a self-contained piece of content that could be distributed to other sites and still make sense. |
| <aside> | This is used to identify content related to the main content, like links to related content or the author information. |
| <audio> | This is used to add audio resources to a web page without needing to use another plugin. |
| <b> | This makes text bold without adding extra emphasis to assistive devices. |
| <base> | This is used to note the base URL that will be used to build any relative URLs on that page. |
| <bdi> | This is used to isolate small sections of text that may be formatted to go in the opposite direct than the text around it. It's good for languages that read right to left, like Arabic. |
| <bdo> | This changes the default directionality of text. It's good for right to left languages like Arabic. |
| <blockquote> | This is used to define a block of text that is a direct quote from someone. |
| <body> | This contains all of the content for a web page. |
| <br> | This inserts a line break between elements. |
| <button> | This is used to make an HTML button and doesn't do anything until you connect it to something with JavaScript. |
| <canvas> | This makes an area on a web page that can be used for creating animations or drawing graphics with JavaScript. |
| <caption> | This is used to caption a table. |
| <cite> | This identifies the source of a quote or someone else's work. |
| <code> | This is used to define text as code. |
| <colgroup> | This is used to group together columns in a table. |
| <datalist> | This is used to define auto-completion values for any associated inputs. |
| <dd> | This is used to create a definition description on a definition list. |
| <del> | This is used to show that some text has been deleted from the content, but it shows it like it's marked through. |
| <dfn> | This is used to tell web crawlers and browsers that some text close by defines a term. |
| <dialog> | This is used to make a dialog box, like a modal, appear in the browser. |
| <div> | This is used to group content together arbitrarily. |
| <dl> | This defines a description list. |
| <dt> | This defines a term in the description list. |
| <embed> | This creates and embedded are where you can run third party applications like Flash. |
| <fieldset> | This is used to group together related fields in a form. |
| <figcaption> | This is used to add a caption to a element. |
| <figure> | This is used to define content like tables or images in a self-contained element that's still related to the content around it. |
| <footer> | This is used to define the footer of a page. You can usually find copyright information there. |
| <form> | This is used to make a form. You put all of the inputs inside of this element. |
| <h1> ... <h6> | These are the heading elements. They go in descending order from most important (h1) to least important (h6). |
| <header> | This is used to define the header of some content. You'll usually see it holding website branding and navigation menus. |
| <hr> | This is used to make a horizontal line. |
| <html> | This is the container for everything on a web page. |
| <i> | This is used to italicize text without adding extra emphasis on assistive devices. |
| <iframe> | This is used to embed an independent HTML document into the current document. You see this a lot when there's a YouTube video on a page. |
| <img> | This is used to add images to an HTML document. |
| <input> | This is used to make form fields that get user input. It can be a text field, a checkbox, or one of the other types of inputs. |
| <ins> | This is used to show that some text has been added to the content. |
| <kbd> | This is used to identify text that represents keyboard input. |
| <label> | This is used to make a label for an <input> element. |
| <legend> | This is used to add a caption to <input> elements that have been grouped together with a <fieldset> element. |
| <li> | This is used to define a list item in an unordered or ordered list. |
| <link> | This is used to define a relationship between the HTML document and an external resource. You'll see this mainly used for external CSS. |
| <main> | This is used to show that the content inside is the main topic of the page. It doesn't contain anything that would be duplicated on other web pages like headers or footers. |
| <map> | This is used to define hyperlinked regions of an image map. |
| <mark> | This is used to highlight text inside of another element and to show that the text is particularly relevant to the content around it. |
| <menu> | This is still in the experimental phase and doesn't have much browser support, but it could be used to add menu items to particular menus. |
| <menuitem> | This is used to add menu items to pop-up menus like when you right click in the browser. |
| <meta> | This is used to add information about the page that only web crawlers and browsers can see. It won't show up anywhere on your page. |
| <meter> | This is used to make a visual gauge to show the relationship of a value to a set min and max. |
| <nav> | This is used to define a navigation area on a page. |
| <noscript> | This is used to show HTML content if a browser doesn't support scripts or the scripts are disabled. |
| <object> | This is used to embed objects like Java items into your page. |
| <ol> | This defines an ordered (numbered) list. |
| <optgroup> | This is used to group together different options within a dropdown. |
| <option> | This is used with the element to make a dropdown menu. |
| <output> | This is used to display the result of a calculation. |
| <p> | This is used to define a paragraph of text. |
| <param> | This is used to define the parameters for a plugin inside of the element. |
| <pre> | This is used to show text that should be rendered with the spacing and line breaks that you see in the code. |
| <progress> | This is used to make a progress bar to show how much progress has been made in completing a task. |
| <q> | This is used to define an inline quote. |
| <rp> | This is used to define content that is shown in browsers that don't support the ruby language annotations which are used for displaying certain characters in several different Asian languages. |
| <rt> | This defines explanations and pronunciations of characters in ruby language annotation. |
| <ruby> | This is used to pair together the <rp> and <rt> elements. |
| <s> | This is used to show a strikethrough on text. |
| <samp> | This is used to define text that should be interpreted as sample output from a program. |
| <script> | This is where you can write or import JavaScript. |
| <section> | This is used to group related content together. |
| <select> | This is used to create a dropdown list of multiple options. |
| <small> | This is used to display text one size smaller than the text around it. |
| <source> | This is used to define the URL of a media resource used in <audio> or <video> elements. |
| <span> | This is an inline element that can group things arbitrarily. |
| <strong> | This is used to make text bold and add extra emphasis to assistive devices. |
| <style> | This is used to write CSS styles for a particular page. |
| <table> | This is used to create a table in an HTML document. |
| <tbody> | This is used to define the body of a <table> element. |
| <td> | This makes a single data cell inside of a <table> element. |
| <textarea> | This is used to make a text input that can accept a lot of text. |
| <tfoot> | This is used to add summary rows to a <table> element. |
| <th> | This is used to define a cell in the head area of a <table> element. |
| <thead> | This is used to make the column headers for the <table>. |
| <time> | This is used to make a datetime. |
| <title> | This is used to set the title of the web page. |
| <tr> | This is used to define the rows in a <table> element. |
| <track> | This is used to add a time-based data source related to either the <audio> or <video> element. |
| <ul> | This is used to create an unordered list. |
| <var> | This is used to define a variable from a math equation or program. |
| <video> | This is used to add video support for a web page. |
| <wbr> | This is used to set word break points for long amounts of text. |
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
