SGML

Markdown Header Examples

atx-header0 atx-header1
Basic header example
atx-header2
A header line must start at the first column
list-after-header0 list-after-header1
Lists following headers
setext-header0
Basic example for a setext-style header
atx-header-with-section-number0 atx-header-without-section-number0
Generation of special fragment identifiers for headers with section numbers

atx-header0

# This is a top-level (h1) header
And this is text following it.

Rendered HTML

<h1 id="this-is-a-top-level-h1-header">This is a top-level (h1) header
</h1><p>And this is text following it.
</p>

atx-header1

# This is a top-level atx-style header with trailing (cosmetic) hash mark #
Text appearing as paragraph to the top-level section.
## This is a 2nd-level atx-style header ##
Text appearing as paragraph to the 2nd-level section.
Note that pandoc (without strict option) needs a blank
before a header, but won't generate header ids in strict mode.

Rendered HTML

<h1 id="this-is-a-top-level-atx-style-header-with-trailing-cosmetic-hash-mark">This is a top-level atx-style header with trailing (cosmetic) hash mark
</h1><p>Text appearing as paragraph to the top-level section.
</p><h2 id="this-is-a-2nd-level-atx-style-header">This is a 2nd-level atx-style header
</h2><p>Text appearing as paragraph to the 2nd-level section.
Note that pandoc (without strict option) needs a blank
before a header, but won't generate header ids in strict mode.
</p>

atx-header2

 # This non-header doesn't begin at the first column
It isn't recognized as header by markdown.pl, pandoc, nor markdown.awk.

Rendered HTML

<p> # This non-header doesn't begin at the first column
It isn't recognized as header by markdown.pl, pandoc, nor markdown.awk.
</p>

list-after-header0

# This is a header #
- and this starts a list
- which shouldn't render as plain paragraph

Rendered HTML

<h1 id="this-is-a-header">This is a header
</h1><ul><li>and this starts a list
</li><li>which shouldn't render as plain paragraph
</li></ul>

list-after-header1

# This is a header #
1. and this starts a numbered list
2. which shouldn't render as plain paragraph

Rendered HTML

<h1 id="this-is-a-header">This is a header
</h1><ol><li>and this starts a numbered list
</li><li>which shouldn't render as plain paragraph
</li></ol>

setext-header0

This demonstrates Setext-style (underlined) headers
===================================================

This would be a sub header
---

The number of `=`'s or `-`'s doesn't matter as long
it is the only char on the line.

Rendered HTML

<h1 id="this-demonstrates-setext-style-underlined-headers">This demonstrates Setext-style (underlined) headers
</h1><h2 id="this-would-be-a-sub-header">This would be a sub header
</h2><p>The number of <code>=</code>'s or <code>-</code>'s doesn't matter as long
it is the only char on the line.
</p>

atx-header-with-section-number0

# 1. Header for a numbered section #
## 1.1. Header for a numbered subsection ##
## 1.2. Header for a numbered subsection ##
Point of this is that automatic links/header ids
are generated based on section numbers, if present,
so that [this link][sect_1_1] goes to the header
of section 1.1.

Rendered HTML

<h1 id="sect_1">1. Header for a numbered section
</h1><h2 id="sect_1_1">1.1. Header for a numbered subsection
</h2><h2 id="sect_1_2">1.2. Header for a numbered subsection
</h2><p>Point of this is that automatic links/header ids
are generated based on section numbers, if present,
so that <a href="#sect_1_1" title="1.1. Header for a numbered subsection">this link</a> goes to the header
of section 1.1.
</p>

atx-header-without-section-number0

# Header for a non-numbered section #
## Header for a non-numbered subsection ##
## Header for a non-numbered subsection ##
Demonstrates automatic header id generation
for headers without numbers;
[this link][header-for-a-non-numbered-section] goes to main header,
whereas there will be a link id clash on the third section header

Rendered HTML

<h1 id="header-for-a-non-numbered-section">Header for a non-numbered section
</h1><h2 id="header-for-a-non-numbered-subsection">Header for a non-numbered subsection
</h2><h2 id="header-for-a-non-numbered-subsection">Header for a non-numbered subsection
</h2><p>Demonstrates automatic header id generation
for headers without numbers;
<a href="#header-for-a-non-numbered-section" title="Header for a non-numbered section">this link</a> goes to main header,
whereas there will be a link id clash on the third section header
</p>