HTML Tags : Part-1 || Part-2 || Part-3 || Part-4 || Part-5 || Part-6
All HTML Tags with Examples – Part 1
HTML provides many different tags for creating the structure and content of a web page. Each tag has a specific purpose. Some tags are used for headings and paragraphs, while others are used for links, images, forms, tables, multimedia, page sections and interactive features.
In this series, we will learn HTML tags one by one with simple examples. The examples are designed especially for beginners, so you can copy them into an HTML file and test them directly in your browser.
Important: In modern HTML, it is better to use current, semantic HTML elements. Some older HTML tags are obsolete and should not be used in new websites. Those tags will be covered separately in the final part for reference.
1. <html> Tag
The <html> tag is the root element of an HTML document. All other HTML elements are placed inside it.
Example
<html> <body> <h1>My Website</h1> </body></html>
The complete webpage normally starts with the <html> element.
2. <head> Tag
The <head> tag contains information about the HTML document that is generally not displayed as the main visible page content.
It can contain the page title, metadata, stylesheets and scripts.
Example
<head> <title>My Website</title></head>
3. <title> Tag
The <title> tag defines the title of the webpage. It is normally displayed in the browser tab.
Example
<title>My First Website</title>
4. <body> Tag
The <body> tag contains the main visible content of the webpage.
Example
<body> <h1>Welcome to My Website</h1> <p>This is my webpage.</p></body>
Headings, paragraphs, images, links, lists and many other visible elements are normally placed inside <body>.
5. <meta> Tag
The <meta> tag provides metadata about the HTML document.
A very common example is defining the character encoding:
<meta charset="UTF-8">
Another common example is the viewport setting used for responsive webpages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
These tags are normally placed inside <head>.
6. <link> Tag
The <link> tag is used to establish relationships between the current document and an external resource.
One of its most common uses is connecting an external CSS file.
Example
<link rel="stylesheet" href="style.css">
This tells the browser to load style.css as the page’s stylesheet.
7. <style> Tag
The <style> tag allows CSS to be written directly inside an HTML document.
Example
<style> body { font-family: Arial, sans-serif; }</style>
The <style> element is normally placed inside the <head>.
8. <script> Tag
The <script> tag is used to include or write JavaScript.
Example
<script> alert("Hello!");</script>
JavaScript can make webpages interactive and dynamic.
9. <h1> Tag
The <h1> tag represents the highest-level heading in a page.
Example
<h1>Learn HTML</h1>
It is commonly used for the main heading of a page.
10. <h2> Tag
The <h2> tag is used for a major subsection.
Example
<h2>HTML Basics</h2>
A page can contain multiple <h2> headings when the content has multiple major sections.
11. <h3> Tag
The <h3> tag is generally used for a subsection under an <h2>.
Example
<h3>HTML Elements</h3>
12. <h4> Tag
The <h4> tag represents a lower-level heading.
Example
<h4>Text Elements</h4>
13. <h5> Tag
The <h5> tag represents another lower-level heading.
Example
<h5>Important Text Tags</h5>
14. <h6> Tag
The <h6> tag is the lowest heading level in HTML.
Example
<h6>Additional Information</h6>
HTML provides six heading levels: <h1> through <h6>.
15. <p> Tag
The <p> tag is used to create a paragraph.
Example
<p>HTML is used to create the structure of web pages.</p>
You can have multiple paragraphs on a webpage.
<p>This is the first paragraph.</p><p>This is the second paragraph.</p>
16. <br> Tag
The <br> tag creates a line break.
Example
<p>Hello<br>Welcome to my website.</p>
The text after <br> starts on a new line.
<br> is a void element, so it does not need a closing tag.
17. <hr> Tag
The <hr> element represents a thematic break between sections of content.
Example
<h2>HTML</h2><p>HTML creates the structure of a webpage.</p><hr><h2>CSS</h2><p>CSS is used to style the webpage.</p>
The browser generally displays a horizontal line between the two sections.
18. <div> Tag
The <div> element is a generic container used to group content.
Example
<div> <h2>About HTML</h2> <p>HTML is a markup language.</p></div>
<div> is commonly used when a more specific semantic element is not appropriate.
19. <span> Tag
The <span> element is a generic inline container.
Example
<p>This is <span>important</span> text.</p>
It is commonly used when you need to apply CSS or JavaScript to a particular piece of text.
20. <header> Tag
The <header> element represents introductory content for a page or section.
Example
<header> <h1>My Website</h1> <p>Learn HTML step by step.</p></header>
A header may contain a logo, heading, introductory text or navigation-related content.
21. <footer> Tag
The <footer> element represents footer information for a page or section.
Example
<footer> <p>© 2026 My Website</p></footer>
A footer commonly contains copyright information, contact details or related links.
22. <main> Tag
The <main> element represents the main content of the document.
Example
<main> <h1>HTML Tutorial</h1> <p>Learn HTML from the beginning.</p></main>
The main content should be the central content that is unique to that page.
23. <section> Tag
The <section> element represents a standalone section of related content.
Example
<section> <h2>About HTML</h2> <p>HTML is used to structure web pages.</p></section>
A section generally has a heading that identifies its topic.
24. <article> Tag
The <article> element represents a self-contained piece of content.
It can be used for blog posts, news articles, tutorials and similar content.
Example
<article> <h2>What is HTML?</h2> <p>HTML stands for HyperText Markup Language.</p></article>
25. <nav> Tag
The <nav> element represents a section containing important navigation links.
Example
<nav> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a></nav>
26. <aside> Tag
The <aside> element represents content that is related to the surrounding content but is not the main content.
It is often used for sidebars.
Example
<aside> <h2>Related Articles</h2> <ul> <li><a href="#">HTML Basics</a></li> <li><a href="#">CSS Basics</a></li> </ul></aside>
27. <address> Tag
The <address> element is used for contact information associated with a webpage or article.
Example
<address> Email: example@example.com<br> Phone: +91 9876543210</address>
28. <strong> Tag
The <strong> element indicates that its content has strong importance.
Example
<p><strong>Important:</strong> Save your HTML file before opening it.</p>
Browsers generally display the content in bold by default, but its meaning is more important than simply making text bold.
29. <em> Tag
The <em> element represents emphasis.
Example
<p>You <em>must</em> practice HTML regularly.</p>
Browsers generally display emphasized text in italic by default.
30. <b> Tag
The <b> element draws attention to text without adding the same semantic importance as <strong>.
Example
<p>This is <b>important information</b> for students.</p>
31. <i> Tag
The <i> element represents text set apart from the surrounding text for a different reason, such as a technical term or alternate voice.
Example
<p>The word <i>HTML</i> is commonly used in web development.</p>
32. <u> Tag
The <u> element represents text with a non-textual annotation.
Example
<p>This is <u>underlined text</u>.</p>
For purely decorative underlining, CSS is generally a better choice.
33. <s> Tag
The <s> element represents content that is no longer accurate or relevant.
Example
<p>Old price: <s>₹999</s></p><p>New price: ₹699</p>
It is not intended simply as a generic formatting tool.
34. <small> Tag
The <small> element represents side comments or small print.
Example
<p>Website Terms <small>Last updated in 2026.</small></p>
35. <mark> Tag
The <mark> element represents text that is highlighted because it is relevant to the reader.
Example
<p>HTML is a <mark>fundamental</mark> web technology.</p>
Browsers generally display marked text with a highlighted background.
36. <del> Tag
The <del> element represents content that has been deleted from a document.
Example
<p>Price: <del>₹1000</del> ₹800</p>
37. <ins> Tag
The <ins> element represents content that has been inserted into a document.
Example
<p>New price: <ins>₹800</ins></p>
38. <sub> Tag
The <sub> element displays text as subscript.
Example
<p>Water formula: H<sub>2</sub>O</p>
This is useful for mathematical and scientific notation.
39. <sup> Tag
The <sup> element displays text as superscript.
Example
<p>Einstein's equation: E = mc<sup>2</sup></p>
It can also be used for ordinal numbers:
<p>10<sup>th</sup> Class</p>
40. <blockquote> Tag
The <blockquote> element represents an extended quotation.
Example
<blockquote> Learning never stops.</blockquote>
It is useful when quoting a longer passage from another source.
41. <q> Tag
The <q> element represents a short inline quotation.
Example
<p>He said, <q>HTML is easy to learn.</q></p>
42. <cite> Tag
The <cite> element is used for the title of a cited creative work.
Example
<p>My favorite book is <cite>The Alchemist</cite>.</p>
43. <abbr> Tag
The <abbr> element represents an abbreviation or acronym.
Example
<p><abbr title="HyperText Markup Language">HTML</abbr> is used to create webpages.</p>
When the user points to the abbreviation, the full meaning can be displayed by the browser.
44. <code> Tag
The <code> element represents a fragment of computer code.
Example
<p>Use the <code><h1></code> tag for a main heading.</p>
45. <pre> Tag
The <pre> element represents preformatted text. Whitespace and line breaks are generally preserved.
Example
<pre>Name: RahulClass: 10Subject: Computer</pre>
It is especially useful for displaying code or text where spacing matters.
46. <kbd> Tag
The <kbd> element represents user input, usually from a keyboard.
Example
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
47. <samp> Tag
The <samp> element represents sample output from a computer program.
Example
<p>Computer output: <samp>Hello World!</samp></p>
48. <var> Tag
The <var> element represents a variable.
Example
<p>The value of <var>x</var> is 10.</p>
It is useful in mathematics and programming explanations.
49. <data> Tag
The <data> element associates visible content with a machine-readable value.
Example
<p>Product: <data value="101">HTML Book</data></p>
The visible text is HTML Book, while the machine-readable value is 101.
50. <time> Tag
The <time> element represents a specific time or date.
Example
<p>Published on <time datetime="2026-08-30">August 30, 2026</time>.</p>
The datetime attribute provides a machine-readable date or time.
51. <bdi> Tag
The <bdi> element isolates text that may have a different text direction from its surrounding content.
It can be useful when displaying user-generated content in languages with different writing directions.
Example
<p>User name: <bdi>Ali</bdi></p>
52. <bdo> Tag
The <bdo> element overrides the normal text direction.
Example
<p><bdo dir="rtl">Hello World</bdo></p>
The dir attribute determines the direction.
53. <wbr> Tag
The <wbr> element represents a possible line-break opportunity.
Example
<p> ThisIsAVeryLongWord<wbr>ThatMayNeedToBreak</p>
The browser may use the <wbr> position as a line-break opportunity when necessary.
54. HTML Comment
HTML comments are not elements, but they are an important part of writing HTML code.
Example
<!-- This is an HTML comment -->
Comments are not displayed as normal page content.
They are useful for adding notes to your code.
Part 1 Summary
In this part, we learned the basic HTML document structure, headings, paragraphs, semantic page sections and many important text-level HTML elements.
Some of the important tags covered in this part are:
| HTML Tag | Function |
|---|---|
<html> | Defines the root of an HTML document. |
<head> | Contains information about the webpage, such as title, metadata, CSS, and scripts. |
<title> | Defines the title displayed in the browser tab. |
<meta> | Provides metadata about the HTML document, such as character encoding and viewport settings. |
<link> | Connects the HTML document to external resources, commonly CSS files. |
<style> | Contains internal CSS styles for the webpage. |
<script> | Contains or links to JavaScript code. |
<body> | Contains all visible content of the webpage. |
<h1> to <h6> | Defines six levels of headings, from <h1> (most important) to <h6> (least important). |
<p> | Defines a paragraph. |
<br> | Inserts a line break. |
<hr> | Creates a thematic horizontal break between sections. |
<div> | Defines a generic block-level container used for grouping content. |
<span> | Defines a generic inline container used for styling or grouping small portions of text. |
<header> | Defines introductory content or a header for a page or section. |
<footer> | Defines footer content for a page or section. |
<main> | Defines the main content of a webpage. |
<section> | Defines a thematic section of content. |
<article> | Defines an independent piece of content, such as an article, blog post, or news story. |
<nav> | Defines a section containing navigation links. |
<aside> | Defines content related to the main content, such as a sidebar or related information. |
<address> | Provides contact information for a person, organization, or webpage. |
<strong> | Indicates text with strong importance; browsers usually display it in bold. |
<em> | Indicates emphasized text; browsers usually display it in italic. |
<b> | Makes text visually bold without adding semantic importance. |
<i> | Displays text in an alternate voice or mood; browsers usually display it in italic. |
<u> | Represents text that should be stylistically different, traditionally displayed with an underline. |
<s> | Represents text that is no longer accurate or relevant, usually displayed with a strikethrough. |
<small> | Represents side comments or text that should appear smaller than surrounding text. |
<mark> | Highlights or marks text, usually with a highlighted background. |
<del> | Represents text that has been deleted or removed. |
<ins> | Represents text that has been inserted into a document. |
<sub> | Displays subscript text, such as H2O. |
<sup> | Displays superscript text, such as x2. |
<blockquote> | Defines a longer quotation taken from another source. |
<q> | Defines a short inline quotation. |
<cite> | Identifies the title or name of a creative work or cited source. |
<abbr> | Defines an abbreviation or acronym. |
<code> | Represents a short piece of computer code. |
<pre> | Displays preformatted text while preserving spaces and line breaks. |
<kbd> | Represents user input, commonly keyboard input such as Ctrl + C. |
<samp> | Represents sample output from a computer program. |
<var> | Represents a variable in mathematical or programming contexts. |
<data> | Associates human-readable content with a machine-readable value. |
<time> | Represents a specific time, date, or duration. |
<bdi> | Isolates text so its direction can be handled independently from surrounding text. |
<bdo> | Overrides the normal text direction, such as left-to-right or right-to-left. |
<wbr> | Indicates a possible line-break opportunity within a word or long string. |
These tags form an important foundation for HTML. In the next part, we will cover links, images, image maps, audio, video, iframe, object, embed, picture, source, track and other multimedia and embedded-content elements.