Top 10 HTML Tags Every HTML Beginner Should Know
Learning HTML is the first step in mastering web development, and understanding the most commonly used tags helps build a solid foundation. Whether you're creating a simple web page or stepping into more complex website layouts, these HTML tags are essential tools in your coding toolbox.
1. <html> – The Root of Every Page
Every HTML document begins with the <html> tag. It wraps all the content on the page and lets the browser know it's reading an HTML document.
<html>
<head>...</head>
<body>...</body>
</html>
2. <head> – Metadata and Resources
The <head> tag contains non-visible elements like the page title, character encoding, linked stylesheets, and meta tags for SEO and social media.
<head>
<title>Nature Photos Website</title>
<meta charset="UTF-8">
</head>
3. <title> – Setting the Page Title
The <title> tag defines the title that appears on the browser tab. It's also used by search engines like Google as the clickable headline in search results.
<title>Welcome to My Nature Photos Website!</title>
4. <body> – Where the Content Lives
This is where the visible content like headings, paragraphs, images, and links goes. If you want it to appear on your page, it should go inside the <body> element.
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
5. <h1> to <h6> – Headings for Structure
Heading tags define the structure of content. <h1> is the most important, while <h6> is the least. Use them to create content hierarchy and improve SEO. Headings are not required to use but if you are aiming to have well-structured web pages, make a habit of using them.
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Section</h3>
6. <p> – Paragraphs of Text
The <p> tag defines blocks of text. Browsers add spacing before and after each paragraph, making it great for readable content. You can also add margins or paddings to your paragraphs using CSS.
<p>This is a collection of mountain and forest photos I took last year.</p>
7. <a> – Linking It All Together
The <a> (anchor) tag allows you to add links to other pages or external sites. It's essential for site navigation and SEO. For example, check out the MDN docs on anchor tags.
<a href="https://www.example.com" target="_blank">Visit Example</a>
8. <img> – Displaying Images
The <img> tag embeds images in your page. It uses the src attribute to define the image path and alt as alternative text for accessibility.
<img src="high-mountain.png" alt="High Mountain">
9. <ul> and <ol> – Lists That Organize Content
Use <ul> for unordered lists and <ol> for ordered ones. Each list item uses the <li> tag.
<ul>
<li>Mountains</li>
<li>Forests</li>
<li>Rivers</li>
</ul>
10. <div> – The Container Element
<div> is a general-purpose container used for grouping elements together for styling or scripting. It doesn't add meaning to your content, but it's widely used with CSS and JavaScript.
<div class="container">
<p>This photo shows a beautiful forest from a distance.</p>
</div>
Semantic Tags Worth Exploring
Beyond the basic tags, HTML offers semantic elements like <header>, <footer>, <article>, and <section> to add meaning to your content. These are great for accessibility and clarity, and help search engines better understand your layout.
<article>
<h2>Blog Post</h2>
<p>Here's a short article.</p>
</article>
Mastering these semantic tags puts you on the right track to becoming a proficient web developer. HTML is simple but powerful, and once you've nailed the basics, you'll be able to build well-structured, accessible, and professional-looking websites. Want to take the next step? Start playing with tags in your own HTML file, and check out more learning materials at WHATWG HTML Living Standard.