In this post, we’ll introduce you to 20 fundamental HTML tags every beginner should know, highlighting their functions and how they help build a solid web page.
1. < html > Tag
The < html > tag is the root element of any HTML document. It wraps all the content on your webpage and helps the browser understand that the document is written in HTML.
<html>
<!– Page content goes here –>
</html>
Function: Defines the start of an HTML document.
2. < head > Tag
The < head > tag contains metadata about the webpage, such as the title, character set, and links to external files (CSS, JavaScript).
<head>
<meta charset=”UTF-8″>
<title>Page Title</title>
</head>
Function: Holds information about the page that isn’t visible on the web page itself, but helps browsers and search engines interpret it.
3. < title > Tag
The < title > tag defines the title of the page, displayed in the browser tab and search engine results.
<title>SEO Best Practices for Beginners</title>
Function: Represents the title of the document, a critical component for search engines when determining your page’s content.
4. < meta > Tag
The < meta > tag provides metadata about the HTML document, such as description, keywords, and author. These tags help search engines better understand the content of the page.
<meta name=”description” content=”Learn SEO basics with these 20 HTML tags.”>
Function: Provides metadata that helps search engines index your page more accurately.
5. < h1 > , < h2 > and < h3 > Tags
The < h1 >, < h2 >, and < h3 > tags define headings of different levels. The < h1 > tag is the most important heading, typically used for the main title of the page, followed by < h2 > and < h3 > for subheadings.
<h1>SEO Best Practices</h1>
<h2>Understanding HTML Tags</h2>
Function: Organizes content and creates a hierarchy of importance. Search engines prioritize content in < h1 > tags for ranking purposes.
6. < p > Tag
The < p > tag defines paragraphs of text. It helps structure the content into readable sections.
<p>This is a paragraph.</p>
Function: Breaks content into smaller, digestible sections that are easy for both users and search engines to read.
7. < a > Tag
The < a > tag is used to create hyperlinks, which connect different parts of your website or external websites.
<a href=”https://www.example.com”>Click here to visit Example</a>
Function: Links text or images to other web pages. Descriptive anchor text is key for SEO.
8. < img > Tag
The < img > tag allows you to embed images in a webpage. It’s important to use the alt attribute for accessibility and SEO.
<img src=”image.jpg” alt=”An informative image about SEO”>
Function: Embeds images and provides a text alternative through the alt attribute to enhance search engine accessibility.
9. < ul > , < ol > and < li > Tags
The < ul > tag defines an unordered list, the < ol > tag defines an ordered list, and < li > defines a list item.
<ul>
<li>SEO Tips</li>
<li>HTML Tags</li>
</ul>
Function: Organizes content into lists, making it easier for search engines to understand key points.
10. < div > Tag
The < div > tag is a generic container used to group elements and apply styles or classes.
<div class=”content-section”>
<h2>HTML Basics</h2>
<p>Learn about HTML structure.</p>
</div>
Function: Helps structure and style content without affecting the page layout.
11. < span > Tag
The < span > tag is an inline container used for styling small portions of text or elements.
<span class=”highlight”>Important SEO Tip</span>
Function: Allows for styling and grouping inline content without affecting the document flow.
12. < strong > and < em > Tags
The < strong > tag highlights important content, typically displayed as bold, while the < em > tag emphasizes content, usually displayed as italic.
<p><strong>SEO</strong> is a critical element of online success.</p>
<p><em>Keywords</em> are the heart of SEO.</p>
Function: Both tags highlight text, signaling its importance to search engines for ranking.
13. < form > Tag
The < form > tag creates an HTML form for collecting user input, such as a contact form or search bar.
<form action=”/submit” method=”post”>
<input type=”text” name=”user_input”>
<button type=”submit”>Submit</button>
</form>
Function: Collects user input, which can be used for interaction or lead generation.
14. < input > Tag
The < input > tag is used within forms to gather user data, such as text, radio buttons, or checkboxes.
<input type=”text” name=”username” placeholder=”Enter your name”>
Function: Allows users to input data into the webpage, commonly used in forms.
15. < link > Tag
The < link > tag is used to link external resources like stylesheets or icons to your webpage.
<link rel=”stylesheet” href=”styles.css”>
Function: Links external files, such as CSS, that control the presentation of the webpage.
16. < meta charset > Tag
The < meta charset > tag defines the character encoding used in the document, ensuring that special characters are displayed correctly.
<meta charset=”UTF-8″>
Function: Specifies the character encoding for the document, preventing display issues with text.
17. < iframe > Tag
The < iframe > tag allows you to embed content from external websites, like videos or maps.
<iframe src=”https://www.youtube.com/embed/video-id” width=”560″ height=”315″></iframe>
Function: Embeds external content within your webpage, enhancing user engagement.
18. < footer > Tag
The < footer > tag is used to define the footer of a webpage, often containing copyright, links, or additional information.
<footer>
<p>© 2025 Your Website</p>
</footer>
Function: Provides footer content and can help provide additional SEO signals through structured data.
19. < header > Tag
The < header > tag represents introductory content or navigational links at the top of the page.
<header>
<h1>Welcome to Our Website</h1>
</header>
Function: Defines the introductory section of the page and often includes key navigation or branding elements.
20. < article > Tag
The < article > tag is used for self-contained content, such as blog posts, articles, or reviews.
<article>
<h2>Learn HTML Tags</h2>
<p>HTML tags are the building blocks of web pages…</p>
</article>
Function: Organizes content that stands alone and can be syndicated, which search engines can use to rank content.
Conclusion
Understanding these 20 HTML tags is essential for any beginner looking to build effective web pages. Beyond the basic functionality, HTML tags play a vital role in improving SEO by organizing content logically, enhancing accessibility, and providing search engines with the necessary context to rank pages. By mastering these tags, you not only create well-structured web pages but also increase your chances of improving search engine rankings, ultimately attracting more visitors to your site.
