Here is some basic HTML coding to utilize in your works, notes, and summaries! The coding is most helpful for the notes and summaries since there is no Rich Text option available there. But there's also some cool coding that can be implemented in your story as well.

1. Jump to Text Coding
2. Jump to Headings Coding
3. Jump to Hover Coding/Anchor Points/Footnotes
4. Jump to Numerical/Bullet List Coding
5. Jump to URL Coding
6. Jump to Image Coding

Text Formatting

This will be<em>italicized</em> and this will be <strong>bold</strong>.

This will be italicized and this will be bold.

This will be <em>italicized</em> again, but this one will be <strong><em>bold and italicized</em></strong>.

This will be italicized again, but this one will be bold and italicized.

This will be _subscript and this will be ^superscript. 

This will be _subscript and this will be ^superscript. 

This will be <big> BIG</big> and this will be <small>tiny</small>.

This will be BIG and this will be tiny.

Headings

<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h5>Heading 5</h5>

Heading 5

<h6>Heading 6</h6>

Heading 6

Translation/Hover Boxes/Anchor Points

This is some useful coding to add translations, definitions, sources, the author notes within your story, and more. Hover over text needs a cursor to work, meaning it will not work on phones or tablets. Hover text does not work with screen readers, as they will just read the text shown on the screen and not the hidden hover text. I'd recommend using the Anchor Points and Footers to be mobile-friendly and more useful for people who use screen readers :D 

Hover Over Text

<span title="This is the text in the box!">This is the text that shows in your fic!</span>

This is the text that shows in your fic!

Hover Over Text with Underlined Text

<a title="This is the text in the box!">This is the text that shows in your fic!</span>

This is the text that shows in your fic!

Hover Over Text with Dotted Line

<abbr title="This is the text in the box!">This is the text that shows in your fic!</abbr>

This is the text that shows in your fic!

or

<acronym title="This is the text in the box!">This is the text that shows in your fic!</acronym>

This is the text that shows in your fic!

Anchor Points

This will be the anchor point in which the below coding will jump to when clicked; <a name="anchor"></a>

<a href="#anchor">Click this and jump to the end</a>

Click this and jump to the end

Anchor Points Continued: Apply anchor points as footnotes to add additional translations, definitions, sources, etc!

The first step is to add the following coding to your HTML after the text you want to define; <a href="#definition1" name="definition">¹</a>

Then add the following to the endnotes; <a name="definition1" rel="nofollow" id="definition1"></a>1. Isn't this neat? Use this for anything and everything! <a href="#definition" rel="nofollow">Press here to head on back to the anchor section</a>

(Random Word That Needs Translation)¹

After you hit the superscript, you should have jumped to the endnotes. Then you can jump right back up by pressing the text, 'back', after the definition added. 

Here is a simplified version of how to make multiple footnotes for a single fic (must be within same chapter, also note that I used higher numbers due to already having anchor points with 1-10 within this work):

<p>Your Text <a href="#20" name="20back" rel="nofollow" id="20back"></a><a href="#20" name="20back" rel="nofollow" id="20back">¹</a></p>

Your Text ¹

<p>Your Text <a href="#21" name="21back" rel="nofollow" id="21back"></a><a href="#21" name="21back" rel="nofollow" id="21back">²</a></p>

Your Text ²

<p>Your Text <a href="#22" name="22back" rel="nofollow" id="22back"></a><a href="#22" name="22back" rel="nofollow" id="22back">³</a></p>

Your Text ³

This is the html in the author's notes:

<a name="20" rel="nofollow" id="20"></a>1. Definition <a href="#20back" rel="nofollow">back</a><br />
<a name="21" rel="nofollow" id="21"></a>2. Definition <a href="#21back" rel="nofollow">back</a><br />
<a name="22" rel="nofollow" id="22"></a>3. Definition <a href="#22back" rel="nofollow">back</a>

Make an ordered, numerical list.

<ol><li>This is first</li>
<li>This is second</li>
<li>This is third</li>
<li>This is forth</li>
<li>This is fifth</li>
<li>This is sixth</li></ol>

1. This is first
2. This is second
3. This is third
4. This is forth
5. This is fifth
6. This is sixth

Make an unordered, bulleted list.

<ul><li>This is first</li>
<li>This is second</li>
<li>This is third</li>
<li>This is forth</li>
<li>This is fifth</li>
<li>This is sixth</li></ul>

• This is first
• This is second
• This is third
• This is forth
• This is fifth
• This is sixth

Embedding Links

This is a wonderful way to link to your beta's account, images, sources, etc.

<a href="https://ahhhsami.tumblr.com/">This is my tumblr account :D!</a>

This is my tumblr account :D!

This one will link straight to my AO3 account.

<a href="/users/yennawang/">This goes straight to the AO3 user's account</a>

This goes straight to the AO3 user's account

Embedding Images

This is a wonderful way to add visuals to your story. Whether it's your own art, others' art (always sourced and with permission), or more, this can add something special to your work. I wrote a whole piece inspired by Chef's Table, so I embedded images of the dishes to aid the reader!

First off, the image you are embedding must have a unique URL address directly to the image. When you're on a webpage, right-click the image and you should see "Copy Image Address" this can then be inserted in the coding below. 

But say you have a unique image that you want to share. Maybe it's fan art, a photo that you personally took of food, or a place that inspired your work, etc. How do you get a link for that? Well, you need to house that image on a website that can support the images and supply a unique url. I'd recommend Discord since you can create a Message Board that only includes yourself in the personal messages. Other examples can be twitter, imgur, deviantart, etc. From there you'll be able to get a unique link to embed in your work.

<img src="[image url goes here]" />

It's lonely in this group of 1, but that's okay.

Now I send the image to myself.

Copy the image address.

Then I add this to the HTML; <img src="https://media.discordapp.net/attachments/965659416181497918/1099504553528922162/IMG_5317.jpeg?width=1336&amp;height=994" alt="Orange Boi" width="500" />

This has added information to make sure the picture isn't ginormous. If the image is a reasonable size, you can just insert the url. So it would have just been;
<img src="https://media.discordapp.net/attachments/965659416181497918/1099504553528922162/IMG_5317.jpeg?width=1336&height=994" />

Now you have an orange²

PS: Image embedding is also really easy to do in the Rich Text. The steps are all the same except for writing the code.

This last source (x) is a great guide for some other HTML basics for AO3. 

See, now you're at the bottom! This coding was placed here in the html; <a name="anchor"></a>