06.04 Basic Markdown and text formatting

6.4Emphasis with bold

Any text can be made bold by surrounding it with two asterisks ** (without spaces) i.e.

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
The next word is in bold
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>The next word is in <strong>bold</strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
The next word is in bold
^{Table 6.15 — Bold text}

Bold can carry over between lines:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is not in bold the rest is in bold And so is this.
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>This is not in bold <strong>the rest is in bold</strong></p> <p><strong>And so is this.</strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is not in bold the rest is in bold And so is this.
^{Table 6.16 — Bold text across lines}

Note

The carry over between lines does not work if the Markdown is inside any form of HTML tag <p>, <table> &c., in such cases, each line must have its own set of asterisks.

A double underscore can be used in exactly the same way

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
The next word is in __bold__
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>The next word is in <strong>bold</strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
The next word is in bold
^{Table 6.17 — Bold text using underscores}

${\LARGE \color{#C00000}\text{DO\ NOT\ USE\ UNDERSCORES\ FOR\ BOLD}}$

The use of two underscore characters for bold in the middle of a word is misinterpreted by some Markdown applications. Don’t use underscores, always use asterisks.

⬆️ Top

6.4.1Markdown rules for bold

	^{List 6.4 — Markdown rules for bold}
❶	Surround the text that is to be in bold with two asterisks `**` before and after
❷	Do not use double underscores (always use asterisks)
❸	Bold text can span lines (but not if inside a HTML tag)
❹	Use `<strong>` in place of asterisks if using bold inside HTML tags

The use of asterisks for bold inside HTML tags is a bit hit and miss; it works if there is at least one blank line separating the Markdown containing the asterisks from the HTML tag itself. I don’t know why.

Generally, it is better to use the <strong> tag for bold text if it is inside any HTML tag.

⬆️ Top

6.4.2Bold text examples

^{Markdown, HTML equivalence and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
Lorem ipsum dolor sit	Lorem ipsum dolor sit Consectetur elit.
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>Lorem <strong>ipsum</strong> dolor sit </p>	<p>Lorem <strong>ipsum dolor sit </strong></p> <p><strong> Consectetur</strong> elit.</p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Lorem ipsum dolor sit	Lorem ipsum dolor sit Consectetur elit.
^{Table 6.18 — Bold text examples}

⬆️ Top

6.5Emphasis with italics

Any text can be made italic by surrounding it with a single asterisk i.e.

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
The next word is in italics
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>The next word is in <em>italics</em></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
The next word is in italics
^{Table 6.19 — Italic text}

Italics can carry over between lines:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is not in italics the rest is in italics And so is this.
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>This is not in italics <em>the rest is in italics</em></p> <p><em>And so is this.</em></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is not in italics the rest is in italics And so is this.
^{Table 6.20 — Italics text across lines}

Note

The carry over between lines does not work if the Markdown is inside any form of HTML tag <p>, <table> &c., in such cases, each line must have its own set of asterisks.

A single underscore can be used in exactly the same way

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
The next word is in _italics_
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>The next word is in <em>italics</em></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
The next word is in italics
^{Table 6.21 — Italic text using underscores}

${\LARGE \color{#C00000}\text{DO\ NOT\ USE\ UNDERSCORES\ FOR\ ITALICS}}$

The use of an underscore characters for italics in the middle of a word is misinterpreted by some Markdown applications. Don’t use underscores, always use asterisks.

⬆️ Top

6.5.1Markdown rules for italics

	^{List 6.5 — Markdown rules for italics}
❶	Surround the text that is to be in italics with a single asterisk `*` before and after
❷	Do not use double underscores (always use asterisks)
❸	Italic text can span lines (but not if inside a HTML tag)
❹	Use `<em>` in place of asterisks if using italics inside HTML tags

The use of asterisks for italics inside HTML tags is a bit hit and miss; it works if there is at least one blank line separating the Markdown containing the asterisks from the HTML tag itself. I don’t know why.

Generally, it is better to use the <em> tag for italic text if it is inside any HTML tag.

⬆️ Top

6.5.2Italic text examples

^{Markdown, HTML equivalence and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
Lorem ipsum dolor sit	Lorem ipsum dolor sit Consectetur elit.
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>Lorem <em>ipsum</em> dolor sit </p>	<p>Lorem <em>ipsum dolor sit </em></p> <p><em> Consectetur</em> elit.</p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Lorem ipsum dolor sit	Lorem ipsum dolor sit Consectetur elit.
^{Table 6.22 — Italic text examples}

⬆️ Top

6.6Emphasis with both bold and italics

Any text can be made both bold and italic by surrounding it with three asterisks i.e.

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is *both bold and italics*
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>This is <strong><em>both bold and italics</em></strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is both bold and italics
^{Table 6.23 — Both bold and italic text}

Bold and italics can carry over between lines:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is normal *the rest is in bold and italics And so is this.*
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>TThis is normal <strong><em>the rest is in bold and italics</em></strong></p> <p><strong><em>And so is this.</em></strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is normal the rest is in bold and italics And so is this.
^{Table 6.24 — Both bold and italic text across lines}

Note

The carry over between lines does not work if the Markdown is inside any form of HTML tag <p>, <table> &c., in such cases, each line must have its own set of asterisks.

It’s possible to split where bold and italic occur:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is *bold bold and italic* just bold** This is italic bold and italic* just italic*
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>This is <strong>bold<em> bold and italic</em> just bold</strong></p> <p>This is <em>italic<strong> bold and italic</strong> just italic</em></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is bold bold and italic just bold This is italic bold and italic just italic
^{Table 6.25 — Splitting bold and italics}

A triple underscore can be used in exactly the same way

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is ___both bold and italics___
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>This is <strong><em>both bold and italics</em></strong></p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is both bold and italics
^{Table 6.26 — Both bold and italics text using underscores}

${\LARGE \color{#C00000}\text{DO\ NOT\ USE\ UNDERSCORES\ FOR\ BOTH\ BOLD\ AND\ ITALICS}}$

The use of an underscore characters for italics in the middle of a word is misinterpreted by some Markdown applications. Don’t use underscores, always use asterisks.

⬆️ Top

6.6.1Markdown rules for both bold and italics

	^{List 6.6 — Markdown rules for both bold and italics}
❶	Surround the text that is to be in both bold and italics with three asterisks `***` before and after
❷	Do not use double underscores (always use asterisks)
❸	Both bold and italics text can span lines (but not if inside a HTML tag)
❹	Use `<strong>` and `<em>` in place of asterisks if using bold and italics inside HTML tags

The use of asterisks for italics inside HTML tags is a bit hit and miss; it works if there is at least one blank line separating the Markdown containing the asterisks from the HTML tag itself. I don’t know why.

Generally, it is better to use the <strong> and <em> tags for bold and italics text if it is inside any HTML tag.

⬆️ Top

6.6.2Both bold and italic text examples

^{Markdown, HTML equivalence and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
Lorem *ipsum* dolor sit	Lorem *ipsum Consectetur* elit
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<p>Lorem <strong><em>ipsum</em></strong> dolor sit</p>	<p>Lorem <strong><em>ipsum </em></strong></p> <p><strong><em>Consectetur</em></strong> elit</p>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Lorem ipsum dolor sit	Lorem *ipsum* *Consectetur* elit
^{Table 6.27 — Both bold and italic text examples}

Footnotes:

Note

^💠1 Both <s> and <del> tags will strikethrough text. The difference between the tags is purely semantic, <del> tells the browser that the content has been removed after the site was first published (it has textual significance), <s> simply means that the text is has been struck through and has no specific meaning in terms of textual content.↩