-### Rule 1: Use one `` per page
+```html title="outline.html"
+Web Development
-The `` is the **main title** of the page: the answer to "What is this page about?" Modern HTML technically allows more than one, but a **single ``** is the widely recommended practice because it keeps your page's purpose crystal clear.
+HTML
+Text Content
+
Learn how to format text.
+Links and Images
+Connect pages and add pictures.
-```html
-HTML Headings Tutorial
+CSS
+Style your pages.
```
-:::note `` vs. ``
-These two are often confused. The **`<title>`** sits in the `<head>` and appears on the browser tab and in search results. The **`<h1>`** sits in the `<body>` and appears at the top of the page content. They are usually similar, but they are not the same element and do not do the same job.
-:::
+</TabItem>
+<TabItem value="output" label="Browser Output">
-### Rule 2: Do not skip levels
+<BrowserWindow url="http://127.0.0.1:5500/outline.html">
+<>
+<h1>Web Development</h1>
-Go down **one level at a time**. An `<h2>` should be followed by `<h3>` subsections, not suddenly by an `<h5>`.
+<h2>HTML</h2>
+<h3>Text Content</h3>
+<p>Learn how to format text.</p>
+<h3>Links and Images</h3>
+<p>Connect pages and add pictures.</p>
-<Tabs groupId="heading-levels">
- <TabItem value="good" label="β
Logical order" default>
+<h2>CSS</h2>
+<p>Style your pages.</p>
+</>
+</BrowserWindow>
-```html
-<h1>Travel Guide</h1>
-<h2>Europe</h2>
-<h3>France</h3>
-<h3>Italy</h3>
-<h2>Asia</h2>
-```
+</TabItem>
+</Tabs>
-Each level is one step deeper than the previous one.
+## Best Practices
- </TabItem>
- <TabItem value="bad" label="β Skipped levels">
+### 1. Use one `<h1>` per page
-```html
-<h1>Travel Guide</h1>
-<h4>Europe</h4>
-<h2>France</h2>
-<h6>Italy</h6>
-```
+The `<h1>` is the title of the whole page. A blog post, a product page, and a tutorial each get one `<h1>`.
-The levels jump around randomly. The outline is broken, and screen reader users will be confused about how the sections relate.
+### 2. Do not skip levels
- </TabItem>
-</Tabs>
+Go from `<h2>` to `<h3>`, never from `<h2>` to `<h5>`. A missing level leaves a hole in the outline.
-Going *back up* is perfectly fine. After an `<h3>` you can start a new `<h2>` for the next major section, as in the example above.
+### 3. Choose by rank, not by size
-### Rule 3: Choose by meaning, style with CSS
+If you want smaller text, use CSS. Do not pick `<h6>` just because it looks small.
-Never use a heading just to make text big or bold. And never avoid a heading just because its default size looks too large.
+### 4. Keep headings short and clear
-<Tabs groupId="heading-style">
- <TabItem value="wrong-way" label="β Wrong reason" default>
+A good heading tells the reader what comes next in a few words. Prefer "Install Node.js" over "Things you might want to do first".
-```html
-<!-- Using h4 only because I want smaller text -->
-<h4>Welcome to My Website</h4>
+:::tip Read your headings alone
+Take away all the paragraphs and read only the headings. If the page still makes sense, your outline is good.
+:::
-<!-- Using h1 only because I want big bold text -->
-<h1>Sale ends tonight!</h1>
-```
+## Common Mistakes
- </TabItem>
- <TabItem value="right-way" label="β
Right reason">
+<Tabs>
+<TabItem value="bad" label="Wrong" default>
```html
-<h1>Welcome to My Website</h1>
-<p class="promo">Sale ends tonight!</p>
+<h1>My Blog</h1>
+<h4>Latest Posts</h4> <!-- skipped h2 and h3 -->
+<h1>About Me</h1> <!-- a second h1 -->
+<h3>Please subscribe!</h3> <!-- used only to get bigger text -->
```
-```css title="styles.css"
-h1 {
- font-size: 1.5rem; /* smaller, but still the main heading */
-}
+</TabItem>
+<TabItem value="good" label="Right">
-.promo {
- font-size: 2rem;
- font-weight: bold; /* big and bold, but not a heading */
-}
+```html
+<h1>My Blog</h1>
+<h2>Latest Posts</h2>
+<h2>About Me</h2>
+<p><strong>Please subscribe!</strong></p>
```
- </TabItem>
+</TabItem>
</Tabs>
-<AdsComponent />
-<br />
-
-## Why Headings Matter for SEO
-
-Search engines read your headings to figure out what each part of your page is about. While there is no magic formula, good heading habits help:
-
-- **Your `<h1>` should describe the page's main topic** in clear, natural language.
-- **Your `<h2>` and `<h3>` headings should describe the subtopics** people might search for.
-- **Descriptive headings** make it easier for search engines to show your page for the right questions, and sometimes even to feature a section directly in results.
-
-Compare these two headings for a page about houseplants:
-
-| Weak heading | Stronger heading |
-|--------------|------------------|
-| `Introduction` | `How to Care for a Snake Plant` |
-| `Tips` | `Watering: How Often Does a Snake Plant Need It?` |
-| `More info` | `Common Snake Plant Problems and Fixes` |
-
-:::tip Write headings for people first
-Do not stuff headings with repeated keywords. A heading that reads naturally and clearly describes its section will serve both your visitors and search engines far better than one that sounds robotic.
+:::warning Do not fake headings
+Wrapping text in `<b>` or `<span style="font-size: 2rem">` looks like a heading but is **not** one. Screen readers and search engines will not treat it as a heading.
:::
-## Why Headings Matter for Accessibility
+## Why Headings Matter
-Sighted users skim a page by scanning large, bold titles. **Screen reader users do the same thing by ear**: their software can list every heading on the page or jump directly from one to the next.
+### SEO
-```mermaid
-flowchart LR
- A["π Screen reader user<br/>opens a page"] --> B["π Lists all headings"]
- B --> C["π― Jumps to the section<br/>they care about"]
- C --> D["β
Finds information fast"]
+Search engines read your headings to learn what each section is about. Clear headings that contain your topic words help your page rank for the right searches.
- style A fill:#e3f2fd,stroke:#1976d2,color:#000
- style D fill:#e8f5e9,stroke:#388e3c,color:#000
-```
-
-That only works if your headings are **real headings** with a **logical hierarchy**. If you fake headings by styling a `<p>` to look big and bold, a screen reader sees just another paragraph, and the user has no way to skim.
-
-<Tabs groupId="fake-heading">
- <TabItem value="fake" label="β Fake heading" default>
-
-```html
-<p style="font-size: 28px; font-weight: bold;">Our Services</p>
-```
+### Accessibility
-Looks like a heading to sighted users. To assistive technology, it is only a paragraph.
+Screen reader users often jump from heading to heading instead of reading the whole page. A correct outline is like a menu for them. Without it, the page is much harder to use.
- </TabItem>
- <TabItem value="real" label="β
Real heading">
+### Readability
-```html
-<h2>Our Services</h2>
-```
+Headings break long text into pieces. Readers scan them to decide which part to read.
-Announced as a heading, listed in heading menus, and reachable by heading-jump shortcuts.
+## Styling Headings with CSS
- </TabItem>
-</Tabs>
+You control the look of headings with CSS while keeping the correct level in HTML.
-## What Can Go Inside a Heading?
+<Tabs>
+<TabItem value="code" label="HTML + CSS" default>
-A heading can contain plain text and **inline elements** such as `<em>`, `<strong>`, `<a>`, and `<span>`:
+```html title="styled-headings.html"
+<style>
+ h1 {
+ color: #2563eb;
+ font-size: 2.5rem;
+ text-align: center;
+ }
+ h2 {
+ color: #334155;
+ border-bottom: 2px solid #e2e8f0;
+ padding-bottom: 4px;
+ }
+</style>
-```html
-<h2>Why <em>everyone</em> should learn HTML</h2>
-<h3><a href="/tutorials/html">HTML Tutorials</a></h3>
+<h1>CodeHarborHub</h1>
+<h2>Learn to Code</h2>
+<p>Start your journey today.</p>
```
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/styled-headings.html">
<>
-<h2>Why <em>everyone</em> should learn HTML</h2>
-<h3><a href="/tutorials/html">HTML Tutorials</a></h3>
+<h1 style={{color: '#2563eb', fontSize: '2.5rem', textAlign: 'center'}}>CodeHarborHub</h1>
+<h2 style={{color: '#334155', borderBottom: '2px solid #e2e8f0', paddingBottom: '4px'}}>Learn to Code</h2>
+<p>Start your journey today.</p>
</>
</BrowserWindow>
-What you should **not** put inside a heading is block-level content, such as a `<div>` or a `<p>`. You learned why in the [Nesting](/tutorials/html/html-syntax/nesting) lesson: a heading is a text container, not a layout wrapper.
-
-### Headings can be link targets
-
-Combine a heading with the `id` attribute from the [Global Attributes](/tutorials/html/html-syntax/global-attributes) lesson, and you can link straight to that section from anywhere:
-
-```html
-<h2 id="pricing">Pricing</h2>
-
-<!-- Elsewhere on the page, or on another page -->
-<a href="#pricing">Jump to pricing</a>
-```
-
-This is exactly how the table of contents on the right side of these tutorial pages works.
-
-## Headings and Sectioning Elements
-
-HTML5 introduced elements like `<header>`, `<main>`, `<section>`, and `<article>`, which you will study in a later module. They work beautifully with headings:
-
-```html title="blog-post.html"
-<main>
- <article>
- <header>
- <h1>10 Tips for Learning to Code</h1>
- </header>
+</TabItem>
+</Tabs>
- <section>
- <h2>Tip 1: Practice Every Day</h2>
- <p>Consistency beats intensity...</p>
- </section>
+## Headings vs the Title Tag
- <section>
- <h2>Tip 2: Build Small Projects</h2>
- <p>Projects turn theory into skill...</p>
- </section>
- </article>
-</main>
-```
+Beginners often mix up `<title>` and `<h1>`. They are different.
-:::note About "resetting" heading levels inside sections
-Early HTML5 drafts proposed that every `<section>` could restart its own heading levels at `<h1>`. **Browsers never implemented this**, and screen readers do not use it. So always use the real heading level that matches the page's overall outline, even inside sections and articles.
-:::
+| Element | Where it appears | Purpose |
+| :-- | :-- | :-- |
+| `<title>` | Browser tab and search results | Names the page for browsers and search engines |
+| `<h1>` | Inside the page content | Names the page for the reader |
-## A Note on Subheadings and Taglines
+They are often similar, but they do not have to match exactly.
-Sometimes a heading has a subtitle or tagline, like "The Complete Guide" beneath "Learning HTML." A subtitle is not a new section, so it should **not** be another heading level. Use a paragraph instead:
+## Practice
-```html
-<h1>Learning HTML</h1>
-<p>The complete beginner's guide to building web pages</p>
-```
+Try this in your editor.
-HTML also has an `<hgroup>` element for grouping a heading with its subtitle, but the simple heading-plus-paragraph pattern above works everywhere and is perfectly fine for beginners.
+1. Create a file called `recipe.html`.
+2. Add an `<h1>` with the name of a dish.
+3. Add two `<h2>` headings: **Ingredients** and **Steps**.
+4. Under **Steps**, add an `<h3>` for each stage, such as **Prepare** and **Cook**.
+5. Add a short `<p>` under every heading.
+6. Read only the headings. Does the outline tell the story of the recipe?
<AdsComponent />
<br />
-## Writing Great Headings
-
-Good headings are a writing skill as much as a technical one. Keep these habits in mind:
-
-- **Be descriptive.** "Getting Started with Git" beats "Getting Started."
-- **Be concise.** A heading is a label, not a sentence from the middle of a paragraph.
-- **Be unique.** Avoid repeating the same heading text many times on one page.
-- **Be parallel.** If your headings are "Installing Git" and "Configuring Git," keep that pattern instead of switching to "How Do I Make Commits?"
-- **Never leave one empty.** An empty heading confuses assistive technology and adds nothing.
-
-## Common Heading Mistakes
-
-<details>
- <summary>1. Choosing a heading level for its size</summary>
-
-```html
-<!-- β h5 used just because it looks small -->
-<h5>Our Company History</h5>
-
-<!-- β
Use the right level and shrink it with CSS if needed -->
-<h2 class="small-heading">Our Company History</h2>
-```
-
-</details>
-
-<details>
- <summary>2. Using bold paragraphs instead of headings</summary>
-
-```html
-<!-- β Not a real heading -->
-<p><strong>Contact Us</strong></p>
-
-<!-- β
A real heading -->
-<h2>Contact Us</h2>
-```
-
-</details>
-
-<details>
- <summary>3. Skipping heading levels</summary>
-
-Jumping from `<h2>` straight to `<h5>` breaks the outline. Move down one level at a time.
-
-</details>
-
-<details>
- <summary>4. Having no h1, or an h1 that does not match the page</summary>
-
-Every page should have a clear `<h1>` that describes its main topic. A page whose first heading is an `<h3>`, or whose `<h1>` is only the site logo text on every page, loses much of the structure benefit.
-
-</details>
-
-<details>
- <summary>5. Using headings for layout or spacing</summary>
-
-Do not wrap unrelated text in a heading just to push content down or make it stand out. Use CSS margins and padding for spacing.
-
-</details>
-
-## Try It Yourself
-
-This travel blog snippet has a broken heading structure. Can you spot at least four problems?
-
-```html title="broken-headings.html"
-<h3>My Travel Blog</h3>
-<h1>Day 1: Paris</h1>
-<h4>Morning</h4>
-<h4>Afternoon</h4>
-<h2>Day 2: Rome</h2>
-<p style="font-size: 30px; font-weight: bold;">Evening</p>
-```
-
-<details>
- <summary>π Click to reveal the solution</summary>
-
-```html title="fixed-headings.html"
-<h1>My Travel Blog</h1>
-<h2>Day 1: Paris</h2>
-<h3>Morning</h3>
-<h3>Afternoon</h3>
-<h2>Day 2: Rome</h2>
-<h3>Evening</h3>
-```
-
-1. The main title "My Travel Blog" was an `<h3>`, but it should be the page's `<h1>`.
-2. "Day 1: Paris" was the `<h1>`, but it is a major section, so it becomes an `<h2>`.
-3. "Morning" and "Afternoon" jumped to `<h4>`, skipping `<h3>`. They become `<h3>`.
-4. "Evening" was a styled paragraph faking a heading, so it became a real `<h3>`.
-
-</details>
-
## Quick Recap
-- HTML has six heading levels, **`<h1>` to `<h6>`**, forming the **outline** of your page.
-- Use **one `<h1>`** per page as the main title, and go down **one level at a time**.
-- Choose a heading level for **meaning and structure**, never for size. Use **CSS** to change how it looks.
-- Good headings help **SEO** by describing your page's topics clearly.
-- Real headings power **accessibility**, letting screen reader users skim and jump between sections.
-- Headings can contain **inline elements**, and combined with `id`, they can be **link targets**.
-- A subtitle is usually a **paragraph**, not another heading level.
-
-## Frequently Asked Questions
+Click a question to reveal the answer.
<details>
- <summary>How many h1 tags should a page have?</summary>
+<summary>1. How many heading levels does HTML have?</summary>
-HTML allows more than one, but using a single `<h1>` per page is the widely recommended practice. It keeps the page's main topic clear for visitors, search engines, and assistive technology.
+Six, from `<h1>` to `<h6>`.
</details>
<details>
- <summary>What is the difference between h1 and title?</summary>
+<summary>2. How many `<h1>` elements should a page normally have?</summary>
-The `<title>` element lives in the `<head>` and appears in the browser tab and search results. The `<h1>` lives in the `<body>` and is the main visible heading of the page content. They are usually related, but they are separate elements.
+One. It is the main title of the page.
</details>
<details>
- <summary>Can I skip heading levels, like going from h2 to h4?</summary>
+<summary>3. Why should you not use `<h4>` just to get smaller text?</summary>
-You should avoid it. Skipping levels breaks the logical outline and can confuse screen reader users. Go down one level at a time, though you may jump back up to a higher level when starting a new section.
+The heading level shows rank in the outline, not size. Use CSS to change how big text looks.
</details>
<details>
- <summary>How do I make a heading smaller without changing its level?</summary>
+<summary>4. Which two groups of users benefit most from a correct heading outline?</summary>
-Use CSS, for example `h2 { font-size: 1.2rem; }`. The heading level describes structure, while CSS controls appearance.
+Screen reader users, who navigate by headings, and search engines, which use headings to understand the page.
</details>
<details>
- <summary>Do headings affect SEO?</summary>
+<summary>5. What is the difference between `<title>` and `<h1>`?</summary>
-Yes. Search engines use headings to understand the structure and topics of a page. Clear, descriptive headings that reflect real content help, but keyword stuffing does not.
+`<title>` shows in the browser tab and search results. `<h1>` shows inside the page as its visible title.
</details>
-<details>
- <summary>Should I use h5 and h6?</summary>
-
-Rarely. Most pages are well served by h1 through h3, and sometimes h4. If you find yourself needing h5 or h6 often, consider whether your content could be split into separate sections or pages.
+## Key Takeaways
-</details>
+- HTML has six heading levels, `<h1>` (most important) to `<h6>` (least important).
+- Headings build the **outline** of your page.
+- Use one `<h1>` and never skip levels.
+- Pick headings for **meaning**, and use CSS for **appearance**.
+- Good headings help SEO, accessibility, and readability.
-## Test Your Understanding
-
-1. What is the difference in meaning between `<h1>` and `<h6>`?
-2. Why is it a bad idea to choose `<h4>` just because it looks the right size?
-3. What does it mean to "skip a heading level," and why should you avoid it?
-4. How does a screen reader user benefit from real headings?
-5. Where should a subtitle like "The complete beginner's guide" go?
-
-<AdsComponent />
-<br />
\ No newline at end of file
+Next, learn how to write body text in [Paragraphs](./paragraphs).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/horizontal-rule.mdx b/tutorials/html/03-text-content/horizontal-rule.mdx
index 8c9aa1236..f41fbd466 100644
--- a/tutorials/html/03-text-content/horizontal-rule.mdx
+++ b/tutorials/html/03-text-content/horizontal-rule.mdx
@@ -1,15 +1,339 @@
---
-id: horizontal-rule
-title: "Horizontal Rules: The hr Tag for Thematic Breaks"
+id: html-horizontal-rule
+title: "HTML Horizontal Rule"
sidebar_label: "Horizontal Rule"
sidebar_position: 5
slug: /html/text-content/horizontal-rule
-description: "Explore the hr element in HTML to create thematic breaks, section dividers, and visual content shifts across web pages."
+description: "Learn how to use the HTML hr tag to mark a thematic break between topics. Understand its meaning, default look, how to style it with CSS, accessibility tips, and common mistakes, explained clearly on CodeHarborHub."
keywords:
+ - HTML horizontal rule
- HTML hr tag
- - horizontal rule
- - thematic break HTML
- - section divider HTML
+ - HTML thematic break
+ - style hr with CSS
+ - HTML divider line
+ - HTML hr accessibility
+ - HTML void elements
+ - HTML separator
+ - learn HTML hr
- CodeHarborHub HTML
-tags: [html, hr-tag, layout, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, horizontal-rule, text, frontend]
+---
+
+Think about reading a story. Suddenly the writer leaves a small gap, maybe adds a line or a few stars, and starts again in a new place or at a new time. You feel the change right away. Nobody had to explain it.
+
+HTML has a tool for exactly this moment: the **horizontal rule**, written as `<hr />`. It draws a line across the page, but its real job is not decoration. It tells the reader, "The topic is changing here."
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- What the `<hr />` tag is and what it means
+- When a horizontal rule is the right choice
+- How to style it with CSS, since old HTML attributes are outdated
+- How screen readers treat it
+- Common mistakes, and better alternatives
+
+## The Basics
+
+The `<hr />` tag creates a **thematic break** between two blocks of content. It is a **void element**, which means it has no content inside and no closing tag. (You met void elements in the [Line Breaks](./line-breaks) lesson.)
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<h2>Morning Routine</h2>
+<p>I start my day with a glass of water and a short walk.</p>
+
+<hr />
+
+<h2>Evening Routine</h2>
+<p>I finish my day by reading for twenty minutes.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<h2>Morning Routine</h2>
+<p>I start my day with a glass of water and a short walk.</p>
+
+<hr />
+
+<h2>Evening Routine</h2>
+<p>I finish my day by reading for twenty minutes.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+The browser draws a thin line across the full width of its container, with a little space above and below. It is a block-level element, so it always sits on its own row.
+
+:::info Two ways to write it
+In plain HTML, both `<hr>` and `<hr />` work. In MDX and JSX, use `<hr />`, because unclosed tags cause errors there.
+:::
+
+## What Does "Thematic Break" Mean?
+
+In older HTML, `<hr>` meant "horizontal **rule**", so people thought of it only as a line. In modern HTML, the meaning is a **shift in theme** at the paragraph level.
+
+Here is the difference in simple terms.
+
+| Old idea | Modern idea |
+| :-- | :-- |
+| "Draw a line here." | "The subject changes here." |
+| About appearance | About meaning |
+| Visual decoration | Content structure |
+
+That is why the line you see is only the **default look**. The meaning stays even if you restyle it.
+
+## When to Use `<hr />`
+
+Use it when there is a real change of topic inside a section, but the change is too small for a new heading.
+
+- **A scene change** in a story
+- **A shift in subject** between two paragraphs
+- **A separator** between a main article and its notes or sign-off
+- **A pause** between a question and its long answer
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="story.html"
+<p>Amara closed her laptop and looked out of the window. The rain had stopped.</p>
+
+<hr />
+
+<p>Three weeks later, her first app was live in more than thirty countries.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/story.html">
+<>
+<p>Amara closed her laptop and looked out of the window. The rain had stopped.</p>
+
+<hr />
+
+<p>Three weeks later, her first app was live in more than thirty countries.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+A quick test: **if you removed the line, would the change of topic still be clear?** If yes, you probably do not need `<hr />`. If a reader might get confused, it helps.
+
+## Old Attributes Are Gone: Use CSS
+
+Old tutorials show attributes like `width`, `size`, `align`, and `noshade` on `<hr>`. These are **deprecated**. They still work in some browsers, but you should not use them. CSS gives you full control instead.
+
+| Old attribute | Modern CSS |
+| :-- | :-- |
+| `width="50%"` | `width: 50%;` |
+| `size="5"` | `border-width` or `height` |
+| `align="center"` | `margin-inline: auto;` |
+| `noshade` | `border-style` and `background` |
+
+### A Clean Custom Line
+
+<Tabs>
+<TabItem value="code" label="HTML + CSS" default>
+
+```html title="styled-hr.html"
+<style>
+ .soft-line {
+ width: 60%;
+ margin: 2rem auto;
+ border: none;
+ border-top: 3px solid #2563eb;
+ border-radius: 2px;
+ }
+</style>
+
+<p>First topic.</p>
+<hr class="soft-line" />
+<p>Second topic.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/styled-hr.html">
+<>
+<p>First topic.</p>
+<hr style={{width: '60%', margin: '2rem auto', border: 'none', borderTop: '3px solid #2563eb', borderRadius: '2px'}} />
+<p>Second topic.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+### A Few More Styles
+
+<Tabs>
+<TabItem value="dashed" label="Dashed" default>
+
+```css
+hr.dashed {
+ border: none;
+ border-top: 2px dashed #64748b;
+}
+```
+
+</TabItem>
+<TabItem value="fade" label="Fading">
+
+```css
+hr.fade {
+ height: 2px;
+ border: none;
+ background: linear-gradient(to right, transparent, #2563eb, transparent);
+}
+```
+
+</TabItem>
+<TabItem value="dots" label="Dotted">
+
+```css
+hr.dotted {
+ border: none;
+ border-top: 4px dotted #94a3b8;
+ width: 30%;
+ margin-inline: auto;
+}
+```
+
+</TabItem>
+</Tabs>
+
+:::tip Reset first
+Browsers add their own border style and margin to `<hr>`. Setting `border: none` first, then adding the style you want, gives you a predictable result in every browser.
+:::
+
+## Accessibility and Global Readers
+
+Not everyone sees the page in the same way, so it helps to know what happens behind the scenes.
+
+- **Screen readers** usually announce `<hr />` as a **separator**. Some readers skip it, and others say the word. This is why you should use it only when the break is meaningful.
+- **Decorative lines** made with CSS borders are ignored by assistive tools. That is good when the line is only for looks.
+- **Contrast matters.** A very light gray line on a white background may be invisible for low-vision users. Choose a color that can be seen.
+- **Right-to-left languages** such as Arabic and Hebrew work fine with `<hr />`, because it spans the full width of its container.
+- **Do not rely on the line alone.** If a new section is important, add a heading, which also helps translation tools and search engines.
+
+## Choosing the Right Tool
+
+`<hr />` is not the only way to separate content. Pick the tool that matches your goal.
+
+| Goal | Best choice |
+| :-- | :-- |
+| Change of topic inside a section | `<hr />` |
+| A new major section of the page | A heading, like `<h2>` |
+| A purely visual line, such as under a title | CSS `border-bottom` |
+| Space between two blocks | CSS `margin` or `padding` |
+| Separate items in a list | Use list styling or `border` on each item |
+
+## Common Mistakes
+
+### Mistake 1: Using `<hr />` everywhere
+
+```html
+<!-- Too many lines -->
+<p>Paragraph one.</p>
+<hr />
+<p>Paragraph two.</p>
+<hr />
+<p>Paragraph three.</p>
+<hr />
+```
+
+When every paragraph gets a line, the break loses its meaning. Save it for real changes of topic.
+
+### Mistake 2: Using it only for decoration
+
+If you only want a line under a title, a CSS `border-bottom` is the better tool. It does not say "the topic changed" when nothing changed.
+
+### Mistake 3: Using deprecated attributes
+
+```html
+<!-- Outdated -->
+<hr width="50%" size="4" noshade />
+
+<!-- Modern -->
+<hr style="width: 50%; border-top: 4px solid #000;" />
+```
+
+### Mistake 4: Writing a closing tag
+
+`</hr>` is not valid. Void elements never have a closing tag.
+
+### Mistake 5: Using it instead of headings
+
+A line does not tell users what the next section is about. If the next part has its own subject, give it a [heading](./headings).
+
+## Try It Yourself
+
+Here is a small exercise.
+
+1. Create a file called `travel-diary.html`.
+2. Write two short paragraphs about a place you visited or want to visit.
+3. Add a third paragraph about a **different day** or a **different place**.
+4. Place an `<hr />` between the parts where the story changes.
+5. Add a CSS class that makes your line 40% wide, centered, and dotted.
+6. Remove the `<hr />` and read the text again. Is the change still clear?
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What does `<hr />` represent in modern HTML?</summary>
+
+A thematic break, meaning a shift in topic between blocks of content.
+
+</details>
+
+<details>
+<summary>2. Does `<hr />` need a closing tag?</summary>
+
+No. It is a void element and has no content to wrap.
+
+</details>
+
+<details>
+<summary>3. How should you change the width or color of a horizontal rule today?</summary>
+
+Use CSS, such as `width`, `border-top`, and `margin`. The old HTML attributes are deprecated.
+
+</details>
+
+<details>
+<summary>4. When is a heading better than `<hr />`?</summary>
+
+When the next part is a new section with its own subject. A heading names that section, and a line does not.
+
+</details>
+
+<details>
+<summary>5. Why should you not use `<hr />` between every paragraph?</summary>
+
+Too many breaks make each one meaningless, and screen readers may announce a separator every time.
+
+</details>
+
+## Key Takeaways
+
+- `<hr />` marks a **change of theme**, not just a line on the screen.
+- It is a **void, block-level** element with no closing tag.
+- Style it with **CSS**. The old attributes are deprecated.
+- Use it sparingly, and prefer headings for new sections and CSS borders for decoration.
+- Choose visible colors and think about screen readers so every learner can follow your page.
+
+Next, learn how to show importance and attention in your text with [Strong and Bold](./strong-and-bold).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/line-breaks.mdx b/tutorials/html/03-text-content/line-breaks.mdx
index 57c239bf5..c5ddb3059 100644
--- a/tutorials/html/03-text-content/line-breaks.mdx
+++ b/tutorials/html/03-text-content/line-breaks.mdx
@@ -1,15 +1,367 @@
---
-id: line-breaks
-title: "Line Breaks and Forced Spaces in HTML"
+id: html-line-breaks
+title: "HTML Line Breaks"
sidebar_label: "Line Breaks"
sidebar_position: 4
slug: /html/text-content/line-breaks
-description: "Learn when and how to use the self-closing br tag for forcing line breaks in addresses, poetry, and inline text blocks without breaking paragraphs."
+description: "Understand how the HTML br tag works, when to use a line break instead of a new paragraph, how to handle addresses and poems, and which CSS options and mistakes to know. A clear, step-by-step guide on CodeHarborHub."
keywords:
+ - HTML line break
- HTML br tag
- - line break tag
- - forced line breaks
- - inline breaks HTML
+ - HTML br vs p
+ - HTML new line
+ - HTML wbr tag
+ - HTML white-space pre-line
+ - HTML void elements
+ - HTML address formatting
+ - learn HTML line breaks
- CodeHarborHub HTML
-tags: [html, line-breaks, formatting, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, line-break, text, frontend]
+---
+
+In the last lesson you learned that pressing Enter in your code does **not** start a new line on the page. The browser ignores it. So what do you do when you really do want a new line, such as in an address or a poem, without starting a whole new paragraph?
+
+That is the job of the `<br />` tag. It is tiny, but understanding **when** to use it (and when not to) is what separates clean HTML from messy HTML. This lesson explains both.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- What the `<br />` tag does, in plain terms
+- What a **void element** is and why `<br />` has no closing tag
+- The difference between a line break and a new paragraph
+- Where line breaks make sense, and where they do not
+- Better alternatives using CSS
+- How to control where a long word may break with `<wbr />`
+
+## The Problem: Enter Does Nothing
+
+Start with the problem. Here is a short message typed on three lines.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="problem.html"
+<p>
+ Roses are red
+ Violets are blue
+ I love HTML
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/problem.html">
+<>
+<p>
+ Roses are red
+ Violets are blue
+ I love HTML
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+All three lines run together into one. As you learned, the browser **collapses** line breaks in your code into a single space. To tell the browser "start a new line here", we need an actual HTML instruction.
+
+## The Solution: The `<br />` Tag
+
+`br` stands for **break**. Place it exactly where you want the line to end.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="solution.html"
+<p>
+ Roses are red<br />
+ Violets are blue<br />
+ I love HTML
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/solution.html">
+<>
+<p>
+ Roses are red<br />
+ Violets are blue<br />
+ I love HTML
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Now each line stands on its own, and they all still belong to **one paragraph**.
+
+## How to Think About `<br />`
+
+Here is a simple way to picture it.
+
+- **Typing text** is like writing on a typewriter. The words keep flowing to the right until the paper edge, then wrap.
+- **`<br />`** is like pressing the carriage return on that typewriter. The next word starts at the beginning of a new line, even though you were not at the edge yet.
+
+That is all it does. It does not create a new block, and it does not add extra space. It only says, "continue from the next line."
+
+## Void Elements: Why No Closing Tag?
+
+Most HTML elements wrap around content, like `<p>text</p>`. The `<br />` tag has **nothing to wrap**, because a line break has no content inside it. Elements like this are called **void elements**.
+
+| Wrapping element | Void element |
+| :-- | :-- |
+| `<p>Hello</p>` | `<br />` |
+| `<strong>Hi</strong>` | `<hr />` |
+| `<a href="#">Link</a>` | `<img src="a.png" alt="" />` |
+
+You may see three ways of writing it, and all of them work in HTML.
+
+```html
+<br>
+<br/>
+<br />
+```
+
+:::info Which one should I use?
+In plain HTML, `<br>` is perfectly valid. The self-closing form `<br />` is required in JSX and MDX, and it is common in many style guides. Since our CodeHarborHub docs run on MDX, `<br />` is the safest habit.
+:::
+
+## Line Break vs New Paragraph
+
+This is the most important idea in the lesson. Both give you a new line, but they mean different things.
+
+| | `<br />` | `<p>` |
+| :-- | :-- | :-- |
+| Meaning | "Same thought, next line" | "A new idea starts here" |
+| Extra space between lines | No | Yes (default margin) |
+| Structure | Stays inside one element | Creates a separate block |
+| Best for | Addresses, poems, sign-offs | Normal body text |
+
+A quick test: **if you could put a full stop and start a new idea, use a new paragraph. If the lines belong together as one unit, use a line break.**
+
+### Side by Side
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="compare.html"
+<!-- Two paragraphs: two ideas -->
+<p>I woke up early today.</p>
+<p>Then I went for a long walk.</p>
+
+<!-- One paragraph with a break: one unit -->
+<p>
+ Priya Sharma<br />
+ 221B Green Street<br />
+ Indore, Madhya Pradesh
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/compare.html">
+<>
+<p>I woke up early today.</p>
+<p>Then I went for a long walk.</p>
+
+<p>
+ Priya Sharma<br />
+ 221B Green Street<br />
+ Indore, Madhya Pradesh
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Look at the gaps. The two paragraphs have space between them. The address lines sit close together because they are one block of information.
+
+## Where Line Breaks Make Sense
+
+Use `<br />` when the **line ending itself is part of the content**.
+
+- **Postal addresses:** name, street, and city on separate lines
+- **Poems and verses:** each line has to stay where the poet put it
+- **Sign-offs:** "Thanks," then your name on the next line
+- **Short labeled lines:** for example, contact details in a footer
+
+```html title="signoff.html"
+<p>
+ Thanks for reading,<br />
+ Team CodeHarborHub
+</p>
+```
+
+## Where Line Breaks Do Not Belong
+
+### Do not use `<br />` to create space
+
+```html
+<!-- Please avoid -->
+<p>First idea.</p>
+<br /><br /><br />
+<p>Second idea.</p>
+```
+
+Stacking breaks is a layout trick, not meaning. It behaves differently on different screen sizes, and screen readers may announce the empty lines. Use CSS `margin` instead.
+
+```html
+<!-- Better -->
+<p style="margin-bottom: 3rem">First idea.</p>
+<p>Second idea.</p>
+```
+
+### Do not use `<br />` to split every sentence into a paragraph
+
+If your lines are separate ideas, write separate `<p>` elements. It makes the structure clear to search engines and assistive tools.
+
+### Do not use `<br />` inside lists or tables to fake layout
+
+There are proper elements for lists and tables. Reaching for `<br />` there is usually a sign that another tag fits better.
+
+:::warning Accessibility note
+Screen readers treat line breaks inside text as part of the reading flow. Real structure, like separate paragraphs or list items, gives users clearer signals than many `<br />` tags in a row.
+:::
+
+## Better Options with CSS
+
+Sometimes you have text that already contains line endings, like content from a database or a text box. Instead of adding `<br />` by hand, CSS can honor the line breaks for you.
+
+<Tabs>
+<TabItem value="code" label="HTML + CSS" default>
+
+```html title="pre-line.html"
+<style>
+ .keep-lines {
+ white-space: pre-line;
+ }
+</style>
+
+<p class="keep-lines">
+Line one of my note
+Line two of my note
+Line three of my note
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/pre-line.html">
+<>
+<p style={{whiteSpace: 'pre-line'}}>
+Line one of my note
+Line two of my note
+Line three of my note
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+`white-space: pre-line` tells the browser: "keep the line breaks I typed, but still collapse extra spaces." It is handy for user-written text.
+
+| Need | Best tool |
+| :-- | :-- |
+| One or two deliberate line endings (address, poem) | `<br />` |
+| Many stored line endings in existing text | CSS `white-space: pre-line` |
+| Exact spaces and line breaks, like code | The `<pre>` element |
+| Extra space between blocks | CSS `margin` or `padding` |
+| A new idea | A new `<p>` |
+
+## Bonus: The `<wbr />` Tag
+
+`<br />` **forces** a break. Its quieter cousin, `<wbr />` (word break opportunity), only **suggests** one. The browser breaks the line there **only if it needs to**.
+
+That helps with very long words or URLs that could overflow a small screen.
+
+```html
+<p>
+ Read our guide at
+ https://codeharborhub.<wbr />github.<wbr />io/tutorial<wbr />/html<wbr />/text-content
+</p>
+```
+
+On a wide screen, the text looks normal. On a narrow phone, the browser can wrap at any `<wbr />` instead of overflowing.
+
+## Common Mistakes
+
+| Mistake | Why it is a problem | Fix |
+| :-- | :-- | :-- |
+| Writing `</br>` | It is not valid HTML | Use `<br />` |
+| Many `<br />` in a row for spacing | Layout trick, poor accessibility | Use CSS `margin` |
+| A `<br />` right after every sentence | Turns body text into a choppy list | Use real paragraphs |
+| Using `<br />` outside any text container | Can produce unpredictable spacing | Put it inside `<p>` or another text element |
+
+## Try It Yourself
+
+Practice with this small project.
+
+1. Create `contact-card.html`.
+2. Add an `<h2>` that says **Contact Us**.
+3. Inside one `<p>`, write your name, city, and email on **three lines** using `<br />`.
+4. Add a **second** `<p>` with a normal sentence, like "We reply within a day."
+5. Compare the spacing between the two blocks. Can you explain why the gaps look different?
+
+If you can explain it, you truly understand line breaks.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What does `<br />` do?</summary>
+
+It ends the current line and starts the text on a new line, without starting a new paragraph.
+
+</details>
+
+<details>
+<summary>2. Why does `<br />` have no closing tag?</summary>
+
+It is a void element. A line break has no content to wrap, so there is nothing to close.
+
+</details>
+
+<details>
+<summary>3. When should you choose `<p>` over `<br />`?</summary>
+
+When you are starting a new idea. Use `<br />` only when the lines belong together as one unit, like an address.
+
+</details>
+
+<details>
+<summary>4. Why is stacking several `<br />` tags a poor way to add space?</summary>
+
+It mixes layout with content, behaves inconsistently on different screens, and is not friendly to screen readers. CSS margin is better.
+
+</details>
+
+<details>
+<summary>5. What is the difference between `<br />` and `<wbr />`?</summary>
+
+`<br />` always forces a break. `<wbr />` only allows a break if the text needs one, such as in a long word on a small screen.
+
+</details>
+
+## Key Takeaways
+
+- Pressing Enter in your code does not create a new line on the page. Use `<br />` for that.
+- `<br />` is a **void element**. It has no content and no closing tag.
+- Use `<br />` when the line ending is part of the content, such as addresses, poems, and sign-offs.
+- Use `<p>` for new ideas, and CSS for spacing.
+- `white-space: pre-line` keeps existing line breaks, and `<wbr />` suggests optional break points.
+
+Next, learn how to separate topics with a visual divider in [Horizontal Rule](./horizontal-rule).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/paragraphs.mdx b/tutorials/html/03-text-content/paragraphs.mdx
index 426b34192..dd10eb906 100644
--- a/tutorials/html/03-text-content/paragraphs.mdx
+++ b/tutorials/html/03-text-content/paragraphs.mdx
@@ -1,15 +1,332 @@
---
-id: paragraphs
-title: "HTML Paragraphs: Structuring Blocks of Text"
+id: html-paragraphs
+title: "HTML Paragraphs"
sidebar_label: "Paragraphs"
sidebar_position: 3
slug: /html/text-content/paragraphs
-description: "Understand the paragraph tag, block-level text rendering, browser default margins, and proper text grouping techniques in HTML."
+description: "Learn how to write paragraphs in HTML with the p tag. Understand how browsers handle spaces and line breaks, how to style paragraphs with CSS, and how to avoid common beginner mistakes, explained in simple language on CodeHarborHub."
keywords:
+ - HTML paragraphs
+ - HTML p tag
- HTML paragraph tag
- - p tag HTML
- - block level text
- - text blocks HTML
+ - HTML whitespace collapsing
+ - HTML block level elements
+ - style HTML paragraphs with CSS
+ - HTML paragraph best practices
+ - learn HTML paragraphs
- CodeHarborHub HTML
-tags: [html, paragraph, markup, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, paragraphs, text, frontend]
+---
+
+Imagine opening a book where every page is one giant wall of words. No gaps, no breaks, nothing to rest your eyes on. You would probably close it after a few lines, right?
+
+That is exactly why **paragraphs** exist. They chop your writing into small, friendly chunks so readers can breathe, follow your ideas, and keep going. In HTML, the tool for that job is the humble `<p>` tag, and it is one you will use in almost every page you ever build.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+By the end of this lesson, you will be able to:
+
+- Write a paragraph with the `<p>` tag
+- Understand why your extra spaces and blank lines seem to "disappear"
+- Style paragraphs with CSS so they are comfortable to read
+- Avoid the mistakes almost every beginner makes at least once
+
+:::info Good news
+This is one of the easiest lessons in the whole tutorial. If you can type a sentence, you can write a paragraph.
+:::
+
+## Your First Paragraph
+
+A paragraph starts with `<p>` and ends with `</p>`. Everything you put between the two tags becomes one paragraph.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<p>Hello! This is my very first paragraph.</p>
+<p>And this is my second one. See how it starts on a new line?</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<p>Hello! This is my very first paragraph.</p>
+<p>And this is my second one. See how it starts on a new line?</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Notice two things. Each paragraph starts on its own line, and the browser adds a little space between them. You did not have to ask for that. The browser does it for you.
+
+## Paragraphs Are "Block" Elements
+
+In HTML, a paragraph is a **block-level element**. Picture it as a rectangular box that stretches across the full width of its container. Because of that:
+
+- A paragraph always starts on a **new line**
+- It takes up the **whole row**, even if the text is short
+- The browser adds a **margin** above and below it (about 16px by default)
+
+Think of paragraphs like boxes on a shelf. Each box gets its own row, and there is a small gap between rows.
+
+## Why Did My Spaces Disappear?
+
+Here is something that surprises almost everyone at first. Look at this code.
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="spaces.html"
+<p>
+ This paragraph has
+ lots of extra spaces
+
+
+ and blank lines.
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/spaces.html">
+<>
+<p>
+ This paragraph has
+ lots of extra spaces
+
+
+ and blank lines.
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+You typed a bunch of spaces and blank lines, but the browser shows one tidy line. That is not a bug. It is called **whitespace collapsing**. The browser squishes any run of spaces, tabs, and line breaks into a single space.
+
+Why does it work this way? So you can format your code however you like, with indentation and line wraps, without changing what visitors see.
+
+:::tip Want to keep your spacing?
+If you truly need spaces and line breaks preserved, you have two options. Use `<br />` for a line break (next lesson), or use the `<pre>` tag for preformatted text.
+:::
+
+## Long Text? Break It Up
+
+Compare these two versions of the same text. Which one would you rather read?
+
+<Tabs>
+<TabItem value="wall" label="Wall of text" default>
+
+```html
+<p>
+ HTML is the skeleton of every web page. It tells the browser what is a title,
+ what is a paragraph, and what is a link. CSS then adds colors and layout, and
+ JavaScript brings the page to life with interaction. Learning all three takes
+ time, but starting with HTML gives you a strong base for everything else.
+</p>
+```
+
+</TabItem>
+<TabItem value="chunks" label="Easy to read">
+
+```html
+<p>
+ HTML is the skeleton of every web page. It tells the browser what is a title,
+ what is a paragraph, and what is a link.
+</p>
+<p>
+ CSS then adds colors and layout, and JavaScript brings the page to life with
+ interaction.
+</p>
+<p>
+ Learning all three takes time, but starting with HTML gives you a strong base
+ for everything else.
+</p>
+```
+
+</TabItem>
+</Tabs>
+
+A good rule of thumb: **one paragraph, one idea**. When your idea changes, start a new paragraph.
+
+## Styling Paragraphs with CSS
+
+The default look works, but a few small CSS tweaks can make your text much nicer to read.
+
+<Tabs>
+<TabItem value="code" label="HTML + CSS" default>
+
+```html title="styled-paragraph.html"
+<style>
+ p {
+ font-size: 1.1rem;
+ line-height: 1.7;
+ color: #334155;
+ max-width: 60ch;
+ }
+</style>
+
+<p>
+ Comfortable text is not an accident. A little extra line height and a limited
+ width make long paragraphs far easier on the eyes.
+</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/styled-paragraph.html">
+<>
+<p style={{fontSize: '1.1rem', lineHeight: 1.7, color: '#334155', maxWidth: '60ch'}}>
+ Comfortable text is not an accident. A little extra line height and a limited
+ width make long paragraphs far easier on the eyes.
+</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Here is what each property does:
+
+| CSS property | What it does | Friendly tip |
+| :-- | :-- | :-- |
+| `font-size` | Changes the text size | Keep body text at 16px or larger |
+| `line-height` | Sets the space between lines | Try 1.5 to 1.8 for easy reading |
+| `max-width` | Limits how wide the text can get | Around `60ch` to `75ch` works well |
+| `color` | Sets the text color | Make sure it contrasts with the background |
+| `text-align` | Aligns the text | Left-aligned is easiest for most readers |
+| `margin` | Changes the gap between paragraphs | Use `margin-bottom` for even spacing |
+
+## Mistakes Everyone Makes (and Easy Fixes)
+
+Do not worry if you have already done these. Every developer has.
+
+### Mistake 1: Using empty paragraphs for spacing
+
+```html
+<!-- Please don't -->
+<p>First idea.</p>
+<p></p>
+<p></p>
+<p>Second idea.</p>
+```
+
+Empty `<p></p>` tags add noise, not meaning. If you want more space, use CSS `margin` or `padding` instead.
+
+### Mistake 2: Putting one paragraph inside another
+
+```html
+<!-- This does not work the way you expect -->
+<p>
+ Outer paragraph
+ <p>Inner paragraph</p>
+</p>
+```
+
+Paragraphs cannot contain other paragraphs. The browser will quietly close the first one as soon as it sees the second, and your layout will not match what you wrote.
+
+### Mistake 3: Putting block elements inside a paragraph
+
+A `<p>` can hold **text and inline elements** like `<strong>`, `<em>`, `<a>`, and `<code>`. It should not hold headings, lists, or `<div>` elements.
+
+```html
+<!-- Fine -->
+<p>This is <strong>important</strong> and this is <em>stressed</em>.</p>
+
+<!-- Not fine -->
+<p>
+ <h2>A heading inside a paragraph</h2>
+</p>
+```
+
+### Mistake 4: Forgetting the closing tag
+
+Browsers are forgiving and will often guess where a paragraph ends. Still, always write `</p>`. It keeps your code clean and avoids strange surprises later.
+
+:::warning Do not use paragraphs for everything
+A paragraph is for a block of related sentences. If you need a title, use a [heading](./headings). If you need a list of items, use a list element. Picking the right tag helps search engines and screen readers understand your page.
+:::
+
+## Paragraphs vs Line Breaks
+
+Beginners often ask, "Should I press Enter or start a new paragraph?" Here is a simple way to decide.
+
+| Situation | Use |
+| :-- | :-- |
+| A new idea or topic | A new `<p>` |
+| A line inside the same thought, like an address or a poem | `<br />` inside one `<p>` |
+
+We will look at line breaks properly in the next lesson.
+
+## Try It Yourself
+
+Grab your editor and give this a go.
+
+1. Create a file called `about-me.html`.
+2. Write an `<h1>` with your name.
+3. Add **three paragraphs**: who you are, what you are learning, and what you want to build.
+4. Add a `<style>` block that sets `line-height: 1.7` and `max-width: 60ch` on `p`.
+5. Open the file in your browser and read it out loud. Does it feel comfortable?
+
+If it does, you are already writing like a web developer. π
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. Which tag creates a paragraph?</summary>
+
+The `<p>` tag.
+
+</details>
+
+<details>
+<summary>2. Why do extra spaces in my code not show up in the browser?</summary>
+
+Browsers collapse whitespace. Any run of spaces, tabs, and line breaks turns into a single space.
+
+</details>
+
+<details>
+<summary>3. Is a paragraph a block-level or inline element?</summary>
+
+Block-level. It starts on a new line and stretches across the available width.
+
+</details>
+
+<details>
+<summary>4. What should you use instead of empty paragraphs to add space?</summary>
+
+CSS properties such as `margin` or `padding`.
+
+</details>
+
+<details>
+<summary>5. Can you place a `<p>` inside another `<p>`?</summary>
+
+No. The browser closes the first paragraph automatically, so nesting does not work.
+
+</details>
+
+## Key Takeaways
+
+- Use `<p>` for blocks of text, and give each idea its own paragraph.
+- Paragraphs are block elements with default space above and below.
+- Browsers collapse extra spaces and blank lines, so use tags and CSS to control layout.
+- Do not use empty paragraphs for spacing, and do not nest one paragraph in another.
+- A little CSS, like `line-height` and `max-width`, makes text much nicer to read.
+
+You have got the hang of paragraphs. Next up, learn how to break lines without starting a new paragraph in [Line Breaks](./line-breaks).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/quotations.mdx b/tutorials/html/03-text-content/quotations.mdx
index b1c29ca1b..e4a5aad29 100644
--- a/tutorials/html/03-text-content/quotations.mdx
+++ b/tutorials/html/03-text-content/quotations.mdx
@@ -2,7 +2,7 @@
id: quotations
title: "Blockquotes and Inline Quotations in HTML"
sidebar_label: "Quotations"
-sidebar_position: 9
+sidebar_position: 8
slug: /html/text-content/quotations
description: "Master blockquote and q elements in HTML for long-form quotes and inline text quotations, including cite attributes for source tracking."
keywords:
diff --git a/tutorials/html/03-text-content/strong-and-bold.mdx b/tutorials/html/03-text-content/strong-and-bold.mdx
index f74ef50ef..96ec95df2 100644
--- a/tutorials/html/03-text-content/strong-and-bold.mdx
+++ b/tutorials/html/03-text-content/strong-and-bold.mdx
@@ -1,15 +1,367 @@
---
-id: strong-and-bold
-title: "Strong Importance vs Bold Text: strong vs b Tags"
-sidebar_label: "Strong & Bold"
+id: html-strong-and-bold
+title: "HTML Strong and Bold"
+sidebar_label: "Strong and Bold"
sidebar_position: 6
slug: /html/text-content/strong-and-bold
-description: "Understand the semantic difference between the strong tag for high importance and the b tag for stylistic bold offset in HTML."
+description: "Learn the difference between the HTML strong and b tags. Understand semantic importance vs visual style, accessibility, font-weight in CSS, and best practices for global audiences, explained in simple language on CodeHarborHub."
keywords:
- - strong vs b tag
- - bold text HTML
- - semantic strong tag
- - visual vs semantic emphasis
+ - HTML strong tag
+ - HTML b tag
+ - HTML strong vs b
+ - HTML bold text
+ - HTML semantic tags
+ - CSS font-weight
+ - HTML text importance
+ - HTML accessibility bold text
+ - learn HTML bold
- CodeHarborHub HTML
-tags: [html, typography, semantics, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, strong, bold, text, frontend]
+---
+
+Imagine you are reading a safety notice. One sentence is darker than the rest: **"Do not touch the wire."** Your eyes go straight to it. You do not need to be told it matters. The design already said it for you.
+
+On the web, we can do the same thing with two HTML tags, `<strong>` and `<b>`. Both show text in **bold** by default, so many learners think they are the same. They are not. The difference is small, but it is one of the most useful ideas in HTML, and it will make you a more thoughtful developer.
+
+<AdsComponent />
+<br />
+
+## What You Will Learn
+
+- How to make text bold with `<strong>` and `<b>`
+- The key difference: **importance** vs **appearance**
+- Which tag to choose in real situations
+- Why this choice matters for accessibility and for users around the world
+- How to control boldness with CSS `font-weight`
+- Common mistakes, and how to avoid them
+
+:::info Learning tip
+This lesson is about **meaning**. If you understand why, you will never need to memorize a rule.
+:::
+
+## The Quick Answer
+
+Both tags look the same in a browser. What changes is the message you send.
+
+| Tag | Full meaning | What it tells the browser |
+| :-- | :-- | :-- |
+| `<strong>` | Strong importance | "This text is serious or urgent." |
+| `<b>` | Bring attention to | "Notice this text, but it is not more important." |
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="index.html"
+<p><strong>Warning:</strong> Save your work before closing.</p>
+<p>Our new course covers <b>HTML</b>, <b>CSS</b>, and <b>JavaScript</b>.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<>
+<p><strong>Warning:</strong> Save your work before closing.</p>
+<p>Our new course covers <b>HTML</b>, <b>CSS</b>, and <b>JavaScript</b>.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Both lines show bold text. But in the first line, the word "Warning" carries real importance. In the second, the bold words are simply easy to spot.
+
+## The `<strong>` Tag: "This Really Matters"
+
+Use `<strong>` when the content is **important, serious, or urgent**. The meaning stays even when the visual style changes.
+
+Good uses for `<strong>`:
+
+- Warnings and safety notes
+- Deadlines and conditions the reader must not miss
+- A key sentence that changes the meaning of a paragraph
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="strong-examples.html"
+<p><strong>Do not</strong> share your password with anyone.</p>
+<p>The registration closes on <strong>31 October</strong>.</p>
+<p>This medicine is <strong>not safe for children</strong>.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/strong-examples.html">
+<>
+<p><strong>Do not</strong> share your password with anyone.</p>
+<p>The registration closes on <strong>31 October</strong>.</p>
+<p>This medicine is <strong>not safe for children</strong>.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Ask yourself one question: **"If this text were missing, would the reader make a mistake?"** If the answer is yes, `<strong>` is a good choice.
+
+### Nesting for Extra Importance
+
+You can place `<strong>` inside another `<strong>` to show that one part is even more important.
+
+```html
+<p><strong>Back up your files. <strong>Never</strong> delete the original.</strong></p>
+```
+
+Use this rarely. If everything is important, nothing stands out.
+
+## The `<b>` Tag: "Please Notice This"
+
+The `<b>` tag draws attention without saying "this is more important." Think of it as a **highlighter pen** for the eye.
+
+Good uses for `<b>`:
+
+- **Keywords** in a summary, so readers can scan quickly
+- **Product names** in a review
+- **Ingredient names** in a recipe
+- The first words of an article introduction
+
+<Tabs>
+<TabItem value="code" label="HTML Code" default>
+
+```html title="b-examples.html"
+<p>Ingredients: <b>2 cups rice</b>, <b>1 tsp salt</b>, and <b>water</b>.</p>
+<p>In this review we compare the <b>Nova X1</b> and the <b>Orbit Pro</b>.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/b-examples.html">
+<>
+<p>Ingredients: <b>2 cups rice</b>, <b>1 tsp salt</b>, and <b>water</b>.</p>
+<p>In this review we compare the <b>Nova X1</b> and the <b>Orbit Pro</b>.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Nothing here is a warning. The bold text just helps a reader scan the page quickly.
+
+## Why Does the Difference Matter?
+
+Since both look the same, it is fair to ask why we should care. There are three good reasons.
+
+### 1. Accessibility
+
+Users who cannot see the screen use **screen readers**, which read the page aloud. Tools differ in how they handle emphasis, and many do not announce bold by default. Still, `<strong>` puts real meaning in your code, so assistive technology **can** use it, and users can often customize this. A `<b>` tag or a style made only with CSS carries no such meaning.
+
+### 2. Meaning survives style changes
+
+Suppose you later redesign your site and decide important text should be **red** instead of bold. If you used `<strong>`, you change one CSS rule. If you used `<b>` everywhere, you would have to search through every page and decide which bold text was important.
+
+### 3. Clear code for your team
+
+When another developer reads `<strong>`, they instantly know your intention. Clear code is easier to maintain, and it is a habit that employers value in every country.
+
+## Choosing Between Them: A Simple Decision Guide
+
+Follow these steps.
+
+1. **Is the text important, serious, or urgent?** Use `<strong>`.
+2. **Do you only want the reader's eye to land here?** Use `<b>`.
+3. **Do you only want a different look, with no special meaning?** Use CSS instead.
+
+| Situation | Best choice |
+| :-- | :-- |
+| "Warning: high voltage" | `<strong>` |
+| "Last date to apply: 15 May" | `<strong>` |
+| A brand name in a product list | `<b>` |
+| A keyword in a scannable summary | `<b>` |
+| Making a table label look heavier | CSS `font-weight` |
+
+## Controlling Boldness with CSS
+
+Both tags are bold because the browser gives them `font-weight: bold`. You can change that with CSS. The tag keeps its **meaning**, and CSS controls the **look**.
+
+<Tabs>
+<TabItem value="code" label="HTML + CSS" default>
+
+```html title="font-weight.html"
+<style>
+ strong {
+ font-weight: 800;
+ color: #b91c1c;
+ }
+ .plain-title {
+ font-weight: 700;
+ }
+</style>
+
+<p><strong>Important:</strong> Check your internet connection.</p>
+<p class="plain-title">This text is bold only through CSS.</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/font-weight.html">
+<>
+<p><strong style={{fontWeight: 800, color: '#b91c1c'}}>Important:</strong> Check your internet connection.</p>
+<p style={{fontWeight: 700}}>This text is bold only through CSS.</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+Here are common `font-weight` values.
+
+| Value | Name | Note |
+| :-- | :-- | :-- |
+| `400` | Normal | The default for body text |
+| `500` | Medium | Available only if the font supports it |
+| `600` | Semi-bold | Popular for subtle emphasis |
+| `700` | Bold | Same as the keyword `bold` |
+| `800` to `900` | Extra bold | Only in fonts that include these weights |
+
+:::tip Good to know
+A font can show a weight only if that weight is available in the font file. If a font has only regular and bold, values like `600` and `800` may look identical to `700`.
+:::
+
+## Writing for a Global Audience
+
+People read your pages in many languages and scripts, so it helps to think beyond English.
+
+<Tabs>
+<TabItem value="code" label="Multilingual Example" default>
+
+```html title="global.html"
+<p><strong>Attention:</strong> The server will restart tonight.</p>
+<p><strong>AtenciΓ³n:</strong> El servidor se reiniciarΓ‘ esta noche.</p>
+<p><strong>ΰ€Έΰ€Ύΰ€΅ΰ€§ΰ€Ύΰ€¨:</strong> ΰ€Έΰ€°ΰ₯ΰ€΅ΰ€° ΰ€ΰ€ ΰ€°ΰ€Ύΰ€€ ΰ€°ΰ₯ΰ€Έΰ₯ΰ€ΰ€Ύΰ€°ΰ₯ΰ€ ΰ€Ήΰ₯ΰ€ΰ€Ύΰ₯€</p>
+<p><strong>注ζ:</strong> γ΅γΌγγΌγ―δ»ε€εθ΅·εγγΎγγ</p>
+```
+
+</TabItem>
+<TabItem value="output" label="Browser Output">
+
+<BrowserWindow url="http://127.0.0.1:5500/global.html">
+<>
+<p><strong>Attention:</strong> The server will restart tonight.</p>
+<p><strong>AtenciΓ³n:</strong> El servidor se reiniciarΓ‘ esta noche.</p>
+<p><strong>ΰ€Έΰ€Ύΰ€΅ΰ€§ΰ€Ύΰ€¨:</strong> ΰ€Έΰ€°ΰ₯ΰ€΅ΰ€° ΰ€ΰ€ ΰ€°ΰ€Ύΰ€€ ΰ€°ΰ₯ΰ€Έΰ₯ΰ€ΰ€Ύΰ€°ΰ₯ΰ€ ΰ€Ήΰ₯ΰ€ΰ€Ύΰ₯€</p>
+<p><strong>注ζ:</strong> γ΅γΌγγΌγ―δ»ε€εθ΅·εγγΎγγ</p>
+</>
+</BrowserWindow>
+
+</TabItem>
+</Tabs>
+
+The same tag works in every language, which is a big benefit of semantic HTML. A few friendly reminders:
+
+- **Do not rely on bold alone.** Some fonts and scripts do not have a true bold style, so the browser may fake it. Bold can look blurry in these cases, so test your page with the languages you support.
+- **Make sure the text says it too.** Words like "Warning" or "Important" help users who cannot see the bold style, and they translate well.
+- **Add the `lang` attribute** to your page, for example `<html lang="hi">`. It helps browsers, translation tools, and screen readers choose the right pronunciation and font.
+- **Keep contrast high.** Bold gray text on a light background is still hard to read for many people.
+
+## Common Mistakes
+
+### Mistake 1: Using `<strong>` for headings
+
+```html
+<!-- Please avoid -->
+<p><strong>Chapter 1: Getting Started</strong></p>
+
+<!-- Better -->
+<h2>Chapter 1: Getting Started</h2>
+```
+
+A heading gives your page structure. Bold text does not. See the [Headings](./headings) lesson for more.
+
+### Mistake 2: Bolding entire paragraphs
+
+```html
+<!-- Too much -->
+<p><strong>Welcome to our website. We offer many courses. Please read all of the
+following text carefully because everything here is important.</strong></p>
+```
+
+When everything is bold, nothing stands out. Keep bold text to a few words or one short sentence.
+
+### Mistake 3: Using bold only for size or style
+
+If you only want text to look heavier in a design, such as a table header or a button label, use CSS `font-weight`. Do not add `<strong>` to say something is important when it is not.
+
+### Mistake 4: Using bold when a link or list is better
+
+Instead of bolding a list of items in one paragraph, use a proper list. Instead of bolding "click here", write a clear link with descriptive text.
+
+### Mistake 5: Believing `<strong>` boosts search ranking
+
+Search engines may notice emphasized text, but wrapping keywords in `<strong>` does not magically improve your ranking. Write for people first. Clear, useful content is what matters.
+
+## Try It Yourself
+
+Practice with a short project.
+
+1. Create a file named `notice.html`.
+2. Write a short paragraph about a class or event.
+3. Use `<strong>` for **one** important detail, like the date or a rule.
+4. Use `<b>` for the **names** of two topics or products.
+5. Add a CSS rule to make your `<strong>` text dark red.
+6. Ask a friend: "Which part of this notice matters most?" If they choose your `<strong>` text, you did it right.
+
+<AdsComponent />
+<br />
+
+## Quick Recap
+
+Click a question to check your answer.
+
+<details>
+<summary>1. What is the main difference between `<strong>` and `<b>`?</summary>
+
+`<strong>` shows that text is important. `<b>` only draws attention to text, without adding importance.
+
+</details>
+
+<details>
+<summary>2. Which tag would you use for "Do not share your password"?</summary>
+
+`<strong>`, because it is a serious instruction the reader must not miss.
+
+</details>
+
+<details>
+<summary>3. How do you make text bold without adding meaning?</summary>
+
+Use CSS, for example `font-weight: 700`.
+
+</details>
+
+<details>
+<summary>4. Why should you avoid using `<strong>` for page titles?</summary>
+
+Titles need heading tags such as `<h1>` or `<h2>`. Headings build the page outline, and bold text does not.
+
+</details>
+
+<details>
+<summary>5. Why is it a good idea to write the word "Warning" and not depend on bold alone?</summary>
+
+Some users cannot see the styling, some fonts do not have a true bold, and clear words translate and read aloud well.
+
+</details>
+
+## Key Takeaways
+
+- `<strong>` means **important**. `<b>` means **look here**.
+- Both are bold by default, but the meaning is different, and meaning is what HTML is for.
+- Use CSS `font-weight` when you only need a visual change.
+- Keep bold text short, and do not use it in place of headings, lists, or links.
+- Write clear words and set the `lang` attribute so your content works for readers everywhere.
+
+You now know how to show importance and attention. Next, learn how to add stress and tone to your writing in [Emphasis and Italic](./emphasis-and-italic).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/subscript-and-superscript.mdx b/tutorials/html/03-text-content/subscript-and-superscript.mdx
index 674b76c9b..bcc1c7280 100644
--- a/tutorials/html/03-text-content/subscript-and-superscript.mdx
+++ b/tutorials/html/03-text-content/subscript-and-superscript.mdx
@@ -2,7 +2,7 @@
id: subscript-and-superscript
title: "Subscript and Superscript: Working with sub and sup Tags"
sidebar_label: "Subscript & Superscript"
-sidebar_position: 13
+sidebar_position: 12
slug: /html/text-content/subscript-and-superscript
description: "Format mathematical formulas, chemical equations, footnotes, and ordinal indicators using HTML sub and sup tags."
keywords:
diff --git a/tutorials/html/03-text-content/underline.mdx b/tutorials/html/03-text-content/underline.mdx
index 2e51bd734..e42b881cc 100644
--- a/tutorials/html/03-text-content/underline.mdx
+++ b/tutorials/html/03-text-content/underline.mdx
@@ -2,7 +2,7 @@
id: underline
title: "The u Tag: Representing Unarticulated Annotations"
sidebar_label: "Underline"
-sidebar_position: 8
+sidebar_position: 13
slug: /html/text-content/underline
description: "Learn how and when to use the u element for unarticulated non-textual annotations such as misspelling indicators or proper name offsets."
keywords: