Certainly! Here’s an expanded list of 100 HTML tags with corresponding code examples and brief descriptions:100 most popular HTML Tags
1. <html>: Represents the root element of an HTML document.
htmlCopy code<html>
<!-- HTML document content goes here -->
</html>
2. <head>: Contains metadata and other non-visible elements for the document.
htmlCopy code
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<!-- Additional metadata and links go here -->
</head>
3. <title>: Defines the title of the document, displayed in the browser’s title bar or tab.
htmlCopy code
<head>
<title>My Website</title>
</head>
4. <meta>: Defines metadata about an HTML document, such as character encoding or viewport settings.
htmlCopy code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
5. <link>: Specifies an external CSS file to be used for styling the document.
htmlCopy code
<head>
<link rel="stylesheet" href="styles.css">
</head>
6. <style>: Contains CSS rules to be applied to the document.
htmlCopy code
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
7. <script>: Embeds or references an external JavaScript file.
htmlCopy code
<body>
<script src="script.js"></script>
</body>
8. <body>: Represents the content of the HTML document.
htmlCopy code
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
9. <header>: Represents the introductory content, typically containing a logo or site title.
htmlCopy code
<header>
<h1>My Website</h1>
</header>
<nav>: Defines a set of navigation links.
htmlCopy code
<nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<main>: Contains the main content of the document.
htmlCopy code
<main>
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
</main>
<section>: Defines a section within the document.
htmlCopy code
<section>
<h2>About Me</h2>
<p>I am a web developer.</p>
</section>
<article>: Represents a self-contained composition within a document, such as a blog post.
htmlCopy code
<article>
<h2>My Blog Post</h2>
<p>This is the content of my blog post.</p>
</article>
<aside>: Defines content that is tangentially related to the main content, such as a sidebar.
htmlCopy code
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="article1.html">Article 1</a></li>
<li><a href="article2.html">Article 2</a></li>
<li><a href="article3.html">Article 3</a></li>
</ul>
</aside>
<footer>: Represents the footer of a document or a section.
htmlCopy code
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
<h1>to<h6>: Heading tags, used to define different levels of headings.
htmlCopy code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>: Represents a paragraph of text.
htmlCopy code
<p>This is a paragraph of text.</p>
<br>: Inserts a line break within a text block.
htmlCopy code
<p>This is the first line.<br>This is the second line.</p>
<hr>: Represents a horizontal rule, typically used for visual separation.<hr>
htmlCopy code
<a>: Defines a hyperlink.
htmlCopy code
<a href="https://www.example.com">Visit Example</a>
21. <img>: Inserts an image into the document.
htmlCopy code
<img src="image.jpg" alt="Description of the image">
22. <div>: Defines a generic container or division.
htmlCopy code<div>
<!-- Content goes here -->
</div>
23. <span>: Represents a small inline section of text or a container for inline elements.
htmlCopy code
<p>My name is <span class="highlight">John</span>.</p>
24. <ul>: Defines an unordered list.
htmlCopy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
25. <ol>: Defines an ordered list.
htmlCopy code
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
26. <li>: Represents an item in a list.
htmlCopy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
27. <dl>: Defines a description list.
htmlCopy code
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
28. <dt>: Defines a term in a description list.
htmlCopy code
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
<dd>: Defines a description in a description list.
htmlCopy code
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
30. <table>: Defines a table.
htmlCopy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
31. <tr>: Defines a table row.
htmlCopy code
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
32. <th>: Defines a table header cell.
htmlCopy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
33. <td>: Defines a table data cell.
htmlCopy code
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
34. <caption>: Defines a caption for a table.
htmlCopy code
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
35. <form>: Represents a form for user input.
htmlCopy code
<form>
<!-- Form fields and buttons go here -->
</form>
36. <input>: Defines an input field within a form.
htmlCopy code<input type="text" name="username" placeholder="Enter your username">
37. <label>: Associates a label with a form element.
htmlCopy code
<label for="username">Username:</label>
<input type="text" id="username" name="username">
38. <select>: Creates a dropdown list within a form.
htmlCopy code
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
<option>: Defines an option within a<select>element.
htmlCopy code
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
<textarea>: Creates a multiline text input field.
htmlCopy code
<textarea name="message" rows="4" cols="30">Enter your message here</textarea>
<button>: Represents a clickable button.
htmlCopy code
<button type="submit">Submit</button>
<fieldset>: Groups related form elements together.
htmlCopy code
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<!-- Additional form elements go here -->
</fieldset>
<legend>: Defines a caption for a<fieldset>element.
htmlCopy code
<fieldset>
<legend>Contact Information</legend>
<!-- Form elements go here -->
</fieldset>
<iframe>: Embeds an external webpage within the current document.
htmlCopy code
<iframe src="https://www.example.com"></iframe>
<audio>: Embeds audio content within the document.
htmlCopy code
<audio src="audio.mp3" controls></audio>
<video>: Embeds video content within the document.
htmlCopy code
<video src="video.mp4" controls></video>
<source>: Specifies multiple media resources for<video>or<audio>elements.
htmlCopy code
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
<canvas>: Defines an area for graphics rendering using JavaScript.
htmlCopy code
<canvas id="myCanvas"></canvas>
<svg>: Defines an inline SVG (Scalable Vector Graphics) image.
htmlCopy code
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
50. <map>: Defines a client-side image map.
htmlCopy code
<img src="image.jpg" alt="Map" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,50,50" href="area1.html">
<area shape="circle" coords="100,100,50" href="area2.html">
</map>
51. <area>: Defines an area within an image map.
htmlCopy code
<map name="map">
<area shape="rect" coords="0,0,50,50" href="area1.html">
<area shape="circle" coords="100,100,50" href="area2.html">
</map>
52. <embed>: Embeds external content or media.
htmlCopy code
<embed src="content.swf">
53. <object>: Defines an embedded object, such as a Flash animation or a Java applet.
htmlCopy code
<object data="animation.swf" type="application/x-shockwave-flash"></object>
54. <param>: Defines parameters for an embedded object within an <object> element.
htmlCopy code
<object data="animation.swf" type="application/x-shockwave-flash">
<param name="autoplay" value="true">
</object>
55. <time>: Represents a specific date and/or time.
htmlCopy code
<p>Today is <time datetime="2023-07-12">July 12, 2023</time>.</p>
<mark>: Highlights a portion of text for reference or emphasis.
htmlCopy code
<p>This is <mark>important</mark> information.</p>
<strong>: Indicates strong importance or emphasis.
htmlCopy code
<p><strong>Important:</strong> Pay attention to this.</p>
<em>: Indicates emphasis or importance.
htmlCopy code
<p>It was a <em>great</em> performance.</p>
<b>: Renders text in a bold font.
htmlCopy code
<p><b>This text is bold.</b></p>
60. <i>: Renders text in italicized font.
htmlCopy code
<p><i>This text is italicized.</i></p>
61. <u>: Renders text with an underline.
htmlCopy code
<p><u>This text is underlined.</u></p>
62. <s>: Renders text with a strikethrough line.
htmlCopy code
<p><s>This text is strikethrough.</s></p>
63. <sub>: Renders text as subscript.
htmlCopy code
<p>This is a<sub>subscript</sub> text.</p>
64. <sup>: Renders text as superscript.
htmlCopy code
<p>This is a<sup>superscript</sup> text.</p>
65. <blockquote>: Represents a block quotation.
htmlCopy code
<blockquote>
<p>This is a block quote.</p>
</blockquote>
66. <code>: Represents a fragment of computer code.
htmlCopy code
<p>To install the package, run <code>npm install package-name</code>.</p>
67. <pre>: Renders preformatted text, preserving whitespace and line breaks.
htmlCopy code
<pre>
function greet() {
console.log("Hello, World!");
}
</pre>
68. <abbr>: Defines an abbreviation or acronym.
htmlCopy code
<p><abbr title="World Wide Web">WWW</abbr></p>
69. <address>: Defines contact information for the author/owner of a document.
htmlCopy code
<address>
<p>John Doe</p>
<p>Email: john@example.com</p>
</address>
70. <cite>: Specifies a citation or reference to a creative work.
htmlCopy code
<p><cite>The Great Gatsby</cite> by F. Scott Fitzgerald</p>
71. <kbd>: Indicates input that is to be entered by the user.
htmlCopy code
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<var>: Represents a variable in programming or mathematics.
htmlCopy code
<p>The value of x is <var>x</var>.</p>
<samp>: Represents a sample output or example.
htmlCopy code
<p>The output is: <samp>Hello, World!</samp></p>
74. <dfn>: Defines a term that is being defined within a document.
htmlCopy code
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
75. <ruby>: Represents a ruby annotation, used for phonetic annotations of East Asian characters.
htmlCopy code
<ruby>
æ¼¢ <rp>(</rp><rt>HÃ n</rt><rp>)</rp>
å— <rp>(</rp><rt>jÄ«</rt><rp>)</rp>
</ruby>
76. <rt>: Represents the pronunciation of characters in a ruby annotation.
htmlCopy code
<ruby>
æ¼¢ <rp>(</rp><rt>HÃ n</rt><rp>)</rp>
å— <rp>(</rp><rt>jÄ«</rt><rp>)</rp>
</ruby>
77. <rp>: Represents parentheses around the ruby text in a ruby annotation.
htmlCopy code
<ruby>
æ¼¢ <rp>(</rp><rt>HÃ n</rt><rp>)</rp>
å— <rp>(</rp><rt>jÄ«</rt><rp>)</rp>
</ruby>
78. <bdo>: Overrides the text directionality of its parent element.
htmlCopy code
<p><bdo dir="rtl">This text is right-to-left.</bdo></p>
79. <big>: Increases the font size of the text.
htmlCopy code
<p><big>This text is bigger.</big></p>
80. <small>: Decreases the font size of the text.
htmlCopy code
<p><small>This text is smaller.</small></p>
81. <wbr>: Defines a word break opportunity within a line of text.
htmlCopy code
<p>Thisisaverylongwordthat<span>wbr</span>shouldbreakattheendoftheline.</p>
82. <del>: Renders deleted or struck-through text.
htmlCopy code
<p><del>This text has been deleted.</del></p>
83. <ins>: Renders inserted or underlined text.
htmlCopy code
<p><ins>This text has been inserted.</ins></p>
84. <q>: Represents a short quotation.
htmlCopy code
<p><q>This is a short quotation.</q></p>
85. <span>: Represents an inline section of text or a container for inline elements.
htmlCopy code
<p>My name is <span class="highlight">John</span>.</p>
86. <font>: Defines font-related settings for text.
htmlCopy code
<p><font color="red">This text is red.</font></p>
87. <base>: Specifies the base URL and target for all relative URLs in a document.
htmlCopy code
<head>
<base href="https://www.example.com">
</head>
88. <bgsound>: Embeds background sound in a webpage (Internet Explorer only, deprecated).
htmlCopy code
<bgsound src="sound.wav">
89. <marquee>: Creates a scrolling or moving text or image (deprecated).
htmlCopy code
<marquee behavior="scroll" direction="left">Scrolling text goes here</marquee>
90. <menu>: Represents a group of commands or options (deprecated).
htmlCopy code
<menu>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</menu>
91. <dir>: Defines a directory list (deprecated).
htmlCopy code
<dir>
<li>File 1</li>
<li>File 2</li>
<li>File 3</li>
</dir>
92. <center>: Centers the content horizontally within its container (deprecated).
htmlCopy code
<center>
<h1>Centered Heading</h1>
</center>
93. <applet>: Embeds a Java applet (deprecated).
htmlCopy code
<applet code="Applet.class" width="200" height="200">
Java applet content goes here
</applet>
94. <frame>: Defines a single frame within a frameset (deprecated).
htmlCopy code
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
95. <frameset>: Defines a set of frames (deprecated).
htmlCopy code
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
96. <noframes>: Specifies alternate content to be displayed in browsers that do not support frames (deprecated).
htmlCopy code
<noframes>
<p>This page requires a browser that supports frames.</p>
</noframes>
97. <isindex>: Defines a single-line input field and a submit button (deprecated).
htmlCopy code
<isindex prompt="Enter your query:">
98. <spacer>: Inserts empty space or a horizontal/vertical rule (deprecated).
htmlCopy code
<spacer type="horizontal" size="20">
99. <basefont>: Specifies the base font size, face, and colour for text (deprecated).
htmlCopy code
<basefont size="4" face="Arial" color="red">
100. <noframes>: Specifies alternate content to be displayed in browsers that do not support frames (deprecated).
htmlCopy code<noframes>
<p>This page requires a browser that supports frames.</p>
</noframes>
Please note: some of these tags are deprecated or obsolete and may not be widely supported by modern web browsers. It’s important to use current HTML standards and practices when developing web pages.
