Header types


<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Inserting an image


<img src="Assets/Art/Panda-Fall.png" alt="Fall" width=200 height=200><br>
<img src="https://wallup.net/wp-content/uploads/2018/10/07/163028-kitty.jpg" alt="https://wallup.net/wp-content/uploads/2018/10/07/163028-kitty.jpg" height=300>

https://wallup.net/wp-content/uploads/2018/10/07/163028-kitty.jpg

HTML text

Paragraph styling


<!-- Press Ctrl+A to see the secret message ;) -->
<p title="Woooh~ Spooky" style='color: #0ad0bb; font-family: "Comic Sans MS"; font-size: 420%; text-align: right;'>
You can't see me :)
</p>

You can't see me :)

Tooltip


<p title="Inspirational quote or whatever. HAHAHAHAHA">
"They say that a person must learn to read between the lines to see beyond what is explicitly written.<br>
But sometimes spaces are just spaces."
</p>
<pre title="Where's the lie?">
- From a person who mostly reads fanfiction
</pre>

"They say that a person must learn to read between the lines to see beyond what is explicitly written.
But sometimes spaces are just spaces."

						- From a person who mostly reads fanfiction

Text format


<p title="All text are equal.">
Text comes in different format. They can be
<b>bold, </b>
<strong>important, </strong>
<i>italic, </i>
<em>emphasized, </em>
<mark>marked,</mark>
<small>small,</small>
<del>deleted,</del>
<ins>inserted,</ins>
<sub>subscript,</sub> and
<sup>superscript.</sup>
</p>

Text comes in different format. They can be bold, important, italic, emphasized, marked, small, ~~deleted,~~ inserted, _subscript, and ^superscript.

Blockquote


<p>Sherlock quote:</p>
<blockquote cite="https://quotecatalog.com/quote/steven-moffat-brainy-is-the-n-x1m2DL7">
“Brainy is the new sexy.”
— Irene Adler, Sherlock, Sherlock Season 2: A Scandal in Belgravia
</blockquote>

Sherlock quote:

“Brainy is the new sexy.” — Irene Adler, Sherlock, Sherlock Season 2: A Scandal in Belgravia

Automatic quotation marks and Abbreviation


<p>Automatic <q>quotation marks</q> and <abbr title="abbreviation">abbr</abbr>.</p>

Automatic quotation marks and abbr.

Address


<address>
Written by Angelique Rafael <br>
<a href="https://jellojill.github.io/">GitHub</a>
</address>

Written by Angelique Rafael
GitHub

Citation


<p>Remember to always <cite>cite</cite> your references!</p>

Remember to always cite your references!

Bi-directional Override


<bdo dir="rtl">Left & Right</bdo>

Left & Right

Color


<p style="color: LightCoral">
Hi, I love the way that I feel when you put your arms over me
</p>

<p style="background-color: rgba(255, 99, 71, 0.5)">
(There must be something I could say to make you stay, baby)
</p>

<p style="border:2px solid #ff6347">
Oh, hi (Hello), I love the way that you get in the groove when you walk with me <br>
Only me
</p>

<p style="background-color: hsl(0, 88%, 68%); color: hsla(0, 100%, 100%, 0.8)">
'Cause every time I think about it, can't stop thinkin' 'bout it <br>
That you are all I need (You are all I need)
</p>

Hi, I love the way that I feel when you put your arms over me

(There must be something I could say to make you stay, baby)

Oh, hi (Hello), I love the way that you get in the groove when you walk with me
Only me

'Cause every time I think about it, can't stop thinkin' 'bout it
That you are all I need (You are all I need)

HTML Journey