HTML (Hypertext Markup Language) is the fundamental building block of the web. It's used to structure content on the internet. Each element of HTML is denoted by tags, which are enclosed in angle brackets. An HTML tag can include a "start tag" and "end tag," which identify the beginning and end of elements respectively. Below is the list of all html tags:
List of all HTML tags with description
| Tag | Description |
|---|---|
| <!DOCTYPE> | Defines the document type and version of HTML. |
| <a> | Defines a hyperlink, which is used to link from one page to another. |
| <abbr> | Represents an abbreviation or an acronym; the optional title attribute can provide an explanation. |
| <address> | Defines contact information for the author/owner of a document or article. |
| <area> | Defines an area inside an image map that has predefined clickable areas. |
| <article> | Specifies independent, self-contained content. |
| <aside> | Marks content aside from the content it is placed in (like a sidebar). |
| <audio> | Used to embed sound content in documents. It can store sound files or stream audio. |
| <b> | Represents bold text without any extra importance. |
| <base> | Specifies the base URL/target for all relative URLs in a document. |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it. |
| <bdo> | Overrides the current text direction. |
| <blockquote> | Represents a section that is quoted from another source. |
| <body> | Defines the document's body. |
| <br> | Produces a single line break. |
| <button> | Defines a clickable button. |
| <canvas> | Used to draw graphics on the fly via scripting (usually JavaScript). |
| <caption> | Defines a table caption. |
| <cite> | Defines the title of a work (e.g. a book, a song, a movie, etc.). |
| <code> | Defines a piece of computer code. |
| <col> | Specifies column properties for each column within a <colgroup> element. |
| <colgroup> | Specifies a group of one or more columns in a table for formatting. |
| <data> | Links the given content with a machine-readable translation. |
| <datalist> | Specifies a list of pre-defined options for input controls. |
| <dd> | Provides the definition of the term in a description list. |
| <del> | Represents text that has been deleted from a document. |
| <details> | Defines additional details that the user can view or hide. |
| <dfn> | Represents a term defined within the context of the document. |
| <dialog> | Defines a dialog box or window. |
| <div> | Defines a section in a document. |
| <dl> | Defines a description list. |
| <dt> | Defines a term/name in a description list. |
| <em> | Emphasizes text. |
| <embed> | Defines a container for an external application or interactive content (a plug-in). |
| <fieldset> | Groups related elements in a form. |
| <figcaption> | Defines a caption for a <figure> element. |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section. |
| <form> | Defines an HTML form for user input. |
| <h1> to <h6> | Define HTML headings. |
| <head> | Contains metadata/information for the document. |
| <header> | Specifies a header for a document or section. |
| <hr> | Produces a thematic break in an HTML page (e.g., a shift of topic). |
| <html> | Defines the root of an HTML document. |
| <i> | Represents a range of text set off from the normal text for some reason (a thought or a ship name, etc.), typically displayed in italic. |
| <iframe> | Represents a nested browsing context (embedding another HTML page within the current page). |
| <img> | Embeds an image in the document. |
| <input> | Defines an input control. |
| <ins> | Defines a text that has been inserted into a document. |
| <kbd> | Represents user input (usually keyboard input). |
| <label> | Defines a label for an <input> element. |
| <legend> | Defines a caption for a <fieldset>, <figure>, or details element. |
| <li> | Defines a list item. |
| <link> | Used to link to external style sheets. |
| <main> | Specifies the main content of a document. |
| <map> | Defines a client-side image map. |
| <mark> | Highlights text. |
| <meta> | Defines metadata about an HTML document. |
| <meter> | Defines a scalar measurement within a known range (a gauge). |
| <nav> | Defines navigation links. |
| <noscript> | Defines an alternate content for users that do not support client-side scripts. |
| <object> | Defines an embedded object. |
| <ol> | Defines an ordered list. |
| <optgroup> | Defines a group of related options in a dropdown list within a <select> element. |
| <option> | Defines an option in a dropdown list. |
| <output> | Defines the result of a calculation. |
| <p> | Defines a paragraph. |
| <param> | Defines a parameter for an object. |
| <picture> | Defines a container for multiple image resources. |
| <pre> | Indicates preformatted text. |
| <progress> | Represents the progress of a task. |
| <q> | Defines a short inline quotation. |
| <rp> | Used to provide parentheses around a ruby text (to be shown in browsers that do not support ruby annotations). |
| <rt> | Defines an explanation or pronunciation of characters (for East Asian typography). |
| <ruby> | Represents a ruby annotation (small fonts above or below the text for pronunciation). |
| <s> | Indicates text that is no longer correct. |
| <samp> | Defines sample output from a computer program. |
| <script> | Defines a client-side script. |
| <section> | Defines a section in a document. |
| <select> | Defines a dropdown list. |
| <small> | Makes the text smaller than the surrounding text. |
| <source> | Specifies multiple media resources for media elements (<video>, <audio>). |
| <span> | A generic inline container for phrasing content, which does not inherently represent anything. |
| <strong> | Indicates that the content is of strong importance. |
| <style> | Defines style information for a document. |
| <sub> | Defines subscripted text. |
| <summary> | Defines a visible heading for a <details> element. |
| <sup> | Defines superscripted text. |
| <svg> | Defines a container for SVG graphics. |
| <table> | Defines a table. |
| <tbody> | Groups the body content in a table. |
| <td> | Defines a cell in a table. |
| <template> | Holds client-side content that you don’t want to be rendered when the page loads. |
| <textarea> | Defines a multiline input control (text area). |
| <tfoot> | Groups the footer content in a table. |
| <th> | Defines a header cell in a table. |
| <thead> | Groups the header content in a table. |
| <time> | Defines a date/time. |
| <title> | Defines a title for the document. |
| <tr> | Defines a row in a table. |
| <track> | Defines text tracks for media elements (<video>, <audio>). |
| <u> | Represents some text that is unarticulated and styled differently from normal text, usually underlined. |
| <ul> | Defines an unordered list. |
| <var> | Defines a variable. |
| <video> | Embeds video content. |
| <wbr> | Defines a possible line-break. |
FAQs about HTML tags
Which HTML tag is most commonly used and why?
The <div> tag is one of the most commonly used HTML tags. It is used to group block-elements to format them with CSS. Its versatility in styling, coupled with its ability to support various interaction and display styles, makes it a fundamental tool in web development.
Are there any deprecated HTML tags that I should avoid?
Yes, some HTML tags are deprecated and should be avoided as they are no longer supported in HTML5. Examples include:
- <font>: Use CSS for styling fonts instead.
- <center>: Use CSS margin properties or text-align to center elements.
- <frame> and <frameset>: Use <iframe> instead.
Using these deprecated tags can make your HTML code less compliant with modern web standards and negatively impact compatibility and accessibility.
What is the difference between <section>, <div>, and <article> tags?
- <section>: Represents a standalone section—which doesn't have a more specific semantic element to represent it—of a document or application. A section is typically themed or cohesive.
- <div>: Acts as a container unit that encapsulates other HTML elements and is used purely for styling purposes or as a tool for applying CSS. Unlike <section>, <div> has no semantic meaning.
- <article>: Encapsulates content that makes sense on its own and that could be distributed independently from the rest of the site or page (e.g., a forum post, a magazine or newspaper article).
How can I make my HTML content accessible?
To make HTML content accessible, follow these tips:
- Use semantic HTML5 elements like <main>, <section>, <aside>, <header>, <footer>, and <article> to improve the structure.
- Ensure text alternatives (alt text) for non-text content.
- Use proper contrast ratios for text.
- Provide clear form labels; use <label> tags associated with form controls using the for attribute.
- Ensure all interactive elements are keyboard accessible.
- Use ARIA roles and properties only when necessary.
What are self-closing tags?
Self-closing tags, also known as empty elements, are HTML tags that do not need a closing tag and end with a slash (/) inside the opening tag. Examples include <img/>, <br/>, <hr/>, <input/>, and <meta/>. In HTML5, the slash is optional and usually omitted.
How do I use comments in HTML?
Comments in HTML are added with the <!-- comment goes here --> syntax. Anything within the <!-- and --> will not be displayed in the browser. This is useful for adding notes, explanations, or deactivating parts of your HTML code temporarily.
What is the best practice for using IDs and classes in HTML?
- IDs: Use IDs for elements that appear once per page, such as containers for specific sections. IDs are unique per page and are useful for JavaScript manipulation and anchor targets.
- Classes: Use classes for elements that share a specific style across the page or across different pages. Classes can be reused multiple times on the same page.
