Day 2: HTML Tags and Elements – The Building Blocks of Web Pages

Welcome to Day 2 of the 7 Days HTML Tutorial!
Yesterday, you created your very first HTML page. Today, we’ll dive deeper into the real building blocks of HTML — tags and elements.

By the end of this post, you’ll know how to structure your content using proper HTML syntax, and you’ll feel confident writing basic HTML from scratch.

Table of Contents

What Are HTML Tags and Elements?

Tag

A tag is a keyword wrapped in angle brackets like <p>, <h1>, or <img>. It tells the browser what type of content you’re writing.

Element

An element is everything from the opening tag, the content inside, and the closing tag.

For example:

<p>This is a paragraph.</p>

<p> is the opening tag
This is a paragraph. is the content
</p> is the closing tag

Altogether, it forms a paragraph element.

Commonly Used HTML Tags

Let’s explore some of the most essential HTML tags you’ll use daily.

1. Headings

Used to create titles and subtitles on your web page.

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>And so on… up to h6</h3>

Tip: Use only one <h1> per page for better SEO.

2. Paragraphs

<p>This is a paragraph of text.</p>

Use paragraphs to write blocks of text or descriptions.

3. Line Break

<p>This is line one.<br>This is line two.</p>

Use <br> when you want to break the line without starting a new paragraph.

4. Bold and Italic

<p><strong>This text is bold.</strong></p>
<p><em>This text is italic.</em></p>

<strong> = bold
<em> = italic

These also carry meaning (emphasis), not just style.

5. Horizontal Line

<hr>

Use this tag to add a horizontal line or divider between sections.

6. Comments

<!-- This is a comment -->

Comments won’t appear on the page but help you document your code.

Mini Project: Create a Simple Bio Page

Try this small project to practice all the tags you just learned.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Bio</title>
  </head>
  <body>
    <h1>John Doe</h1>
    <h2>Web Developer in Training</h2>
    <p>I love learning how websites are made. This is my second day learning HTML!</p>
    
    <p><strong>Hobbies:</strong></p>
    <p>Reading, coding, and exploring the web.</p>
    
    <hr>
    
    <p><em>This page is created as part of a 7-day HTML challenge.</em></p>
  </body>
</html>

Save this as bio.html and open it in your browser. Tweak the content and make it your own!

Quick Recap

HTML is made up of tags and elements
Tags define what kind of content you’re adding (heading, paragraph, etc).
You practiced using the most common tags for text-based content

Practice Task

📝 Create a web page that:

Includes all six heading levels (<h1> to <h6>)
Write 2 paragraphs about your favorite hobby
Uses <strong> and <em> somewhere in the text
Has a horizontal line between sections

What’s Next?

On Day 3, we’ll learn how to add images and create clickable links, bringing some excitement and interactivity to your page!

👉 Keep practicing — you’re doing great!

🎯 Want to test your learning so far?
Check out the 7 Days HTML Challenge with Solutions to practice and validate your understanding with hands-on tasks!

Share with friends