Adding Horizontal Lines in Markdown: A Developer‘s Guide

Markdown has rapidly become the standard for creating formatted documents on the web. With its simple syntax, Markdown makes it easy for developers to write their project docs.

In this comprehensive guide, we will learn how developers can add horizontal lines in Markdown to visually separate sections in their documentation or other textual content.

A Brief History of Markdown

To understand Markdown‘s capabilities, let‘s briefly review its origins:

• 2004 – Original Markdown syntax created by John Gruber along with Aaron Swartz
• 2004-2011 – Early adoption on sites like Stack Overflow and GitHub helps Markdown gain traction in technical writing
• 2014 – Rapid growth begins. Variations like GitHub Flavored Markdown (GFM) emerge
• 2016 – The CommonMark specification is created to standardize Markdown
• 2018 – Over 50% of developers use Markdown according to State of Developer Ecosystem survey
• 2022 – Majority of static site generators and documentation tools now support Markdown

Since its humble beginnings in 2004, Markdown has quickly become integral to the modern developer stack when creating documentation or static websites.

Next, let‘s compare some leading Markdown implementations.

Comparing Markdown Libraries and Extensions

While the original format was created by Gruber, many flavors of Markdown exist today with custom extensions:

Markdown Variant	Created By	Key Extensions
CommonMark	Standardization project	Follows original syntax strictly
GitHub Flavored Markdown (GFM)	GitHub	Adds tables, task lists, strikethrough syntax
Markdown Extra	Michel Fortin	Adds tables, footnotes, definition lists
MultiMarkdown	Fletcher Penney	Adds citations, metadata, LaTeX support
Reddit Comment Markdown	Reddit	Custom formats for Reddit comments

This fragmentation led to slight inconsistencies in Markdown syntax and capabilities across tools.

So CommonMark was created in 2014 to standardize Markdown:

"Markdown badly needed and still needs standardization. The CommonMark spec provides a solid standard that most platforms have adopted"

Today, most libraries adhere closely to CommonMark while adding minor custom features. GitHub Flavored Markdown (GFM) is one of the most popular flavors among developers.

Now let‘s compare Markdown to HTML.

Markdown vs HTML Syntax

To highlight the advantages of Markdown, let‘s contrast some examples side-by-side with HTML:

Formatting	Markdown	HTML
Headings	# Heading 1 ## Heading 2	<h2>Heading 2</h2>
Bold text	**bold**	<strong>bold</strong>
Hyperlinks	[title](https://example.com)	<a href="https://example.com">title</a>
Image insertion		<img src="image.jpg" alt="alt">

As shown above, the Markdown syntax is substantially simpler compared to verbose HTML tags. This improves readability and cleanliness of source files.

Additionally, Markdown is platform-agnostic plain text whereas HTML needs to be rendered by a web browser. This portability offers more flexibility in where Markdown can be leveraged.

No wonder then that adoption of Markdown has exploded recently.

The Rise of Markdown and Adoption Stats

Markdown has seen massive growth in usage among developers, writers, and content creators thanks to its versatility and ubiquity across platforms:

2016 - Over 50% of developers used Markdown daily (Source: SD Times)

2018 - 33% of developers preferred writing docs in Markdown (Source: State of Developer Ecosystem) 

2021 - Markdown used in over 52 million projects on GitHub
               up from 30+ million projects in 2019               
                (Source: Official GitHub Blog)

2022 - 82% of developers authoring documentation use Markdown
          (Source: Padok‘s Annual Developer Report)  

Fueling this growth is support for Markdown across diverse platforms:

With robust tooling and wide adoption, Markdown‘s popularity shows no signs of slowing down!

Now let‘s see how to create horizontal lines using Markdown syntax.

Creating Horizontal Rules in Markdown

In documents, horizontal lines help:

• Visually separate sections
• Divide content into logical blocks
• Improve readability

For example:

---

There are two main approaches to add horizontal lines in Markdown documents:

1. Markdown Syntax
2. HTML tags

Let‘s explore how each of these work.

Using Markdown Syntax

To add a horizontal rule using just Markdown, use 3 or more of these characters:

*** 

___

---

For instance:

# Heading

Some paragraph text

***

## Subheading

More text  

This will generate:

Some paragraph text

---

Subheading

More text

By convention, dashes (---) are most commonly used, but underscores and asterisks work too.

However, there are some key rules to watch out for when applying this syntax:

✅ Do include blank lines before and after the line characters

❌ Don‘t mix and match different line characters like ***, ---, ___

For example:

Without line breaks:

---title

Will render incorrectly as:

---title

Whereas adding line spacing fixes it:

With line breaks:


---

### title  

Renders properly as:

---

title

So with this approach, adding horizontal lines in Markdown is simple but has limited customization options.

Next, let‘s see how to use HTML for greater flexibility.

Using the HTML <hr> tag

To add a horizontal line with more styling control, you can use the <hr> HTML tag:

<hr>

For instance:

# Heading

Some text

<hr> 

## Subheading

More content 

Renders to:

Some text

---

Subheading

More content

The <hr> tag is converted into a horizontal rule element in the rendered output.

In addition, you can customize widths, colors, lengths and other properties using CSS styles:

<hr style="border: 2px dotted red; width: 75%">

Renders to:

---

This makes the HTML method far more flexible for styling horizontal lines in Markdown.

Horizontal Line Syntax Comparison

To summarize, here is a comparison between the Markdown and HTML approaches:

Feature	Markdown Syntax	HTML <hr> tag
Creation	---	<hr>
Customization	Not available	Advanced via CSS
Ease of use	Very easy	Slightly more complex
Common issues	Spacing, mixing of symbols	None

So in summary:

• Markdown syntax – Simplest way to create a basic horizontal rule
• HTML tags – Enable greater customization and control

Now let‘s see some examples across popular Markdown implementations.

Horizontal Line Syntax in Markdown Libraries

While the CommonMark spec standardizes most Markdown syntax, there can be subtle variations across tools:

Markdown Format	Horizontal Line Syntax
Original Markdown	*** --- ___
CommonMark	*** --- ___
GitHub Flavored Markdown (GFM)	*** --- ___
Markdown Here	*** --- ___
Stack Overflow	*** ---
Reddit Comments	*** --- ___
Discord	*** --- ___
MediaWiki	----
BBCode	[hr]

As shown above, nearly all libraries retain compatibility with the horizontal line markdown construct using ***, ---, and ___.

So you can author documents confidently using those symbols knowing that the output will remain consistent across tools.

Now, let‘s visualize the full process of converting Markdown to HTML.

Visual Guide to Markdown Conversion

When editing Markdown, developers often need to export it to HTML for embedding in websites, apps, or emails.

Here is a visual overview of that conversion process:

As depicted in the diagram above:

1. Author creates Markdown file with syntax for formatting
2. Markdown preprocessors convert Markdown to HTML tags
3. The generated HTML can then be used in websites and other applications

On that note, let‘s cover some best practices when working with horizontal lines in Markdown.

Best Practices For Horizontal Lines

When adding horizontal lines, here are some recommended tips:

Be Consistent

Pick either the Markdown or HTML approach within documents for consistency:

Good:  

***

<hr> 

Bad:

***

--- 

<hr>

Use Sparingly

Only apply horizontal lines when it substantially improves readability:

Too many lines:

*** 

***

*** 

Just enough:


***

Test the Output

Validate how custom styles render across browsers:

<hr style="border-color: red">

Renders well in modern browsers 
But not in outdated ones

By following these best practices, you can enhance horizontal lines in your Markdown.

The Future of Markdown

Markdown‘s popularity shows no signs of slowing down, especially among the developer community:

2025 Projection: 

    Over 70% of developers will use Markdown daily

    100,000+ sites based on Markdown generators

Trends Driving Adoption:

    1. Rise of static site generators  
    2. Growth of developer docs and wikis                     
    3. Support in major cloud platforms & SaaS tools 

With increasing support across content platforms, Markdown will likely continue its ascendancy as the de-facto writing standard among tech audiences for the foreseeable future.

Conclusion

We have thoroughly covered techniques to create horizontal lines in Markdown using both native syntax and HTML tags:

• Horizontal rule elements separate document sections
• Use 3+ asterisks, dashes or underscores to generate a line
• <hr> tags enable custom widths, colors, lengths
• Markdown converts cleanly to HTML for broader use
• Adhere to formatting best practices for optimal rendering

With over 3 billion documents now stored in Markdown source across commercial platforms like Google Docs, Dropbox, GitHub and GitLab, having strong Markdown skills is vital for any modern developer to collaborate and share content effectively.

So leverage the tips in this guide to start incorporating thoughtfully-formatted horizontal lines in your Markdown docs!