Headings helps to organize your content into a easy to read format. Heading shows importance in your content specifying headings on a webpage. HTML has different heading tags to tell a web browser how to render content.
Markdown also have different levels of headings to structure your documents. Start lines with a # to create headings followed by word or phrase.
Always keep an empty single space between # and your content(word or phrase)
Level 1 Heading with Markdown
Above is an example for level 1 heading written with # Level 1 Heading which will be rendered by browser as <h1>Level 1 Heading</h1>.
# Level 1 Heading
<h1>Level 1 Heading</h1>Multiple ## in a row denotes smaller heading sizes.
Level 2 Heading with Markdown
Above is an example for level 2 heading written with ## Level 2 Heading which will be rendered by browser as <h2>Level 2 Heading</h2>.
## Level 2 Heading
<h2>Level 2 Heading</h2>In addition to heading helps improving accessibility for people who can’t easily read screens and also improves general structure and readability.
Heading for visually impaired readers
Visually impaired readers uses a screen reader to read the text on a screen aloud for them. Headings rendered as HTML heading tags. So by reading or listening to the headings in a content, visually impaired readers can get the gist of an article and decide if they’d like to continue reading it.
Screen readers also allow you to navigate through articles by traversing to the headings. So when your content have good descriptive headings, the readability and navigation for visually impaired readers are improved.
This is a level 2 heading improving SEO
The heading also improves SEO for your content as search engine examines & indexes search results based on keywords usage in headings.
| Markdown | HTML |
|---|---|
# Heading level 1 | <h1>Heading level 1</h1> |
## Heading level 2 | <h2>Heading level 2</h2> |
### Heading level 3 | <h3>Heading level 3</h3> |
#### Heading level 4 | <h4>Heading level 4</h4> |
##### Heading level 5 | <h5>Heading level 5</h5> |
###### Heading level 6 | <h6>Heading level 6</h6> |
You can use one # all the way up to ###### six for different heading levels.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Conclusion
Six different levels of heading styles supported by Markdown, improving accessibility & SEO.
Hope you like this!
Keep helping and happy 😄 coding
Related Articles
Deepen your understanding with these curated continuations.
How to Create Links in Markdown: A Step-by-Step Guide
Learn how to create internal and external links in Markdown. Master the syntax for anchor text, URLs, titles, and automatic email links for better navigation.
Markdown List Guide: Ordered and Unordered Lists
Master Markdown lists with this easy guide. Learn how to create ordered and unordered lists, nested items, and best practices for clean, readable documents.
Markdown Emphasis Guide: Bold, Italic, and Strikethrough
Learn how to apply text formatting in Markdown using bold, italic, and strikethrough styles. Improve your document's readability with simple syntax rules.
