Complete HTML Tags Explanation & Reference

is ignored by the browser.

<!DOCTYPE> Declares the document type and version of HTML being used, ensuring the browser renders the page correctly. For HTML5, it’s simply written as <!DOCTYPE html>. It must be the very first line in an HTML file, before the <html> tag, and doesn’t require a closing tag.

<a> Creates a hyperlink to another webpage, file, email address, or any URL. It uses the href attribute to specify the destination
(e.g., <a href="https://example.com">Link</a>). Additional attributes like target="_blank" can open the link in a new tab.

<abbr> Represents an abbreviation or acronym, such as "NASA" or "Mr." The optional title attribute provides the full expansion
(e.g., <abbr title="National Aeronautics and Space Administration">NASA</abbr>), which can be displayed as a tooltip on hover.

<acronym> Deprecated in HTML5. Previously used to define acronyms, similar to <abbr>, but lacked broad support. Modern practice favors <abbr> for both abbreviations and acronyms due to better compatibility and simplicity.

<address> Indicates contact information for the author or owner of a document or article, such as email, phone, or physical address. Typically rendered in italics by browsers, it’s often used in footers
(e.g., <address>Email: [email protected]</address>).

<applet> Deprecated in HTML5. Once used to embed Java applets (small programs) into webpages. Replaced by <object> or modern JavaScript solutions due to security concerns and lack of browser support for Java plugins.

<area> Defines a clickable region within an image map (<map>). Attributes like shape
(e.g., "rect," "circle") and coords specify the area’s geometry, while href links to a destination
(e.g., <area shape="rect" coords="0,0,50,50" href="page.html">).

<article> Represents a self-contained, independent piece of content, such as a blog post, news article, or forum entry. It’s designed for syndication and can include headings, paragraphs, and images, enhancing semantic structure in HTML5.

<aside> Marks content tangentially related to the main content, such as sidebars, pull quotes, or advertisements. Often styled to appear beside the main article, it improves document organization and accessibility in HTML5.

<audio> Embeds audio files
(e.g., MP3, WAV) into a webpage. Supports attributes like controls for playback buttons, src for the file path, and loop for repetition
(e.g., <audio controls src="song.mp3"></audio>). Can include fallback content.

<b> Renders text in bold without implying importance. Historically used for styling, but <strong> is preferred for semantic emphasis. Example: <b>Bold text</b>. Still supported but less meaningful for accessibility.

<base> Specifies a base URL for all relative URLs in a document, placed in the <head>. For example, <base href="https://example.com/"> makes <a href="page.html"> resolve to "https://example.com/page.html". Only one per document.

<basefont> Deprecated in HTML5. Once set default font size, color, and face for text in older HTML versions. CSS
(e.g., body { font-family: Arial; }) has replaced it due to better flexibility and separation of content from style.

<bdi> Isolates text with potentially different directionality
(e.g., Arabic in English text) to prevent rendering issues. Stands for "Bi-Directional Isolation." Example: <bdi>العربية</bdi> ensures proper display in mixed-direction content.

<bdo> Overrides the default text direction (Bi-Directional Override). The dir attribute
(e.g., "rtl" or "ltr") controls it. Example: <bdo dir="rtl">Reverse</bdo> displays "esreveR," useful for languages like Arabic or Hebrew.

<big> Deprecated in HTML5. Increased text size by one level compared to surrounding text in older HTML. Modern practice uses CSS
(e.g., font-size: larger;) for better control and consistency across browsers.

<blockquote> Denotes a lengthy quotation from an external source, often indented by browsers. The cite attribute can link to the source
(e.g., <blockquote cite="url">Quote</blockquote>). Used for excerpts, speeches, or references.

<body> Contains all visible content of an HTML document, such as text, images, and links. It follows the <head> section and is the main area where webpage structure is defined. Only one <body> tag is allowed per document.

<br> Inserts a single line break, forcing content to the next line without starting a new paragraph. Self-closing
(e.g., <br> or <br /> in XHTML). Useful for addresses or poetry where paragraph spacing isn’t desired.

<button> Creates an interactive button that can trigger actions
(e.g., form submission). Attributes like type ("button," "submit," "reset") define its behavior. Example: <button type="button">Click</button>.

<canvas> Provides a drawing surface for graphics, animations, or games using JavaScript
(e.g., via the 2D context). Requires width and height attributes
(e.g., <canvas width="200" height="200"></canvas>). Fallback content displays if unsupported.

<caption> Adds a title or description to a <table>, typically displayed above it. Must be the first child of <table>
(e.g., <table><caption>Data</caption>...</table>). Enhances table accessibility and clarity.

<center> Deprecated in HTML5. Centered text or elements horizontally in older HTML versions. Replaced by CSS
(e.g., text-align: center; or margin: auto;) for better styling control and semantic separation.

<cite> Marks the title of a creative work
(e.g., book, movie, song), typically italicized by browsers. Used for citations
(e.g., <cite>To Kill a Mockingbird</cite>). Not for quoting text directly—use <q> or <blockquote> instead.

<code> Displays text as computer code, usually in a monospace font. Ideal for inline code snippets
(e.g., <code>printf("Hello");</code>). Often paired with <pre> for multi-line code blocks to preserve formatting.

<col> Defines properties for one or more columns in a <table>, used within <colgroup>. Attributes like span and style apply formatting
(e.g., <col span="2" style="background-color: yellow">). Enhances table structure control.

<colgroup> Groups columns in a <table> for collective styling or structure. Placed before <thead> or <tbody>
(e.g., <colgroup><col span="3"></colgroup>). Simplifies applying styles to multiple columns at once.

<data> Links human-readable content to machine-readable data via the value attribute
(e.g., <data value="123">Item</data>). Introduced in HTML5 for data processing or scripting purposes, though less commonly used.

<datalist> Provides a predefined list of options for an <input> element with autocomplete suggestions. Used with the list attribute
(e.g., <input list="colors"><datalist id="colors"><option value="Red"></datalist>). Enhances user input efficiency.

<dd> Describes a term in a description list (<dl>), paired with <dt>. Represents the "description" part
(e.g., <dl><dt>Cat</dt><dd>A small feline</dd></dl>). Indented by default for clarity.

<del> Marks text as deleted, typically displayed with a strikethrough. Used for edits or updates
(e.g., <del>Old price</del> New price). The cite and datetime attributes can specify the reason or time of deletion.

<details> Creates an expandable widget that hides content until clicked, paired with <summary>. Introduced in HTML5
(e.g., <details><summary>More</summary>Details here</details>). Useful for FAQs or collapsible sections.

<dfn> Defines the term being explained in a document, often italicized. Marks the defining instance
(e.g., <dfn>HTML</dfn> is a markup language). Helps clarify terminology for readers and screen readers.

<dialog> Creates a dialog box or modal window, introduced in HTML5. The open attribute shows it
(e.g., <dialog open>Message</dialog>). Often used with JavaScript for pop-ups, though browser support varies.

<dir> Deprecated in HTML5. Originally defined a directory list, rendered like <ul>. Replaced by <ul> for unordered lists due to simplicity and broader adoption. Rarely seen in modern web development.

<div> A block-level container for grouping elements, widely used for layout and styling. Has no semantic meaning on its own
(e.g., <div class="section">Content</div>). Essential for structuring complex designs with CSS.

<dl> Creates a description list, pairing terms (<dt>) with descriptions (<dd>). Useful for glossaries or metadata
(e.g., <dl><dt>Dog</dt><dd>A loyal pet</dd></dl>). Semantically richer than simple lists.

<dt> Defines a term or name in a description list (<dl>), followed by <dd>. Represents the "term" part
(e.g., <dl><dt>Apple</dt><dd>A fruit</dd></dl>). Multiple <dt>s can share one <dd>.

<em> Emphasizes text, typically italicized, indicating stress or importance. Semantically meaningful
(e.g., <em>Hurry!</em>). Preferred over <i> for accessibility, as it conveys intent to screen readers.

<fieldset> Groups related form elements, often with a border. Typically contains a <legend> for a caption
(e.g., <fieldset><legend>Details</legend><input></fieldset>). Improves form organization and accessibility.

<figcaption> Provides a caption for a <figure> element, placed as its first or last child. Enhances context
(e.g., <figure><img src="photo.jpg"><figcaption>Sunset</figcaption></figure>). Introduced in HTML5.

<figure> Groups self-contained content like images, diagrams, or code snippets, often with a <figcaption>. Introduced in HTML5
(e.g., <figure><img src="chart.png"></figure>). Improves semantic structure.

<font> Deprecated in HTML5. Controlled font size, color, and face in older HTML
(e.g., <font size="3" color="red">Text</font>). Replaced by CSS for better maintainability and separation of content from presentation.

<footer> Defines a footer for a document or section, typically containing author info, copyright, or links. Introduced in HTML5
(e.g., <footer><p>© 2025</p></footer>). Enhances semantic layout.

<form> Creates a container for user input elements like text fields and buttons. Attributes like action (URL) and method
(e.g., "post") define submission behavior
(e.g., <form action="/submit" method="post"><input></form>).

<frame> Deprecated in HTML5. Defined a single frame within a <frameset> for splitting browser windows. Replaced by <iframe> or modern layouts due to accessibility and usability issues.

<frameset> Deprecated in HTML5. Organized multiple <frame>s to divide a webpage into sections. Obsolete due to poor mobile support and SEO challenges; CSS layouts or <iframe> are now preferred.

<h1> - <h6> Define headings, with <h1> being the highest (most important) and <h6> the lowest. Used for titles and subheadings
(e.g., <h1>Main Title</h1>). Crucial for SEO and document structure.

<head> Contains metadata, scripts, and links that define the document’s properties, not visible on the page. Includes elements like <title>, <meta>, and <link>
(e.g., <head><title>Page</title></head>).

<header> Represents introductory content or navigation for a document or section, often containing logos or headings. Introduced in HTML5
(e.g., <header><h1>Welcome</h1></header>). Improves semantic clarity.

<hgroup> Groups multiple headings (<h1>-<h6>) together, typically a main title and subtitle. Less commonly used in HTML5
(e.g., <hgroup><h1>Title</h1><h2>Subtitle</h2></hgroup>). Aids in outlining.

<hr> Inserts a horizontal rule (line) to separate content thematically, self-closing
(e.g., <hr> or <hr />). Historically a visual divider, now often styled with CSS for modern designs.

<html> The root element of an HTML document, enclosing <head> and <body>. The lang attribute
(e.g., <html lang="en">) specifies the language, aiding accessibility and search engines.

<i> Renders text in italics without semantic meaning, used for styling. Example: <i>Italic</i>. <em> is preferred for emphasis, as <i> lacks accessibility significance.

<img> Embeds images, requiring src (file path) and alt (text description) attributes
(e.g., <img src="photo.jpg" alt="Dog">). Self-closing; alt improves accessibility and SEO.

<input> Creates interactive form controls like text fields, checkboxes, or buttons. The type attribute defines its role
(e.g., <input type="text" name="username">). Self-closing and highly customizable.

<ins> Marks text as inserted, typically underlined. Used for edits
(e.g., <ins>New text</ins>), with cite and datetime attributes for context. Pairs with <del> for document revisions.

<kbd> Represents keyboard input, often in monospace font
(e.g., <kbd>Ctrl + C</kbd>). Used in tutorials or documentation to indicate user actions, enhancing clarity for technical content.

<label> Associates a text label with a form control, improving usability. The for attribute links it to an input’s id
(e.g., <label for="name">Name:</label><input id="name">). Boosts accessibility.

<legend> Provides a caption for a <fieldset>, appearing within its border
(e.g., <fieldset><legend>User Info</legend><input></fieldset>). Clarifies the purpose of grouped form elements.

<li> Defines a list item within <ul> (unordered) or <ol> (ordered) lists
(e.g., <ul><li>Item</li></ul>). Can contain text, images, or nested lists for hierarchical content.

<main> Specifies the primary content of a document, excluding headers, footers, or sidebars. Introduced in HTML5
(e.g., <main><article>Content</article></main>). Only one per page, aids accessibility.

<map> Defines an image map with clickable areas, used with <area>. The name attribute links it to an <img> via usemap
(e.g., <map name="map"><area></map><img usemap="#map">). Enables interactive images.

<mark> Highlights text for reference or emphasis, typically with a yellow background
(e.g., <mark>Important</mark>). Introduced in HTML5 for search results or annotations, styled via CSS if needed.

<menu> Defines a list of commands or options, historically for context menus. In HTML5, its use is experimental
(e.g., <menu><li>Option</li></menu>). Rarely used; <ul> is more common for menus.

<meter> Represents a scalar value within a range
(e.g., progress), introduced in HTML5. Attributes like value, min, and max define it
(e.g., <meter min="0" max="100" value="75">75%</meter>). Visual gauge for data.

<nav> Defines a navigation section with links, introduced in HTML5
(e.g., <nav><a href="/">Home</a></nav>). Marks primary navigation areas, improving accessibility and semantic structure.

<noframes> Deprecated in HTML5. Provided fallback content for browsers not supporting <frameset>. Obsolete with the removal of frames; modern sites use <iframe> or CSS layouts instead.

<ol> Creates an ordered (numbered) list, using <li> for items
(e.g., <ol><li>First</li></ol>). Attributes like type ("1," "A") or start customize numbering. Ideal for steps or rankings.

<optgroup> Groups options within a <select> dropdown, with a label attribute
(e.g., <optgroup label="Colors"><option>Red</option></optgroup>). Organizes long lists for better usability.

<option> Defines an item in a <select> or <datalist>
(e.g., <select><option value="1">One</option></select>). The value attribute sends data, while text is displayed to users.

<output> Displays the result of a calculation or user action, introduced in HTML5
(e.g., <output name="result">10</output>). Often paired with JavaScript in forms for dynamic updates.

<p> Defines a paragraph, separating blocks of text with spacing. Essential for readable content
(e.g., <p>This is a story.</p>). Browsers add margins by default, adjustable with CSS.

<param> Sets parameters for an <object>, self-closing
(e.g., <param name="autoplay" value="true">). Used to configure embedded content like videos or applets, though less common today.

<picture> Contains multiple <source> elements for responsive images, introduced in HTML5. Fallback <img> ensures compatibility
(e.g., <picture><source media="(max-width: 600px)" srcset="small.jpg"><img src="default.jpg"></picture>).

<pre> Displays preformatted text, preserving spaces and line breaks
(e.g., <pre> Code here</pre>). Often used with <code> for code blocks, rendered in monospace font by default.

<progress> Shows the progress of a task, like a loading bar, introduced in HTML5. Attributes value and max define it
(e.g., <progress value="50" max="100"></progress>). Dynamic with JavaScript.

<q> Marks a short, inline quotation, typically with quotation marks added by browsers
(e.g., <q>Hello</q> becomes "Hello"). The cite attribute can link to the source, unlike <blockquote> for longer quotes.

<rp> Provides fallback parentheses for ruby annotations, used with < ruby> and <rt>. Ignored by browsers supporting ruby
(e.g., <ruby><rp>(</rp><rt>kan</rt><rp>)</rp></ruby>). For East Asian text.

<rt> Defines ruby text
(e.g., pronunciation) for a <ruby> base, appearing above or beside it
(e.g., <ruby><rt>kan</rt></ruby>). Used in East Asian typography, especially Japanese or Chinese.

<ruby> Represents ruby annotations for East Asian characters, combining base text with <rt> or <rp>
(e.g., <ruby><rt>kan</rt></ruby>). Displays pronunciation or translation, common in educational content.

<s> Marks text as no longer accurate or relevant, shown with a strikethrough
(e.g., <s>Old</s> New). Less semantic than <del>, often used for visual updates like discounts or corrections.

<samp> Represents sample output from a program or script, typically in monospace
(e.g., <samp>Error 404</samp>). Used in documentation to show expected results, often with <pre> for formatting.

<search> An experimental HTML5.3 tag for defining a search section. Not widely supported yet
(e.g., <search><input type="search"></search>). Intended to improve semantic markup for search features.

<section> Defines a thematic grouping of content, often with a heading, introduced in HTML5
(e.g., <section><h2>News</h2><p>...</p></section>). More specific than <div>, enhances document structure.

<select> Creates a dropdown menu with <option> or <optgroup> elements
(e.g., <select><option>Choice</option></select>). Attributes like multiple allow multiple selections, used in forms.

<small> Reduces text size for side comments, disclaimers, or fine print
(e.g., <small>Copyright 2025</small>). In HTML5, it has semantic meaning for less important content, not just styling.

<source> Specifies multiple media resources for <picture>, <audio>, or <video>
(e.g., <video><source src="movie.mp4" type="video/mp4"></video>). Self-closing, enables responsive or format options.

<span> An inline container for grouping elements, often for styling or scripting
(e.g., <span style="color: red">Text</span>). Lacks semantic meaning, making it a versatile but generic tool.

<strike> Deprecated in HTML5. Applied a strikethrough to text
(e.g., <strike>Old</strike>). Replaced by <s> or <del> for clearer intent—<s> for inaccuracy, <del> for edits.

<strong> Indicates strong importance, typically bolded
(e.g., <strong>Warning!</strong>). Semantically significant for accessibility, unlike <b>, conveying urgency or priority to screen readers.

<sub> Defines subscript text, appearing below the baseline
(e.g., H<sub>2</sub>O for water). Used in chemical formulas or footnotes, styled smaller and lower by browsers.

<summary> Provides a visible heading for a <details> element, clickable to expand content
(e.g., <details><summary>Click</summary>More</details>). Introduced in HTML5 for interactive disclosure.

<sup> Defines superscript text, appearing above the baseline
(e.g., x<sup>2</sup> for squared). Common in math (exponents) or citations, styled smaller and raised by browsers.

<table> Creates a table for tabular data, using <tr>, <th>, and <td>
(e.g., <table><tr><td>Cell</td></tr></table>). Structured with <thead>, <tbody>, and <tfoot> for clarity.

<tbody> Groups the body content of a <table>, separating it from <thead> and <tfoot>
(e.g., <table><tbody><tr><td>Data</td></tr></tbody></table>). Enhances table semantics.

<td> Defines a data cell in a <table> row
(e.g., <tr><td>Value</td></tr>). Can span multiple rows or columns with rowspan or colspan attributes, holding text, images, or other elements.

<template> Holds HTML content that isn’t rendered until activated by JavaScript, introduced in HTML5
(e.g., <template><p>Hidden</p></template>). Useful for cloning or dynamic content generation.

<textarea> Creates a multiline text input field in forms
(e.g., <textarea rows="4" cols="50">Text</textarea>). Attributes like placeholder or maxlength customize it, ideal for comments or messages.

<tfoot> Groups footer content in a <table>, often for summaries or totals
(e.g., <table><tfoot><tr><td>Sum</td></tr></tfoot></table>). Placed after <tbody> for semantic clarity.

<th> Defines a header cell in a <table>, bold and centered by default
(e.g., <tr><th>Name</th></tr>). The scope attribute
(e.g., "col") improves accessibility for screen readers.

<thead> Groups header content in a <table>, typically containing <th> elements
(e.g., <table><thead><tr><th>Title</th></tr></thead></table>). Separates headers from body and footer.

<time> Represents a specific time or date, introduced in HTML5. The datetime attribute provides machine-readable format
(e.g., <time datetime="2025-03-14">March 14, 2025</time>). Boosts semantic data.

<title> Sets the document’s title, displayed in the browser tab or bookmarks. Required in <head>
(e.g., <title>My Page</title>). Critical for SEO and user navigation, only one per document.

<tr> Defines a row in a <table>, containing <th> or <td> cells
(e.g., <table><tr><td>Cell</td></tr></table>). Forms the horizontal structure of tabular data.

<track> Adds text tracks (subtitles, captions) to <video> or <audio>, self-closing
(e.g., <video><track src="subtitles.vtt" kind="subtitles" srclang="en"></video>). Enhances media accessibility.

<tt> Deprecated in HTML5. Rendered text in teletype (monospace) style, mimicking typewriter output
(e.g., <tt>Text</tt>). Replaced by <code> or <kbd> for semantic clarity in modern web design.

<u> Underlines text, historically for styling
(e.g., <u>Underline</u>). In HTML5, it implies non-standard emphasis; <ins> or CSS (text-decoration: underline;) are preferred for edits or styling.

<ul> Creates an unordered (bulleted) list with <li> items
(e.g., <ul><li>Item</li></ul>). Bullets can be styled with CSS, suitable for non-sequential content like menus or features.

<var> Represents a variable in programming or math, often italicized
(e.g., <var>x</var> in x = 5). Used in technical documentation to distinguish variables from regular text.

<video> Embeds video content
(e.g., MP4), with attributes like controls, src, and poster
(e.g., <video controls src="movie.mp4"></video>). Supports <source> and <track> for flexibility and accessibility.

<wbr> Suggests a word break opportunity in long words, self-closing
(e.g., Super<wbr>califragilistic). Helps text wrap cleanly without altering display unless needed, useful for URLs or technical terms.