Here is a list of some common HTML tags:
- <html> - defines the root of an HTML document
- <head> - contains meta information about the document
- <title> - defines the title of the document, which is displayed in the browser's title bar or tab
- <body> - contains the visible content of the HTML document
- <header> - defines a container for introductory content or a set of navigation links
- <nav> - defines navigation links
- <main> - defines the main content of a document
- <article> - defines a self-contained composition in a document, such as a blog post or forum post
- <section> - defines a grouping of content, such as chapters or sections of a book
- <aside> - defines content that is related to the main content, but can be considered separate from it
- <footer> - defines a container for the footer of a document or section
- <h1> - <h6> - defines headings
- <p> - defines a paragraph
- <a> - defines a hyperlink
- <img> - embeds an image in the document
- <ul> - defines an unordered list
- <ol> - defines an ordered list
- <li> - defines a list item
- <div> - defines a section of the document for grouping elements together
- <span> - defines a small section of the document for applying styles to specific text.
Note: This is not an exhaustive list and there are many more tags that are used for different purposes in HTML.
1.<html> - defines the root of an HTML document. It is the top-level element of an HTML document and is used to enclose all other elements.
Code:
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2.<head> - contains meta information about the document, such as the title, keywords, and character encoding. The content inside the <head> element is not displayed on the web page.
Code:
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<meta name="keywords" content="example, html">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
3.<title> - defines the title of the document, which is displayed in the browser's title bar or tab. It should be placed inside the <head> element.
Code:
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
4.<body> - contains the visible content of the HTML document. All the elements that you want to display on the web page should be placed inside the <body> element.
Code:
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of a web page.</p>
</body>
</html>
5.<header> - defines a container for introductory content or a set of navigation links. It is commonly used to contain the site logo, site title and site slogan.
Copy code
<header>
<h1>Example</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
6.<nav> - defines navigation links. It is used to create a section of a document that contains navigation links.
Code:
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
7.<main> - defines the main content of a document. It is used to enclose the main content of a document, and can be used to indicate to search engines and screen readers which content is most important.
Code:
<main>
<h1>Welcome to my website</h1>
<p>This is the main content of my website.</p>
</main>
8.<article> - defines a self-contained composition in a document, such as a blog post or forum post. It can be used to group together related content, such as a forum post and its comments.
Code:
<article>
<h2>Blog post title</h2>
<p>This is the content of the blog post. It can include text, images and other media.</p>
<footer>
<p>Written by John Doe</p>
<p>Published on January 22nd, 2023</p>
</footer>
</article>
In this example, the <article> tag is used to group the title, content and footer of a blog post together. This makes it easy to style or manipulate the entire post as a single unit. Additionally, this tag can be used to help search engines and screen readers to understand the content of a post as a self-contained unit.
Note that <article> tag is a semantic tag, which means it helps to give meaning and context to the content of the website.
9.<section> - defines a grouping of content, such as chapters or sections of a book. It is used to organize the content of a document into distinct sections.
Code:
<section>
<h2>Introduction</h2>
<p>This is the introduction of my article.</p>
</section>
<section>
<h2>Main Content</h2>
<p>This is the main content of my article.</p>
</section>
10.<aside> - defines content that is related to the main content, but can be considered separate from it. It is often used to create sidebars, which contain additional information or navigation links.
Code:
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
11.<footer> - defines a container for the footer of a document or section. It is typically used to contain information such as the author of the document, copyright information, and links to related documents.
Code:
<footer>
<p>Copyright © 2022 Example.com</p>
</footer>
12.<h1> - <h6> - defines headings. These tags are used to create headings of different levels, with h1 being the most important and h6 being the least important.
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>
13.<p> - defines a paragraph. It is used to create paragraphs of text.
Code:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
14.<a> - defines a hyperlink. It is used to create links to other pages or websites.
Code:
<a href="https://www.example.com">Visit Example.com</a>
15.<img> - embeds an image in the document. It is used to display images on a web page.
Code:
<img src="image.jpg" alt="Example Image">
16.<ul> - defines an unordered list. It is used to create a list of items, where the order of the items does not matter.
Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
17.<ol> - defines an ordered list. It is used to create a list of items, where the order of the items does matter.
Code:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
18.<li> - defines a list item. It is used to create a list item inside an unordered list (<ul>) or ordered list (<ol>).
Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
In this example, the <li> tag is used to create each item in the unordered list.
19.<div> - defines a section of the document for grouping elements together. It is a non-semantic tag which means it doesn't convey any meaning by itself, but it can be used to group elements together and apply styles to them using CSS.
Code:
<div id="header">
<h1>Welcome to my website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</div>
In this example, the <div> tag is used to group the header elements together and apply a specific id to it.
20.<span> - defines a small section of the document for applying styles to specific text. It is a non-semantic tag which means it doesn't convey any meaning by itself, but it can be used to select specific text and apply styles to it using CSS.
Code:
<p>This is an <span class="highlight">important</span> message.</p>
In this example, the <span> tag is used to select the word "important" and apply a specific class to it.
Note: Please note that this is not an exhaustive list and there are many more tags that are used for different purposes in HTML.