#Markdown Horizontal Rules

Horizontal rules are used to create visual separation in documents, helping to organize content and improve readability. Markdown provides multiple ways to create horizontal rules. This chapter will detail the use of horizontal rules and their application scenarios.

#Basic Horizontal Rule Syntax

#Syntax Format

Markdown supports three symbols for creating horizontal rules:

---

***

___

All three methods have the same effect:

#Syntax Rules

#Symbol Quantity

Must use three or more symbols:

---     ✅ Correct
----    ✅ Correct
-----   ✅ Correct
--      ❌ Incorrect, needs at least three

#Symbol Mixing

Can mix -, *, _:

- * - * - * -

Effect:

#Space Requirements

Symbols can have optional spaces:

---     ✅ No spaces
- - -   ✅ Has spaces
-- - -- ✅ Mixed spaces

#Cannot Contain Other Characters

Horizontal rules can only contain -, *, _, cannot mix:

---=    ❌ Incorrect
***:    ❌ Incorrect

#Horizontal Rule Styles

#Standard Horizontal Rule

---

Effect:

#Thicker Horizontal Rule

Some editors display *** as a thicker line:

***

Effect:

#Mixed Style

- - - - - -

Effect:

#Application Scenarios of Horizontal Rules

#1. Chapter Separation

## Chapter 1

This is the content of Chapter 1.

---

## Chapter 2

This is the content of Chapter 2.

#2. Topic Switching

## Preface

Preface content...

---

## Main Content

Main content starts...

---

## Conclusion

Conclusion part...

#3. Topic Separation

Today I learned Markdown.

* Markdown introduction
* Basic syntax
* Advanced usage

---

Tomorrow I plan to learn HTML.

#4. Content Segmentation

### Method 1: Use Tools

Use dedicated Markdown editors...

---

### Method 2: Online Editing

Use online Markdown editors...

---

### Method 3: VS Code

Use VS Code + preview plugin...

#5. Quote and Text Separation

> "Markdown makes writing simple."

---

As mentioned in the quote, Markdown's simplicity makes it popular.

#6. Code Example Separation

## Python Example

```python

print("Hello from Python")

#JavaScript Example

console.log("Hello from JavaScript");

### 7. List and Paragraph Separation

```markdown
- Item one
- Item two
- Item three

---

This is new paragraph content, separated from the list above.

#Horizontal Rule Best Practices

#1. Consistent Style

Keep consistent horizontal rule style in document:

✅ Recommended: All use ---
---

## Chapter 1
Content...

---

## Chapter 2
Content...

❌ Not Recommended: Mixed styles
***

## Chapter 1
Content...

___

## Chapter 2
Content...

#2. Use Moderately

Don't overuse horizontal rules:

✅ Reasonable use
# Main Title

Introduction content

---

## Section 1
Content...

---

## Section 2
Content...

❌ Overuse
First paragraph

---

Second paragraph

---

Third paragraph

#3. Maintain Spacing

Keep blank lines before and after horizontal rules:

✅ Has blank lines
Content above

---

Content below

❌ No blank lines
Content above
---
Content below

#4. Coordinate with Other Elements

Coordinate with headings:

## New Chapter

---

Content...

Coordinate with quotes:

> Quote content

---

Main content...

#Difference Between Horizontal Rules and Headings

#Horizontal Rules

• Mainly for visual separation
• No semantic hierarchy
• Don't participate in TOC generation

---

Content separation

#Headings

• Used for content structure
• Clear semantic hierarchy
• Generates TOC

## New Chapter

Content structure

#Usage Recommendations

• Chapter switching: Use headings
• Content separation: Use horizontal rules
• Topic change: Use horizontal rule + heading

#HTML Horizontal Rule Tags

#Basic Usage

<hr>

Effect:

#With Style

<hr style="border: 1px solid #ccc; margin: 20px 0;">

Effect:

#With Color

<hr style="border: none; border-top: 2px solid #007bff;">

Effect:

#Dashed Horizontal Rule

<hr style="border: none; border-top: 2px dashed #999;">

Effect:

#Dotted Horizontal Rule

<hr style="border: none; border-top: 2px dotted #999;">

Effect:

#Custom Thickness

<hr style="border: none; border-top: 5px solid #333;">

Effect:

#Gradient Horizontal Rule

<hr style="border: none; height: 2px; background: linear-gradient(to right, #007bff, #00d4ff);">

Effect:

#Rendering Differences on Different Platforms

#GitHub

---

Renders as thin gray solid line.

#GitLab

---

Renders as medium thickness gray line.

#Typora

Supports custom horizontal rule styles, usually renders as medium thickness.

#VS Code

When using preview plugin, styles may vary.

#Practical Examples

#Article Structure

# Article Title

## Preface

Article introduction...

---

## Main Content

### Section 1

Section 1 content...

---

### Section 2

Section 2 content...

---

## Conclusion

Article conclusion...

#Technical Documentation

# API Documentation

## Basic Information

Version, authentication methods, etc.

---

## Endpoint List

### GET /api/users

Get user list...

---

### POST /api/users

Create new user...

---

## Error Codes

Error code descriptions...

#Blog Post

# My Learning Journey

## Getting Started

In 2023, I started learning programming...

---

## Progress

Through continuous practice, I gradually mastered...

---

## Present

Now I can independently complete projects...

---

## Future

Planning to learn more new technologies...

#Email Template

## Meeting Notice

Time: January 15, 2024, 14:00
Location: Meeting Room A
Topic: Project Progress Discussion

---

## Agenda

1. Last week work review
2. This week work plan
3. Problem discussion
4. Other matters

---

## Notes

Please attend on time, inform in advance if there are conflicts.

#Special Effects

#Centered Horizontal Rule

<center>
    <hr style="width: 50%;">
</center>

Effect:

#Horizontal Rule with Text

<div style="display: flex; align-items: center; margin: 20px 0;">
    <hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
    <span style="padding: 0 10px; color: #666;">Separator Text</span>
    <hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
</div>

Effect:

#Icon Horizontal Rule

<div style="text-align: center; margin: 20px 0;">
    ⭐️ ⭐️ ⭐️
</div>

Effect:

#Horizontal Rule Style Comparison

#Common Questions

#Q: Horizontal rule not displaying?

A: Check the following:

• Are you using three or more symbols
• Are there blank lines before and after symbols
• Is it on the same line as other content

#Q: Different display on different platforms?

A: This is normal, CSS styles may vary across platforms.

#Q: How to adjust horizontal rule thickness?

A: Use HTML + CSS:

<hr style="border: none; border-top: 3px solid #333;">

#Q: Can add text in middle of horizontal rule?

A: Standard Markdown doesn't support, implement with HTML.

#Summary

This chapter detailed Markdown horizontal rule usage:

• Basic syntax: Create with -, *, _
• Syntax rules: Three or more symbols
• Application scenarios: Chapter separation, topic switching, content grouping
• Best practices: Consistent style, moderate use, maintain spacing
• HTML extensions: Custom styles, colors, thickness
• Practical applications: Document structure, technical docs, blog posts

Using horizontal rules appropriately will make your document structure clearer and more layered.

Next: Learn Markdown Advanced Tips to improve your Markdown skills.