HTML tags are very essential elements used to structure and format content within a web page. By enclosing content within specific tags, developers define its purpose and appearance, ensuring consistency and clarity across the site.
These tags serve various functions, from organizing text into paragraphs (<p>) and creating headings (<h1> to <h6>) to presenting data in tables (<table>, <tr>, <td>) and embedding multimedia with <img> and <video> tags.
Links (<a>) connect different web pages, while forms (<form>, <input>, <textarea>, <select>, <button>) facilitate user interaction through input fields, dropdown menus, and buttons. Semantic HTML tags like <header>, <nav>, <article>, and <footer> provide structural meaning to content, aiding accessibility and search engine optimization.
Understanding how and when to use HTML tags empowers developers to create well-organized, visually appealing, and accessible web pages that effectively communicate information to users.
HTML Tags
Here is a table of all current HTML tags you can use in your own templates, websites or various projects:
| Tag | Syntax | Description |
|---|---|---|
| !DOCTYPE html | <!DOCTYPE html> |
Defines the document type declaration required for every HTML document. |
| abbreviation | <abbr title="..."> ... </abbr> |
Specifies an abbreviation or short form of an element. |
| acronym | <acronym title="..."> ... </acronym> |
Defines an acronym for browsers, translation systems, and search engines. |
| address | <address> ... </address> |
Indicates contact information for a person or organization. |
| anchor | <a href="..."> ... </a> |
Creates a hyperlink on the webpage. |
| applet | <applet> ... </applet> |
(Discontinued in HTML5) Used to embed Java applets into HTML documents. |
| area | <area> |
Defines an area in an image to make it clickable. |
| article | <article> ... </article> |
Represents an article, a self-contained piece of content. |
| aside | <aside> ... </aside> |
Highlights additional, tangential content related to the main content. |
| audio | <audio> ... </audio> |
Used to embed audio content such as songs or interviews. |
| base | <base href="..."> |
Specifies a base URL for all relative links in the document. |
| basefont | <basefont> |
(Not supported in HTML5) Sets default text color, size, and font family. |
| bdi | <bdi> ... </bdi> |
Isolates a piece of text that might be formatted in a different direction. |
| bdo | <bdo dir> ... </bdo> |
Overrides the text direction of the content. |
| bgsound | <bgsound src="..."> |
Plays a background soundtrack. |
| big | <big> ... </big> |
Increases the size of the text relative to surrounding text. |
| blockquote | <blockquote> ... </blockquote> |
Displays a long quotation from another source. |
| body | <body> ... </body> |
Defines the main content of the HTML document. |
| bold | <b> ... </b> |
Specifies bold text without added importance. |
| break | <br> |
Inserts a line break in the document. |
| button | <button type="button"> |
Defines a clickable button. |
| caption | <caption align="value"></caption> |
Specifies the caption of a table. |
| canvas | <canvas id="script"> ... </canvas> |
Used to draw graphics, text, or images on the webpage. |
| center | <center> ... </center> |
(Not supported in HTML5) Centers text alignment. |
| cite | <cite> ... </cite> |
Specifies the title of a work, displayed in italics. |
| code | <code> ... </code> |
Defines a piece of computer code. |
| colgroup | <colgroup> ... </colgroup> |
Groups columns in a table to apply styles or other properties. |
| column | <col attribute="value"> |
Defines properties for each column in a colgroup. |
| comment | <!-- ... --> |
Inserts comments in the HTML code. |
| data | <data value=""> ... </data> |
Provides machine-readable translation for given content. |
| datalist | <datalist> ... </datalist> |
Provides autocomplete options for input fields. |
| dd | <dd> ... </dd> |
Specifies the description of an item in a description list. |
| define | <dfn> ... </dfn> |
Represents a defining instance within HTML content. |
| delete | <del> ... </del> |
Marks text that has been deleted from the document. |
| details | <details> ... </details> |
Creates an interactive widget that can be toggled open or closed. |
| dialog | <dialog open> ... </dialog> |
Defines a popup dialog or modal on a webpage. |
| dir | <dir> ... </dir> |
(Not supported in HTML5) Makes a list of directory titles. |
| div | <div> ... </div> |
Divides content into sections on a webpage. |
| dl | <dl> ... </dl> |
Represents a list of description terms and their descriptions. |
| dt | <dt> ... </dt> |
Specifies a term or name in a description list. |
| embed | <embed attributes> |
Embeds plug-ins such as flash animations. |
| fieldset | <fieldset> ... </fieldset> |
Groups related form elements and creates a box around them. |
| figcaption | <figcaption> ... </figcaption> |
Provides a caption for a figure element. |
| figure | <figure> ... </figure> |
Contains self-contained content such as images or illustrations. |
| font | <font attribute="value"> ... </font> |
Used to style text with specific font properties. |
| footer | <footer> ... </footer> |
Defines the footer section of an HTML document. |
| form | <form> ... </form> |
Creates a form for user input, such as registration or login. |
| frame | <frame/> |
(Not supported in HTML5) Divides the browser window into multiple sections. |
| frameset | <frameset cols="pixels|%|*"> |
Defines the structure of frames in a frameset. |
| head | <head> ... </head> |
Contains metadata and other information about the document. |
| header | <header> ... </header> |
Contains introductory content or navigation links. |
| heading | <h1> ... </h1> to <h6> ... </h6> |
Defines headings of different levels for a webpage. |
| hgroup | <hgroup> ... </hgroup> |
Groups heading elements together, such as main and subheadings. |
| hr | <hr> |
Inserts a horizontal rule to separate content. |
| html | <html> ... </html> |
Defines the root of an HTML document. |
| iframe | <iframe src="URL" title="description"></iframe> |
Defines a rectangular region within the document to display another document. |
| image | <img src="url" alt="some_text" width="" height=""> |
Inserts an image into the webpage. |
| input | <input type="value" ... /> |
Declares input controls within a form. |
| ins | <ins> ... </ins> |
Marks a range of text that has been added to the document. |
| isindex | <isindex prompt="search"> |
(Not supported in HTML5) Declares a single-line input field for entering search strings. |
| italic | <i> ... </i> |
Displays text in italics. |
| kbd | <kbd> ... </kbd> |
Defines keyboard input. |
| label | <label for="id"> ... </label> |
Describes a label for an input element. |
| legend | <legend> ... </legend> |
Defines a caption for the |
| li | <li> ... </li> |
Represents a list item in ordered or unordered lists. |
| link | <link rel="stylesheet" href="style.css"> |
Connects an HTML document with an external resource, such as a stylesheet. |
| main | <main> ... </main> |
Specifies the main content of the document. |
| map | <map name="map_name"> ... </map> |
Defines an image map for image-based navigation. |
| mark | <mark> ... </mark> |
Highlights text within the context of its document. |
| menu | <menu> ... </menu> |
Represents a group of commands or options, typically in a context menu. |
| meta | <meta name="description" content="description"> |
Provides metadata about the HTML document, such as description or keywords. |
| meter | <meter value="value"></meter> |
Represents a scalar measurement within a known range. |
| multicol | <multicol> ... </multicol> |
(Not supported in HTML5) Creates a multi-column layout. |
| nav | <nav> ... </nav> |
Represents navigation links within a document. |
| noembed | <noembed> ... </noembed> |
(Not supported in HTML5) Defines alternate content to display when the browser does not support the embedded content. |
| nolayer | <nolayer> ... </nolayer> |
(Not supported in HTML5) Specifies content that should be displayed if the browser does not support layers. |
| noscript | <noscript> ... </noscript> |
Defines alternate content to be displayed when JavaScript is not supported or disabled. |
| object | <object> ... </object> |
Embeds objects such as images, audio, videos, Java applets, and more. |
| ol | <ol> ... </ol> |
Defines an ordered list of items. |
| optgroup | <optgroup label="label"> ... </optgroup> |
Groups related options within a select dropdown. |
| option | <option value="value"> ... </option> |
Defines an option in a dropdown list or select list. |
| output | <output for="element_id"> ... </output> |
Represents the result of a calculation or user action. |
| p | <p> ... </p> |
Defines a paragraph of text. |
| param | <param name="value" value="value"> |
Specifies parameters for an object element. |
| picture | <picture> ... </picture> |
Provides multiple sources for an image based on device capabilities. |
| plaintext | <plaintext> ... </plaintext> |
(Not supported in HTML5) Renders text as plain text. |
| pre | <pre> ... </pre> |
Defines preformatted text, preserving both spaces and line breaks. |
| progress | <progress value="value"></progress> |
Represents the progress of a task. |
| q | <q> ... </q> |
Defines a short inline quotation. |
| rb | <rb> ... </rb> |
Specifies the base text direction of the content. |
| rp | <rp> ... </rp> |
Provides parentheses around fallback content in ruby annotations. |
| rt | <rt> ... </rt> |
Defines the pronunciation of characters presented in a ruby annotation. |
| rtc | <rtc> ... </rtc> |
Contains ruby annotations that may consist of multiple characters. |
| ruby | <ruby> ... </ruby> |
Represents a ruby annotation, used for pronunciation or translation. |
| s | <s> ... </s> |
Indicates text that is no longer accurate or relevant. |
| samp | <samp> ... </samp> |
Represents sample output from a computer program. |
| script | <script type="text/javascript"> ... </script> |
Embeds or links to client-side scripts such as JavaScript. |
| section | <section> ... </section> |
Groups related content together within a document. |
| select | <select> ... </select> |
Creates a dropdown list, allowing users to select one or more options. |
| small | <small> ... </small> |
Specifies smaller text than the surrounding text. |
| source | <source src="source_url" type="media_type"> |
Specifies multiple media resources for the |
| spacer | <spacer type="vertical|horizontal" size="value"> |
(Not supported in HTML5) Creates space between elements. |
| span | <span> ... </span> |
Defines a section in a document for styling purposes. |
| strike | <strike> ... </strike> |
(Not supported in HTML5) Renders text with a strikethrough effect. |
| strong | <strong> ... </strong> |
Indicates strong importance or emphasis. |
| style | <style> ... </style> |
Defines styles for HTML documents. |
| sub | <sub> ... </sub> |
Specifies subscript text. |
| summary | <summary> ... </summary> |
Defines a visible heading for the |
| sup | <sup> ... </sup> |
Specifies superscript text. |
| table | <table> ... </table> |
Creates a table to display data in rows and columns. |
| tbody | <tbody> ... </tbody> |
Groups the body content in a table. |
| td | <td> ... </td> |
Defines a cell in a table. |
| template | <template> ... </template> |
Defines reusable content that can be cloned and inserted in the document by JavaScript. |
| textarea | <textarea> ... </textarea> |
Creates a multi-line text input control. |
| tfoot | <tfoot> ... </tfoot> |
Groups the footer content in a table. |
| th | <th> ... </th> |
Defines a header cell in a table. |
| thead | <thead> ... </thead> |
Groups the header content in a table. |
| time | <time datetime="YYYY-MM-DD"> ... </time> |
Represents a specific time or duration. |
| title | <title> ... </title> |
Defines the title of the document displayed in the browser's title bar or tab. |
| tr | <tr> ... </tr> |
Defines a row in a table. |
| track | <track kind="captions" src="src_url" srclang="language_code"> |
Specifies text tracks for video elements (subtitles, captions, descriptions, chapters). |
| tt | <tt> ... </tt> |
(Not supported in HTML5) Renders text in a teletype or monospaced font. |
| u | <u> ... </u> |
Displays text with an underline effect. |
| ul | <ul> ... </ul> |
Defines an unordered list of items. |
| var | <var> ... </var> |
Indicates a variable, typically displayed in italics. |
| video | <video controls><source src="video.mp4" type="video/mp4"></video> |
Embeds video content into the webpage. |
| wbr | <wbr> |
Specifies a possible line-break opportunity within text. |
And there you have it! HTML tags aren't just the nerdy bits and bobs of web development; they're the secret sauce behind every stunning website you've ever admired.
From the humble <p> for paragraphs to the flashy <img> for images, these tags are the unsung heroes of the digital realm, turning lines of code into eye-catching masterpieces.
So, next time you're browsing the web, give a little nod of appreciation to those trusty tags working behind the scenes. After all, without them, we'd be stuck in the dark ages of dial-up and dancing baby GIFs.
Keep on coding, keep on creating, and remember, with great HTML tags comes great responsibility... to build something awesome!