HTML — Tag Reference

<think> Here's a thinking process:

1. Analyze User Input:

• Role: Expert programming tutor writing original lessons for a beginner-friendly tutorial site.
• Rules: 100% original, plain language, short sentences, explain every term on first use, warm but not childish.
• Topic: HTML "Tag Reference"
• Context: Previous lesson: "SSE" (Server-Sent Events). Next lesson: "Attribute Reference".
• Format Requirements:
  • Start with exact YAML frontmatter:

    ---
    title: Tag Reference
    description: <one-line summary>
    order: 53
    ---
    

  • Length: 150-200 lines of markdown.
  • Use ## section headings: friendly intro (what & why), then progressively deeper subsections.
  • Include MULTIPLE practical code examples in proper code blocks for HTML.
  • After key examples, add ### What the browser displays describing the rendered result in plain words inside a text code block or italic sentence.
  • Include at least one markdown table comparing options/values/attributes.
  • Include at least one blockquote tip/warning starting with > **Common mistake:** or > **Good to know:**.
  • End with ## Common mistakes checklist then ## Mini Practice containing 4-5 numbered hands-on exercises.
  • Output ONLY raw markdown starting with ---. Do not wrap the document in code fences.

2. Deconstruct Requirements & Plan Structure:

• YAML frontmatter (exact)
• ## Welcome to HTML Tags (intro: what & why)
• ## What is a Tag? (explain basic structure, opening/closing/self-closing)
• ## How Tags Work Together (nesting, parent/child)
• ## Essential Tags You Will Use Daily (examples: headings, paragraphs, links, images)
• ## Quick Comparison Table (table comparing tag types/purposes)
• ## Good to Know / Common Mistake (blockquote)
• ## Common mistakes checklist
• ## Mini Practice (4-5 exercises)
• Ensure length is 150-200 lines. I'll need to count lines carefully or estimate appropriately. Markdown lines include empty lines, headings, code blocks, etc. I'll aim for a substantial but concise structure that naturally falls in that range.

Let's draft step-by-step, keeping track of line count and constraints.

3. Draft - Section by Section (Mental Refinement):

---
title: Tag Reference
description: Learn how HTML tags structure your web pages and how to use them correctly.
order: 53
---

(3 lines)

## Welcome to HTML Tags You just finished learning about Server-Sent Events. Now we shift gears to the foundation of every website. HTML tags are the building blocks of the web. Think of them as labeled containers. They tell the browser what each piece of content actually is. Without tags, your page is just plain text. With tags, you get headings, images, links, and layouts. This lesson gives you a clear reference guide to understand how tags work, why they matter, and how to pick the right one for your content.

(11 lines so far)

## What is a Tag? An HTML tag is a keyword wrapped in angle brackets. Most tags come in pairs. The first tag is the opening tag. It marks where the element starts. The second tag is the closing tag. It marks where the element ends. A closing tag has a forward slash before the keyword. For example, paragraph tags look like this.

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

What the browser displays

This is a sentence.

Some tags do not need a closing tag. These are called self-closing tags. They handle content that does not wrap other text. Images and line breaks use this style.

<img src="photo.jpg" alt="A sunny beach">
<br>

What the browser displays

An image of a sunny beach appears, followed by a blank line.

(33 lines so far)

## How Tags Work Together Tags rarely stand alone. You place one tag inside another. This is called nesting. The outer tag is the parent. The inner tag is the child. Proper nesting keeps your code readable. Always close your tags in reverse order. Open the parent first. Open the child next. Close the child. Then close the parent.

<div>
  <h2>Chapter One</h2>
  <p>This is the main text.</p>
</div>

What the browser displays

A large heading reading "Chapter One" sits above a normal paragraph of text.

Browser engines read tags from top to bottom. If you forget to close a tag, the browser guesses where it ends. This often breaks your layout. Always match your opening and closing pairs.

(58 lines so far)

## Essential Tags You Will Use Daily You will reach for these tags constantly. They cover text, media, and structure.

Headings Headings define importance. Use them from largest to smallest.

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Header</h3>

Paragraphs and Text Paragraphs hold blocks of text. The line break tag forces a new line without starting a new paragraph.

<p>First line of text.</p>
<p>Second line with a <br> forced break.</p>

Links and Images Links point to other pages. Images show visual content. Both use self-closing or simplified syntax.

<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company Logo">

What the browser displays

A clickable blue text link sits next to a company logo image.

(98 lines so far)

## Quick Comparison Table Picking the right tag prevents layout errors. Use this guide to match your content with the correct element.

Tag	Purpose	Closes?	Best For
<p>	Paragraph	Yes	Blocks of regular text
<h1> to <h6>	Headings	Yes	Titles and section headers
<a>	Anchor/Link	Yes	Clickable URLs
<img>	Image	No	Photos and graphics
<div>	Division	Yes	Grouping layout sections
<br>	Line Break	No	Forcing a new line

Good to know: Tags describe meaning, not appearance. A heading tag tells the browser the text is important. The browser then applies default styling. You will control the exact look later using CSS.

(128 lines so far)

## Common mistakes checklist Review these points before saving your file.

• Did you wrap keywords in angle brackets?
• Did you close every paired tag?
• Are your nested tags closed in reverse order?
• Did you use self-closing tags for images and breaks?
• Did you check that your tag names are spelled correctly?
• Are you using headings for structure instead of bold text?

## Mini Practice Try these exercises in a new HTML file. Save and open the file in your browser after each step.

1. Create a page with one <h1> title and two <p> paragraphs. Close every tag properly.
2. Add an <img> tag pointing to a placeholder image URL. Include an alt description.
3. Nest a <strong> tag inside your second paragraph to highlight one word.
4. Place an <a> link inside a <div> container. Make the link point to any website.
5. Insert a <br> tag inside the first paragraph to split it into two visual lines without creating a new paragraph.

(168 lines so far)

Let's count lines carefully. I'll count the actual markdown lines in the draft. YAML: 3 Intro: ~10 What is a Tag: ~20 How Tags Work: ~20 Essential Tags: ~25 Table: ~12 Blockquote: ~3 Checklist: ~8 Mini Practice: ~10 Total: ~111. I need 150-200 lines. I'll expand slightly with more explanations, examples, and careful line breaks to hit the target range without fluff. I'll add a bit more depth to the sections, ensure explanations are thorough for beginners, and format carefully.

Let's rewrite and count lines precisely. I'll aim for ~160 lines.

Structure: YAML (3)

Welcome to HTML Tags (10)

What is a Tag? (15)

How Tags Work Together (15)

Essential Tags You Will Use Daily (25)

Quick Comparison Table (12)

Good to know (3)

Common mistakes checklist (8)

Mini Practice (12)

I'll add more beginner-friendly explanations and spacing to naturally reach 150-200.

Let's draft carefully. I will count lines as I go. I'll make sure every term is explained on first use. I'll ensure tone is warm but not childish. I'll verify all constraints.

Draft generation starts now... (mental simulation of output) I will count lines explicitly. Line 1: --- Line 2: title: Tag Reference Line 3: description: Learn how HTML tags structure your web pages and how to use them correctly. Line 4: order: 53 Line 5: --- Line 6: (empty) Line 7: ## Welcome to HTML Tags Line 8: (empty) Line 9: You just finished learning about Server-Sent Events. Now we shift gears to the foundation of every website. HTML tags are the building blocks of the web. Think of them as labeled containers. They tell the browser what each piece of content actually is. Without tags, your page is just plain text. With tags, you get headings, images, links, and layouts. This lesson gives you a clear reference guide to understand how tags work, why they matter, and how to pick the right one for your content. Line 10: (empty) Line 11: ## What is a Tag? Line 12: (empty) Line 13: An HTML tag is a keyword wrapped in angle brackets. Most tags come in pairs. The first tag is the opening tag. It marks where the element starts. The second tag is the closing tag. It marks where the element ends. A closing tag has a forward slash before the keyword. For example, paragraph tags look like this. Line 14: (empty) Line 15: html Line 16: <p>This is a sentence.</p> Line 17: Line 18: (empty) Line 19: ### What the browser displays Line 20: This is a sentence. Line 21: (empty) Line 22: Some tags do not need a closing tag. These are called self-closing tags. They handle content that does not wrap other text. Images and line breaks use this style. Line 23: (empty) Line 24: html Line 25: <img src="photo.jpg" alt="A sunny beach"> Line 26: <br> Line 27: Line 28: (empty) Line 29: ### What the browser displays Line 30: An image of a sunny beach appears, followed by a blank line. Line 31: (empty) Line 32: ## How Tags Work Together Line 33: (empty) Line 34: Tags rarely stand alone. You place one tag inside another. This is called nesting. The outer tag is the parent. The inner tag is the child. Proper nesting keeps your code readable. Always close your tags in reverse order. Open the parent first. Open the child next. Close the child. Then close the parent. Line 35: (empty) Line 36: html Line 37: <div> Line 38: <h2>Chapter One</h2> Line 39: <p>This is the main text.</p> Line 40: </div> Line 41: Line 42: (empty) Line 43: ### What the browser displays Line 44: A large heading reading "Chapter One" sits above a normal paragraph of text. Line 45: (empty) Line 46: Browser engines read tags from top to bottom. If you forget to close a tag, the browser guesses where it ends. This often breaks your layout. Always match your opening and closing pairs. Line 47: (empty) Line 48: ## Essential Tags You Will Use Daily Line 49: (empty) Line 50: You will reach for these tags constantly. They cover text, media, and structure. Line 51: (empty) Line 52: Headings Line 53: Headings define importance. Use them from largest to smallest. Line 54: html Line 55: <h1>Main Title</h1> Line 56: <h2>Subtitle</h2> Line 57: <h3>Section Header</h3> Line 58: Line 59: (empty) Line 60: Paragraphs and Text Line 61: Paragraphs hold blocks of text. The line break tag forces a new line without starting a new paragraph. Line 62: html Line 63: <p>First line of text.</p> Line 64: <p>Second line with a <br> forced break.</p> Line 65: Line 66: (empty) Line 67: Links and Images Line 68: Links point to other pages. Images show visual content. Both use self-closing or simplified syntax. Line 69: html Line 70: <a href="https://example.com">Visit Example</a> Line 71: <img src="logo.png" alt="Company Logo"> Line 72: Line 73: (empty) Line 74: ### What the browser displays Line 75: A clickable blue text link sits next to a company logo image. Line 76: (empty) Line 77: ## Quick Comparison Table Line 78: (empty) Line 79: Picking the right tag prevents layout errors. Use this guide to match your content with the correct element. Line 80: (empty) Line 81: | Tag | Purpose | Closes? | Best For | Line 82: |-----|---------|---------|----------| Line 83: | <p> | Paragraph | Yes | Blocks of regular text | Line 84: | <h1> to <h6> | Headings | Yes | Titles and section headers | Line 85: | <a> | Anchor/Link | Yes | Clickable URLs | Line 86: | <img> | Image | No | Photos and graphics | Line 87: | <div> | Division | Yes | Grouping layout sections | Line 88: | <br> | Line Break | No | Forcing a new line | Line 89: (empty) Line 90: > Good to know: Tags describe meaning, not appearance. A heading tag tells the browser the text is important. The browser then applies default styling. You will control the exact look later using CSS. Line 91: (empty) Line 92: ## Common mistakes checklist Line 93: (empty) Line 94: Review these points before saving your file. Line 95: - Did you wrap keywords in angle brackets? Line 96: - Did you close every paired tag? Line 97: - Are your nested tags closed in reverse order? Line 98: - Did you use self-closing tags for images and breaks? Line 99: - Did you check that your tag names are spelled correctly? Line 100: - Are you using headings for structure instead of bold text? Line 101: (empty) Line 102: ## Mini Practice Line 103: (empty) Line 104: Try these exercises in a new HTML file. Save and open the file in your browser after each step. Line 105: 1. Create a page with one <h1> title and two <p> paragraphs. Close every tag properly. Line 106: 2. Add an <img> tag pointing to a placeholder image URL. Include an alt description. Line 107: 3. Nest a <strong> tag inside your second paragraph to highlight one word. Line 108: 4. Place an <a> link inside a <div> container. Make the link point to any website. Line 109: 5. Insert a <br> tag inside the first paragraph to split it into two visual lines without creating a new paragraph.

This is only ~110 lines. I need 150-200. I will expand the explanations slightly, add more beginner context, and ensure line breaks are used effectively to reach the target. I'll add a section on "Semantic vs Non-Semantic Tags" to deepen it appropriately for beginners, and expand the practice section. I'll also make sure the tone stays consistent.

Let's carefully expand to ~165 lines. I'll add:

• More explanation in intro
• A new subsection: ## Semantic vs Non-Semantic Tags
• Expand the table explanation
• Expand checklist
• Expand practice instructions I will count lines meticulously.

Draft V2:

title: Tag Reference description: Learn how HTML tags structure your web pages and how to use them correctly. order: 53

Welcome to HTML Tags

You just finished learning about Server-Sent Events. Now we shift gears to the foundation of every website. HTML tags are the building blocks of the web. Think of them as labeled containers. They tell the browser what each piece of content actually is. Without tags, your page is just plain text. With tags, you get headings, images, links, and layouts. This lesson gives you a clear reference guide to understand how tags work, why they matter, and how to pick the right one for your content.

What is a Tag?

An HTML tag is a keyword wrapped in angle brackets. Most tags come in pairs. The first tag is the opening tag. It marks where the element starts. The second tag is the closing tag. It marks where the element ends. A closing tag has a forward slash before the keyword. For example, paragraph tags look like this.

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

What the browser displays

This is a sentence.

Some tags do not need a closing tag. These are called self-closing tags. They handle content that does not wrap other text. Images and line breaks use this style.

<img src="photo.jpg" alt="A sunny beach">
<br>

What the browser displays

An image of a sunny beach appears, followed by a blank line.

How Tags Work Together

Tags rarely stand alone. You place one tag inside another. This is called nesting. The outer tag is the parent. The inner tag is the child. Proper nesting keeps your code readable. Always close your tags in reverse order. Open the parent first. Open the child next. Close the child. Then close the parent.

<div>
  <h2>Chapter One</h2>
  <p>This is the main text.</p>
</div>

What the browser displays

A large heading reading "Chapter One" sits above a normal paragraph of text.

Browser engines read tags from top to bottom. If you forget to close a tag, the browser guesses where it ends. This often breaks your layout. Always match your opening and closing pairs.

Semantic vs Non-Semantic Tags

Not all tags carry the same weight. Semantic tags describe their content clearly. The browser understands that a heading is important or a link is clickable. Non-semantic tags carry no special meaning. They only hold content. Use semantic tags whenever possible. This helps screen readers and search engines understand your page.

<header>Site navigation</header>
<main>Article content</main>
<footer>Copyright info</footer>

What the browser displays

Three distinct sections appear stacked vertically, each serving a clear role.

Essential Tags You Will Use Daily

You will reach for these tags constantly. They cover text, media, and structure.

Headings Headings define importance. Use them from largest to smallest.

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Header</h3>

Paragraphs and Text Paragraphs hold blocks of text. The line break tag forces a new line without starting a new paragraph.

<p>First line of text.</p>
<p>Second line with a <br> forced break.</p>

Links and Images Links point to other pages. Images show visual content. Both use self-closing or simplified syntax.

<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company Logo">

What the browser displays

A clickable blue text link sits next to a company logo image.

Quick Comparison Table

Picking the right tag prevents layout errors. Use this guide to match your content with the correct element.

Tag	Purpose	Closes?	Best For
<p>	Paragraph	Yes	Blocks of regular text
<h1> to <h6>	Headings	Yes	Titles and section headers
<a>	Anchor/Link	Yes	Clickable URLs
<img>	Image	No	Photos and graphics
<div>	Division	Yes	Grouping layout sections
<br>	Line Break	No	Forcing a new line

Good to know: Tags describe meaning, not appearance. A heading tag tells the browser the text is important. The browser then applies default styling. You will control the exact look later using CSS.

Common mistakes checklist

Review these points before saving your file.

• Did you wrap keywords in angle brackets?
• Did you close every paired tag?
• Are your nested tags closed in reverse order?
• Did you use self-closing tags for images and breaks?
• Did you check that your tag names are spelled correctly?
• Are you using headings for structure instead of bold text?
• Are you avoiding nested links or images inside block elements incorrectly?

Mini Practice

Try these exercises in a new HTML file. Save and open the file in your browser after each step.

1. Create a page with one <h1> title and two <p> paragraphs. Close every tag properly.
2. Add an <img> tag pointing to a placeholder image URL. Include an alt description.
3. Nest a <strong> tag inside your second paragraph to highlight one word.
4. Place an <a> link inside a <div> container. Make the link point to any website.
5. Insert a <br> tag inside the first paragraph to split it into two visual lines without creating a new paragraph.
6. Wrap your entire page content inside a <main> tag to practice semantic structure.

Let's count lines. YAML: 4 Empty: 1 H2: 1 Empty: 1 Paragraph: ~4 Empty: 1 H2: 1 Empty: 1 Paragraph: ~4 Empty: 1 Code: 3 Empty: 1 H3: 1 Italic: 1 Empty: 1 Paragraph: ~3 Empty: 1 Code: 3 Empty: 1 H3: 1 Italic: 1 Empty: 1 H2: 1 Empty: 1 Paragraph: ~4 Empty: 1 Code: 5 Empty: 1 H3: 1 Italic: 1 Empty: 1 Paragraph: ~4 Empty: 1 H2: 1 Empty: 1 Paragraph: ~3 Empty: 1 H2: 1 Empty: 1 Paragraph: ~2 Empty: 1 Code: 4 Empty: 1 Paragraph: 1 Empty: 1 H2: