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:

markdown

---

markdown

***

markdown

___

All three methods have the same effect:

Syntax Rules

Symbol Quantity

Must use three or more symbols:

markdown

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

Symbol Mixing

Can mix -, *, _:

markdown

- * - * - * -

Effect:

Space Requirements

Symbols can have optional spaces:

markdown

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

Cannot Contain Other Characters

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

markdown

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

Horizontal Rule Styles

Standard Horizontal Rule

markdown

---

Effect:

Thicker Horizontal Rule

Some editors display *** as a thicker line:

markdown

***

Effect:

Mixed Style

markdown

- - - - - -

Effect:

Application Scenarios of Horizontal Rules

1. Chapter Separation

markdown

## Chapter 1

This is the content of Chapter 1.

---

## Chapter 2

This is the content of Chapter 2.

2. Topic Switching

markdown

## Preface

Preface content...

---

## Main Content

Main content starts...

---

## Conclusion

Conclusion part...

3. Topic Separation

markdown

Today I learned Markdown.

* Markdown introduction
* Basic syntax
* Advanced usage

---

Tomorrow I plan to learn HTML.

4. Content Segmentation

markdown

### 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

> "Markdown makes writing simple."

---

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

6. Code Example Separation

markdown

## Python Example

```python
print("Hello from Python")

JavaScript Example

javascript

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:

markdown

✅ 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:

markdown

✅ 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:

markdown

✅ Has blank lines
Content above

---

Content below

❌ No blank lines
Content above
---
Content below

4. Coordinate with Other Elements

Coordinate with headings:

markdown

## New Chapter

---

Content...

Coordinate with quotes:

markdown

> 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

markdown

---

Content separation

Headings

Used for content structure
Clear semantic hierarchy
Generates TOC

markdown

## 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

html

<hr>

Effect:

With Style

html

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

Effect:

With Color

html

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

Effect:

Dashed Horizontal Rule

html

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

Effect:

Dotted Horizontal Rule

html

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

Effect:

Custom Thickness

html

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

Effect:

Gradient Horizontal Rule

html

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

Effect:

Rendering Differences on Different Platforms

GitHub

markdown

---

Renders as thin gray solid line.

GitLab

markdown

---

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

markdown

# Article Title

## Preface

Article introduction...

---

## Main Content

### Section 1

Section 1 content...

---

### Section 2

Section 2 content...

---

## Conclusion

Article conclusion...

Technical Documentation

markdown

# 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

markdown

# 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

markdown

## 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

html

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

Effect:

Horizontal Rule with Text

html

<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:

Separator Text

Icon Horizontal Rule

html

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

Effect:

⭐️ ⭐️ ⭐️

Horizontal Rule Style Comparison

Type	Markdown	HTML	Features
Standard	`---`	`<hr>`	Simple, cross-platform
Thick line	`***`	`<hr style="border-width: 2px;">`	Thicker
Dashed	Not supported	`<hr style="border-style: dashed;">`	Dashed effect
Dotted	Not supported	`<hr style="border-style: dotted;">`	Dotted
Colored	Not supported	`<hr style="border-color: red;">`	Custom color
Gradient	Not supported	CSS gradient	Gradient effect

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:

html

<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.

Markdown Horizontal Rules ​

Basic Horizontal Rule Syntax ​

Syntax Format ​

Syntax Rules ​

Symbol Quantity ​

Symbol Mixing ​

Space Requirements ​

Cannot Contain Other Characters ​

Horizontal Rule Styles ​

Standard Horizontal Rule ​

Thicker Horizontal Rule ​

Mixed Style ​

Application Scenarios of Horizontal Rules ​

1. Chapter Separation ​

2. Topic Switching ​

3. Topic Separation ​

4. Content Segmentation ​

5. Quote and Text Separation ​

6. Code Example Separation ​

JavaScript Example ​

Horizontal Rule Best Practices ​

1. Consistent Style ​

2. Use Moderately ​

3. Maintain Spacing ​

4. Coordinate with Other Elements ​

Difference Between Horizontal Rules and Headings ​

Horizontal Rules ​

Headings ​

Usage Recommendations ​

HTML Horizontal Rule Tags ​

Basic Usage ​

With Style ​

With Color ​

Dashed Horizontal Rule ​

Dotted Horizontal Rule ​

Custom Thickness ​

Gradient Horizontal Rule ​

Rendering Differences on Different Platforms ​

GitHub ​

GitLab ​

Typora ​

VS Code ​

Practical Examples ​

Article Structure ​

Technical Documentation ​

Blog Post ​

Email Template ​

Special Effects ​

Centered Horizontal Rule ​

Horizontal Rule with Text ​

Icon Horizontal Rule ​

Horizontal Rule Style Comparison ​

Common Questions ​

Q: Horizontal rule not displaying? ​

Q: Different display on different platforms? ​

Q: How to adjust horizontal rule thickness? ​

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

Summary ​

Markdown Horizontal Rules

Basic Horizontal Rule Syntax

Syntax Format

Syntax Rules

Symbol Quantity

Symbol Mixing

Space Requirements

Cannot Contain Other Characters

Horizontal Rule Styles

Standard Horizontal Rule

Thicker Horizontal Rule

Mixed Style

Application Scenarios of Horizontal Rules

1. Chapter Separation

2. Topic Switching

3. Topic Separation

4. Content Segmentation

5. Quote and Text Separation

6. Code Example Separation

JavaScript Example

Horizontal Rule Best Practices

1. Consistent Style

2. Use Moderately

3. Maintain Spacing

4. Coordinate with Other Elements

Difference Between Horizontal Rules and Headings

Horizontal Rules

Headings

Usage Recommendations

HTML Horizontal Rule Tags

Basic Usage

With Style

With Color

Dashed Horizontal Rule

Dotted Horizontal Rule

Custom Thickness

Gradient Horizontal Rule

Rendering Differences on Different Platforms

GitHub

GitLab

Typora

VS Code

Practical Examples

Article Structure

Technical Documentation

Blog Post

Email Template

Special Effects

Centered Horizontal Rule

Horizontal Rule with Text

Icon Horizontal Rule

Horizontal Rule Style Comparison

Common Questions

Q: Horizontal rule not displaying?

Q: Different display on different platforms?

Q: How to adjust horizontal rule thickness?

Q: Can add text in middle of horizontal rule?

Summary