Since our new forums went live, many functions were added including HTML. It allows you to create well-ordered, eye-catching posts. I will try to include a very basic tutorial on how it works with some examples along with a list of working tags that I’ll try to keep up to date.

---

Here is a list of what this guide can help you with!

• HTML Tags
• Basic text editing
Click for more (there are a lot :P )
• Headings
• Bold
• ita
• Strikethrough
• Code Text
• Green Text
• Deleted red text
• Abbreviations
• Big text
• Small text
• Superscript
• Subscript
• Hidden text
• Block quote
• Text Alignment
• Image and link embedding
• Images
• Links
• Links and Images
• Lists and tables
• Lists
• Tables
• Miscellaneous
• Line Break
• Horizontal Line
• Keyboard-like text
• Secret text
• HTML Anchors

---

Tags are what makes HTML “work” and they usually come in pairs (start and end tag), surrounded by angle brackets < and >. Usually the end tag is identical to the start tag except it has a / before the tag name itself.

<b>Hello, world!</b>  → Hello, world!

Tags must be opened and closed like parentheses in maths. For example:

<i> <b>Hello, world!</b> </i>   →
Hello, world!

is correct, while

<i> <b>Hello, world!</i> </b>

is not.

If you have multiple identical tags it works just the same way!

<small> <small> <b>Hello, world!</b> </small> </small>   →

Hello, world!

is correct, while

<small> <small> <b>Hello, world!</small> </b> </small>

is not.

---

If you want your text to stand out you probably wanna use some basic formatting options such as Bold, Italic or strikethrough text!

Here is a list of some tags you could use to improve your post. You can open the details just by clicking the little triangle ↓

Heading examples

Headings

Headings are by default elements that span through a whole line unless you have a CSS file to display them inline (which is not the case since we’re on a forum).

<h1>Hello world</h1> ↓

Hello world

<h2>Hello world</h2> ↓

Hello world

<h3>Hello world</h3> ↓

Hello world

<h4>Hello world</h4> ↓

Hello world

<h5>Hello world</h5> ↓

Hello world

<h6>Hello world</h6> ↓

Hello world

Bold Text

uses the tags b or strong. The latter is recognized by speech engines differently from b which is just a visual style.

<b>Hello, world!</b>  → Hello, world!
<strong>Hello, world!</strong>  → Hello, world!

Italic Text

uses the tags i or em. Similarly to strong, em affects speech engines differently than i.

<i>Hello, world!</i>  → Hello, world!
<em>Hello, world!</em>  → Hello, world!

Strikethrough Text

uses the tags s or strike.

<s>Hello, world!</s>  → Hello, world!
<strike>Hello, world!</strike>  → Hello, world!

Code Text

uses the code tag.

<code>Hello, world!</code>  → Hello, world!

Inserted Text

uses the ins tag.

<ins>Hello, world!</ins>  → Hello, world!

Deleted Text

uses the del tag.

<del>Hello, world!</del>  → Hello, world!

Abbreviated Text

uses the abbr tag to show full text behind an acronym.

<abbr title="be right back">BRB</abbr>  → BRB

Bigger Text

uses the big tag.

<big>Hello, world!</big>  → Hello, world!

Smaller Text

uses the small tag.

<small>Hello, world!</small>  → Hello, world!

Superscript Text

uses the sup tag.

Hello, world! <sup>2</sup>  → Hello, world! ²

Subscript Text

uses the sub tag.

Hello, world!<sub>2</sub>  → Hello, world!₂

Hidden Text

uses the details tag.

<details><summary>Title Goes Here</summary>Text goes here</details>  →

Title Goes Here

Text goes here

Block quote

uses the blockquote tag

If you want to quote some text without using > for each and every line, you can simply wrap it with blockquote tags.

<blockquote>Hello, World!</blockquote> ↓

Hello, World!

---

There are four ways to align text:

• On the left
• Centered
• On the right
• Justified: each line will be spaced to have the exact same width as the others, no matter the length of the text

Aligning text is very easy.

Left:

<div align="left">Hello, World!</div> ↓

Hello, World!

Center:

<div align="center">Hello, World!</div> ↓

Hello, World!

Right:

<div align="right">Hello, World!</div> ↓

Hello, World!

Justified:

<div align="justify">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</div> ↓

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

---

Even though some of us currently can’t yet post links and images due to trust limitations (for more info read New Overwatch Forum FAQ New Overwatch Forum FAQ by linkdude240) I will make a list of options that may be available in the future for those who will earn enough reputation to do so.

Images

use the img tag and you can set many attributes to it. I will list some of the most important:

• src - (Source) - You must specify a source for the image using a direct link to it. They usually end as .png , .jpg, .jpeg, .webp etc...
• alt - (Alternate text) - If your image goes offline it will display if a little description instead.
• height - You can specify and set the height of the image in pixels or with a percentage.
• width- You can specify and set the width of the image in pixels or with a percentage.

Keep in mind that the only attribute img needs to work is src but if you don't specify height or width the image will be automatically scaled to its original resolution.
In this case we don't necessarily need to write </img> at the end so we just end the start tag with a /> instead of just >.

<img src="https://i.redd.it/aqdolr7iv9by.png" alt="Mercy" height="100" width="100"/>  →
<img src="https://i.imgur.com/6CDLE57.png" alt="Huge Rez!!" height="200" width="200" />  →  

Huge Rez!!512×512

img has a feature that allows you to link an image encoded using base64 but it takes  A TON of characters to do so. I don’t recommend using this method.

<img src="data:image/png;base64,iVBORw0KGgoA..." alt="Mercy"/>  →

Links

Use the a tag and they need the href attribute. a supports more than href but you won't need more that anyway.
As i said before linking is a privileged action and it will require you to earn enough reputation unless you're linking some post in this forum.

<a href="https://us.forums.blizzard.com/en/overwatch/">Overwatch Forums</a>  → Overwatch Forums

Images with links!

When images and links alone are not enough. You can have both!

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> <img src="https://i.imgur.com/6CDLE57.png" height="100" width="100">

← CLICK ME!.

---

To make your post a little fancier you can use lists and tables. For example when you want to list a hero pros and cons you can choose between an ordered or an unordered list whose tags are ol and ul. Each list item must be enclosed in a list item tag li.

List Examples

<ul> or <ol>
<li>Ana</li>
<li>D.Va</li>
<li>Doomfist</li>
</ul> or <ol>

• Ana
• D.Va
• Doomfist

or

1. Ana
2. D.Va
3. Doomfist

Note: ordered lists can start from any number, not just 1. If I wanted to start from 10 I would write:

<ol start=10>

and the result would be

10. Ana
11. D.va
12. Doomfist

Lists can also be nested.

<ul>
<li>Ana
<ul>
<li>Sleep Dart</li>
<li>Biotic Grenade</li>
<li>Nano Boost</li>
</ul>
</li>
</ul>

• Ana
  • Sleep Dart
  • Biotic Grenade
  • Nano Boost

Tables instead are useful if you want to show some data correlation, for example a hero pick rate in a certain period. Table tags are table,tr (table row), th (table header), td (table data).

Table Example

<table>
<tr>
<th>Pickrate%</th>
<th>Ana</th>
<th>Mercy</th>
</tr>
<tr>
<td>January 30</td>
<td>3,32%</td>
<td>14,62%</td>
</tr>
<tr>
<td>February 1</td>
<td>5,47%</td>
<td>6,80%</td>
</tr>
</table>

Pickrate%	Ana	Mercy
January 30	3,32%	14,62%
February 1	5,47%	6,80%

---

Line Break

Sometimes you may want to insert a line break or some spacing between your paragraphs. br does this for you.

« Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita. »
<br/>

«Ahi quanto a dir …

Horizontal line

This is pretty simple, hr tag.

<hr/> ↓

---

Keyboard-like text

uses the tag kbd.

<kbd>Hello, World</kbd>   → Hello, World

Secret text

There isn't a tag for this, but you can do it in two ways.

• Enclosing some text within angle brackets <> and it won't appear unless you use punctuation.
• Using the proper HTML comment tag and it will work no matter what you type in.

  <!-- Hello, World! -->

The only way to see it would be replying that post and quoting it by clicking ← this button.

This is a normal message <with a secret message in it>! → This is a normal message!

This is a normal message <!--with a secret message in it.-->! → This is a normal message!

HTML Anchors

Html anchors are a sort of bookmark that allows you to jump through very long posts with ease. Most of you won’t need this feature but for some fellow posters like @Titanium this could be quite helpful!

The list at the beginning of this tutorial is an example of how they work. When you click on a link, it will bring you where the bookmark is. It’s not even that hard to do if you follow this guide .

To make a working anchor here on discourse I had to use a workaround. First of all you need to create:

1. A bookmark

• To create the bookmark you need to type this code

  <a name="bookmarkName"></a>

  right on top of the paragraph you want to bookmark

A link to it

• You can use markdown or HTML to make it work. The code is:

  [Paragraph Name](#bookmarkName) - For Markdown
  <a href="#bookmarkName">Paragraph Name</a> - For HTML

Now here’s the code for a working anchor that will take you to the beginning of this guide.
Note that for this to work I had to add:

<a name="anchor"></a>

on top of my tutorial’s quick link section. Then I created a link to it:

[HTML Anchor](#anchor) ⇄ <a href="#anchor">HTML anchor</a>

HTML anchor

↑ And it’s done! Now click on it and it should take you back to the top!

You can even use images to work as links for example

<a href="#anchor"> <img src="https://i.imgur.com/n99Obt4.png" width="300"> </a> becomes ↓

---

If you had the courage to read through all of this, thank you! If you have any suggestions, questions, doubts or you want to say something that you think I could add or edit, you are welcome to post them. :) Also, feel free to use the comments as a sandbox to try some cool stuff out! (don't spam tho!)

---

---