HTML A To Z Tags List

0
Comprehensive HTML Tags List: Your Essential Guide to Web Page Structure and Styling

Comprehensive HTML Tags List: Your Essential Guide to Web Page Structure and Styling

Master the building blocks of the web with this in-depth guide to HTML tags.

Understanding HTML Tags: The Foundation of Web Content

HTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.

HTML tags are enclosed in angle brackets <> and usually come in pairs: an opening tag and a closing tag. The closing tag has the same text as the opening tag, but with an additional forward-slash /. The opening tag marks the beginning of an element, while the closing tag marks the end.

For example:

  • <p> is an opening tag for a paragraph.
  • </p> is the closing tag.

Important Note: Some tags are self-closing, meaning they don’t require a closing tag, such as <img> and <br>. This simplifies the syntax for elements that don't enclose content.

Essential tags for defining an HTML document structure include <!DOCTYPE html>, <html>, <head>, and <body>. These tags form the basic skeleton of every HTML document.

Basic HTML Tag Example: Building Your First Web Page

Let's see a basic example illustrating the use of these essential HTML tags:


<!DOCTYPE html>
<html>
<!-- The head tag contains meta-information about the HTML document -->
<head>
    <title>Welcome to GeeksCodes delivers easy-to-follow guides, clever coding tricks, cybersecurity knowledge, and marketing tactics to help you succeed in the world of technology.</title>
</head>
<!-- The body tag contains the visible page content -->
<body>
    <h2>GeeksCodes</h2>
    <p>
        Whether you're diving into programming languages, sharpening your Kali Linux skills, or mastering digital marketing, GeeksCodes provides valuable tips and tricks to enhance your expertise.
    </p>
</body>
</html>
            

This simple example demonstrates how the <head> tag holds document-level metadata like the title, while the <body> tag contains the actual content displayed to the user, such as headings (<h2>) and paragraphs (<p>).

A to Z HTML Tags: An Extensive Reference Guide

Below is an extensive list of HTML tags, from A to Z. Whether you are just starting out or need a quick reference, this list has you covered with descriptions and syntax examples.

Tag Description Syntax
!DOCTYPE html According to the HTML specification or standards, every HTML document requires a document type declaration. <!DOCTYPE html>
abbr The abbreviation tag in HTML is used to define the abbreviation or short form of an element, providing full text on hover. <abbr title="Full text"> ... </abbr>
acronym The acronym tag in HTML was used to define acronyms, giving useful information to browsers, translation systems, and search engines. (Deprecated in HTML5; use <abbr> instead) <acronym title="Full text"> ... </acronym>
address The address tag in HTML indicates the contact information of a person or an organization. <address> ... </address>
a (anchor) The anchor tag in HTML is used to create a hyperlink on the webpage, linking to other documents or resources. <a href="URL"> ...</a>
applet The applet tag in HTML was used to embed Java applets into any HTML document. (Discontinued starting from HTML5) <applet>....</applet>
area This area tag is used in an HTML document to define a clickable region within an image map. <area shape="rect|circle|poly" coords="x1,y1,x2,y2" href="URL" alt="Description">
article The <article> tag is one of the new sectioning elements in HTML5. It is used to represent a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. <article>..</article>
aside The <aside> tag is used to define content that is tangentially related to the content around it, such as a sidebar or pull quote. <aside>..</aside>
audio It is a useful tag if you want to add audio such as songs, interviews, etc., on your webpage. <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
base The HTML base tag is used to specify a base URI, or URL, for all relative links within a document. This URL will be the base URL for every relative link on the page. <base href = "URL">
basefont This tag was used to set the default text-color, font-size, & font-family of all the text in the browser. (Not supported in HTML5) <basefont>
bdi The bdi tag refers to Bi-Directional Isolation. It differentiates a text from other text that may be formatted in a different direction, especially useful for mixed-direction text. <bdi> ... </bdi>
bdo The bdo stands for Bi-Directional Override. This tag is used to explicitly override the current text direction. <bdo dir="rtl|ltr"> Contents... </bdo>
bgsound The bgsound tag was used to play a soundtrack in the background. (Not supported in HTML5) <bgsound src="">
big The big tag in HTML was used to increase the selected text size by one larger than the surrounding text. (Deprecated in HTML5; use CSS for styling) <big> Contents... </big>
blockquote The blockquote tag in HTML is used to display long quotations (a section that is quoted from another source), typically indented. <blockquote cite="Source URL"> Contents... </blockquote>
body The body tag in HTML is used to define the main content present inside an HTML page that is visible to the user. <body> Contents... </body>
b (bold) The bold tag in HTML is used to specify bold text without any extra importance (semantic meaning). <b>... </b>
br (break) The break tag inserts a single carriage return or line break in the document. This element has no end tag (self-closing). <br>
button The button tag in HTML is used to define a clickable button, often used within forms or for JavaScript interactions. <button type = "button|submit|reset">Click Me</button>
caption The caption tag is used to specify the caption for a table. Only one caption can be specified for one table. <caption>Table Caption</caption>
canvas It can be used to draw paths, boxes, texts, gradients, and add images dynamically via JavaScript. <canvas id="myCanvas" width="200" height="100"> Your browser does not support the canvas element. </canvas>
center The center tag in HTML was used to set the alignment of text in the center. (Not supported in HTML5; use CSS for alignment) <center> Contents.</center>
cite The cite tag in HTML is used to define the title of a work (e.g., a book, song, film). It typically displays the text in italic format. <cite>Content</cite>
code The code tag in HTML is used to define a piece of computer code. <code>Contents</code>
colgroup It is useful for applying styles to entire columns in a table, instead of repeating the styles for each column or for each row. <colgroup> <col span="2" style="background-color:red"> </colgroup>
col The col tag in HTML is used to set column properties for each column within a <colgroup> tag. <col attribute = "value">
!--...-- (comment) The comment tag is used to insert comments in the HTML code. These comments are not displayed by the browser. <!-- Your comment here -->
data The data element gives a machine-readable translation of a given content, primarily for JavaScript processing. <data value="value"> Contents </data>
datalist The datalist tag is used to provide an autocomplete feature and is used with an <input> tag so that users can easily fill data in forms by selecting from a predefined list. <datalist id="list">Contents</datalist>
dd The dd tag is used to denote the description or definition of an item in a description list (<dl>). <dd>Contents</dd>
dfn (define) The define tag in HTML represents the definition element and is used to represent a defining instance (the first time a term is introduced) in HTML. <dfn>Contents</dfn>
del (delete) Delete tag is used to mark a portion of text which has been deleted from the document, typically displayed with a strikethrough. <del>Contents</del>
details This tag is used to create an interactive widget that the user can open or close, revealing or hiding content. <details><summary>Title</summary>Contents</details>
dialog This tag is used to create a popup dialog box or modal window on a web page. This tag is new in HTML5. <dialog open> Contents... </dialog>
dir The dir tag was used to make a list of directory titles. (Not supported in HTML5; <ul> or CSS are used instead) <dir> Lists... </dir>
div The div tag is used in HTML to make divisions of content in the web page (text, images, header, footer, navigation bar, etc.). It's a generic container. <div>Content</div>
dl The dl tag in HTML is used to represent the description list. In HTML4.1, it defined a definition list, and in HTML5, it defines a description list. <dl> Contents... </dl>
dt The dt tag in HTML is used to specify the description term in a description list. It is used inside the <dl> element and is usually followed by a <dd> tag. <dt> Content... </dt>
embed It is used as a container for embedding external content like plug-ins (e.g., Flash animations, PDF documents). <embed src="file.swf" type="application/x-shockwave-flash">
fieldset The fieldset tag in HTML5 is used to make a group of related elements in a form, and it creates a border around the grouped elements. <fieldset>Contents</fieldset>
figcaption The figcaption tag in HTML is used to set a caption to the <figure> element in a document. This tag is new in HTML5. <figcaption> Figure caption </figcaption>
figure The figure tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or code listings in a document, often with a caption. <figure> Image content... </figure>
font The font tag in HTML was used to control the text-color, font-size, & font-family. (Deprecated in HTML5; use CSS for styling) <font attribute = "value"> Content </font>
footer The footer tag in HTML is used to define a footer for an HTML document or a section. This section typically contains authorship information, copyright data, or related links. <footer> ... </footer>
form This form is used basically for the registration process, logging into your profile on a website, or creating your profile on a website, etc. It collects user input. <form action="submit.php" method="post"> Form Content... </form>
frame HTML Frames were used to divide the web browser window into multiple sections. (Not supported in HTML5) <frame/>
frameset The frameset element contained one or more frame elements. It was used to specify the number of rows and columns in a frameset with their pixel spaces. (Not supported in HTML5) <frameset cols = "pixels|%|*">
head The head tag in HTML is used to define the head portion of the document which contains meta-information related to the document, such as title, stylesheets, and scripts. <head>...</head>
header The header tag is used to contain the introductory content of a section or document, often including the title, headings, and navigational elements. <header> ...</header>
h1 to h6 (heading) An HTML heading tag is used to define the headings of a page. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level of importance and h6 being the least. <h1>Heading1</h1>
<h2>Heading2</h2> etc.
hgroup The hgroup tag in HTML was used to wrap one or more heading elements from <h1> to <h6>, such as a main heading and a sub-heading. (Deprecated in HTML5) <hgroup> ... </hgroup>
hr The hr tag in HTML stands for horizontal rule and is used to insert a thematic break or horizontal line. <hr>
html The html tag in HTML is used to define the root of HTML and XHTML documents. It is the topmost element. <html> Contents </html>
iframe The iframe tag defines a rectangular region within the document in which the browser can display a separate document or external web page. <iframe src="URL" title="description"></iframe>
img (image) The HTML Image tag is used to embed an image into an HTML document. It's a self-closing tag. <img src="url" alt="some_text" width="" height="">
input The input tag is used within a <form> element to declare input controls that allow users to input data (e.g., text fields, checkboxes, radio buttons). <input type = "text|password|submit|checkbox|radio" .... />
ins The ins tag is typically used to mark a range of text that has been added to the document, usually displayed with an underline. <ins> Contents... </ins>
isindex The isindex tag was used to query any document through a text field. (Deprecated in HTML5; use <input type="search"> instead) <isindex prompt="search">
i (italic) This tag is generally used to display text in an italic format, often for technical terms, phrases, or important words from a different language. <i> Contents</i>
kbd The text enclosed within kbd tag is typically displayed in the browser’s default monospace font, indicating user input from a keyboard. <kbd> text content ... </kbd>
keygen The keygen tag in HTML was used to specify a key-pair generator field in a form. When a form was submitted, two keys were generated: a private key and a public key. (Deprecated in HTML5) <keygen name = "name">
label The label tag in HTML is used to provide a usability improvement for mouse users by associating a label with a form control. <label for="inputID"> form content... </label>
legend The legend tag is used to define the title for the child contents within a <fieldset> element. <legend> Text </legend>
li (list) The list tag in HTML is used to define a list item in an HTML document. It is used within an Ordered List <ol> or Unordered List <ul>. <li> List Items </li>
link The <link> tag in HTML is used to link external resources, such as stylesheets or icons, to the HTML document, typically placed within the <head> section. <link rel="stylesheet" href="styles.css">
main The main tag is used to give the main, dominant content of the <body> of a document. The content inside the <main> element should be unique to the document. <main>Contents</main>
map The <map> tag defines a client-side image map (an image with clickable areas). It works with <area> tags. <map name="planetmap"> ... </map>
mark The mark tag in HTML is used to define the marked or highlighted text, often for emphasis or relevance. <mark> Contents... </mark>
marquee The marquee tag in HTML was used to create scrolling text or images on a webpage. It scrolls either horizontally or vertically. (Deprecated in HTML5; use CSS animations or JavaScript instead) <marquee>Contents</marquee>
menuitem The menuitem tag was used to define a command or menu item that the user could utilize from a popup menu. (Not supported in HTML5) <menuitem label="" icon="" type> </menuitem>
meta The meta tag is regularly used to give keywords, descriptions, author information, and other metadata that might be used by the browser to render the document correctly or by search engines. <meta attribute-name="value">
meter It is used to define the scalar measurement within a known range (a gauge). It also supports a fractional value. <meter value="0.6" min="0" max="1">60%</meter>
nav The nav tag is used for declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables users to navigate the site. <nav> Links... </nav>
nobr The nobr tag was used to create a single line of text that would not break, regardless of how long the statement was. This tag was used with the <wbr> tag. (Not supported in HTML5; use CSS white-space: nowrap;) <nobr> Statement </nobr>
noembed The noembed tag was used to show alternative content for browsers that did not support the <embed> tag. (Deprecated in HTML5) <noembed> Element </noembed>
noscript The noscript tag in HTML is used to display alternative content for those browsers which do not support the script tag or if the user has disabled scripts. <noscript> Contents... </noscript>
object The object tag is an HTML tag used to embed external content like multimedia (audio, videos), images, PDFs, and Flash on web pages. <object data="file.pdf" type="application/pdf">...</object>
ol (ordered list) The ordered list tag in HTML is used to create a numbered list of items. <ol> <li>Item 1</li> </ol>
optgroup This tag is used to create a group of related options within a drop-down list (<select>). <optgroup label="Group Name">...</optgroup>
option The option tag in HTML is used to define an option within a drop-down menu (<select>). <option value="value"> Contents... </option>
output The output tag in HTML is used to represent the result of a calculation performed by a client-side script such as JavaScript. <output for="input1 input2"> Results... </output>
p (paragraphs) The <p> tag in HTML defines a paragraph. These have both opening and closing tags. <p> Content </p>
param The param tag in HTML is used to define a parameter for plug-ins which is associated with an <object> or <applet> (deprecated) element. <param name="" value="">
picture The <picture> element allows you to display different images for different devices or screen sizes. <picture> <source srcset="img_small.jpg" media="(max-width: 600px)"> <img src="img_large.jpg" alt="Description"> </picture>
pre The pre tag in HTML is used to define a block of preformatted text which preserves the text spaces and line breaks exactly as they are written in the HTML source code. <pre> Contents... </pre>
progress It is used to represent the progress of a task. It also defines how much work is done and how much is left (e.g., for a file download). <progress value="70" max="100">70%</progress>
q The q tag is a standard quotation tag and is used for short inline quotations, typically enclosed in quotation marks by the browser. <q> Contents... </q>
rp The rp tag in HTML is used to provide parentheses around a ruby main text which defines the information, for browsers that don't support ruby annotations. <rp>(</rp> Explanation... <rp>)</rp>
rt The rt tag in HTML is used to define the explanation or pronunciation of the ruby annotation, which is a small text attached to the main text. <rt> Explanation... </rt>
ruby The ruby tag in HTML is used to specify ruby annotation, which is a small text attached with the main text to specify the meaning or pronunciation of the main text, common in East Asian typography. <ruby> Main Text <rt>Explanation</rt> </ruby>
s This tag is used to specify that the text content is no longer correct or accurate, typically displayed with a strikethrough. This tag is similar but slightly different from <del> tag (<s> implies inaccuracy, <del> implies removal). <s> Contents... </s>
samp It is a phrase tag used to define the sample output text from a computer program. <samp> Contents... </samp>
script The script tag in HTML is used to define client-side script, such as JavaScript, which can be embedded directly or linked externally. <script> Script Contents... </script>
section Section tag defines a generic standalone section of documents such as chapters, headers, footers, or any other sections of content. <section> Section Contents </section>
select The <select> tag is used to create a drop-down list. <select> <option>...</option> </select>
small The small tag in HTML is used to set small font sizes. It decreases the font size by one size (e.g., from medium to small, from x-large to large). <small> Contents... </small>
source The source tag in HTML is used to attach multiple multimedia files (audio, video, and picture sources) within <audio>, <video>, or <picture> elements. <source src="" type="">
spacer The spacer tag was used to create some white space. (Not supported in HTML5) <spacer type="" size="">
span The HTML span element is a generic inline container for inline elements and content, used for applying styles or scripting to a specific portion of text without breaking the flow. <span class="highlight">Some Text</span>
strike The HTML strike tag defined a strike or line through Text. (Deprecated in HTML5; use <s> or <del> or CSS text-decoration: line-through;) <strike> Contents </strike>
strong The strong tag in HTML is a phrase tag and is used to show the importance or strong emphasis of the text. Browsers typically render this text in bold. <strong> Contents... </strong>
style The style tag in HTML helps us to define internal CSS styles for the web page, typically placed within the <head> section. <style> tagname { property: value; } </style>
sub and sup Tags The <sub> tag is used to add a subscript text to the HTML document.
The <sup> tag is used to add superscript text to the HTML document.
<sub>subscript text</sub>
<sup>superscript text</sup>
summary The <summary> tag in HTML is used to define a visible heading or summary for the <details> element. <summary> Content </summary>
svg HTML SVG (Scalable Vector Graphics) is used to define vector-based graphics for the web. <svg height="" width="">...</svg>
table HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure, used to present tabular data. <table>... </table>
tbody The tbody tag in HTML is used to group the body content rows of an HTML table. <tbody> // Table contents </tbody>
td The table data tag is used to define a standard data cell in an HTML table. <td>........</td>
template The template tag in HTML is used to store HTML code fragments that are not rendered initially but can be cloned and inserted into an HTML document at runtime using JavaScript. <template> Contents </template>
textarea The <textarea> tag is used to define a multi-line text input control. <textarea rows="4" cols="50">Default text</textarea>
tfoot This tag is used in HTML table to group the footer content rows, often used with <thead> and <tbody>. <tfoot> // Table footer contents... </tfoot>
th The table header tag in HTML is used to set the header cell of a table. There are two types of cells in an HTML table: Header & Standard. <th> Contents... </th>
thead This tag is used in HTML tables to group the header content rows, often used with <tbody> and <tfoot>. <thead>Table head Contents...</thead>
time The time tag is used to display human-readable dates/times. It can also be used to encode dates and times in a machine-readable form for better accessibility and SEO. <time datetime="2025-06-25"> June 25, 2025 </time>
title The title tag in HTML is used to define the title of the HTML document. It sets the title that appears in the browser's tab or window title bar. <title> Title name </title>
tr The table row tag is used to define a row in an HTML table. The <tr> element contains multiple <th> or <td> elements. <tr>.....</tr>
track The track tag specifies text tracks for media components like <audio> and <video>, used for subtitles, captions, or descriptions. <track src="captions.vtt" kind="captions" label="English" default>
tt The tt tag is the abbreviation of teletype text. This tag is deprecated from HTML5. It was used for marking Keyboard input. (Deprecated in HTML5; use <kbd> or CSS for monospace font) <tt> Contents... </tt>
ul (unordered list) The unordered list tag in HTML is used to create a bulleted list of items. <ul> <li>Item 1</li> </ul>
u (underline) The underline tag in HTML stands for underline, and it’s used to underline the text enclosed within the <u> tag. (Semantic meaning less common; use CSS text-decoration: underline; for styling) <u> Contents... </u>
var It is a phrase tag used to specify a variable in a mathematical equation or in a computer program. <var> Contents... </var>
video HTML5 Video, along with knowing the different ways to add videos to the HTML page. <video src="video.mp4" controls> Your browser does not support the video tag. </video>
wbr The wbr tag is used to define a word break opportunity within text. It suggests a position within the text where the browser may optionally break a line if necessary. <wbr>
xmp The XMP tag was used to create any content in letter format, displaying text exactly as written, including HTML tags. (Deprecated in HTML5; use <pre> and escape HTML entities, or <code>) <xmp> statement </xmp>

Expert Tip: While some tags are deprecated, understanding their historical context can be valuable. For modern web development, prioritize HTML5 semantic tags and use CSS for styling whenever possible to ensure maintainability, accessibility, and optimal performance.

Tags

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
✨ Updates