HTML Forum Cheat Sheet

[Pachimari]

View this guide in another language:

Hello everybody!

As you may already know, the new forums allow you to use HTML code within your own posts. I decided to create this ‘Cheat Sheet’ to show you all the different things and tools you can use in order to customise your threads and replies.

Feel free to save this page as a bookmark in your web browser!

(Note: You may not be able to use some of the following codes, depending on what trust level you currently have. You can read more about the new forum changes here.)

Select a Category:

---

Text Formatting

Bold Text b

<b>I need healing!</b> 🡺 I need healing!

Italic Text i

<i>I need healing!</i> 🡺 I need healing!

Strikethrough Text s

<s>I need healing!</s> 🡺 I need healing!

Abbreviated Text abbr

Hover your mouse over the abbreviated text to see the full message!

<abbr title="Well played">WP</abbr> 🡺 WP

Inserted Text ins

<ins>I need healing!</ins> 🡺 I need healing!

Deleted Text del

<del>I need healing!</del> 🡺 I need healing!

Keyboard Text kbd

Press <kbd>H</kbd> to Change Hero 🡺 Press H to Change Hero

Code Text code

<code>I need healing!</code> 🡺 I need healing!

Quoted Text blockquote

<blockquote>I need healing!</blockquote> 🡻

I need healing!

Superscripted Text sup

I need <sup>healing!</sup> 🡺 I need ^healing!

Subscripted Text sub

I need <sub>healing!</sub> 🡺 I need _healing!

---

Font Sizes

Big Text big

<big>I need healing!</big> 🡺 I need healing!

Small Text small

<small>I need healing!</small> 🡺 I need healing!

Heading, Size 1 h1

<h1>I need healing!</h1> 🡻

I need healing!

Heading, Size 2 h2

<h2>I need healing!</h2> 🡻

I need healing!

Heading, Size 3 h3

<h3>I need healing!</h3> 🡻

I need healing!

Heading, Size 4 h4

<h4>I need healing!</h4> 🡻

I need healing!

Heading, Size 5 h5

<h5>I need healing!</h5> 🡻

I need healing!

Heading, Size 6 h6

<h6>I need healing!</h6> 🡻

I need healing!

---

Links & Images

Text with Link a href

<a href="https://eu.forums.blizzard.com/en/overwatch/c/general-discussion">General Discussion</a> 🡺 General Discussion

Images

Start with the img tag. You can now add additional attributes:

• src indicates the internet source of your image. Make sure that the link ends with a format such as .jpg, .jpeg, .png, .bmp or .gif.
• If the image is taken offline or is no longer available for whatever reason, the text message behind the alt attribute will be displayed instead.
• To adjust the width (X axis) of your image, use the width attribute.
  If you leave this attribute out, the image will use its original scale.
• To adjust the height (Y axis) of your image, use the height attribute.
  If you leave this attribute out, the image will use its original scale.

<img src="http://www.mmogames.com/wp-content/uploads/2017/04/potf-overwatch-uprising-game-mode-payload-560x315.png" alt="Move the Payload!" width="400" height="230"/> 🡻

Image with Link

Combine an image with a link to make that image clickable!

<a href="https://playoverwatch.com/en-gb/heroes/sombra"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ef/Sombra_Overwatch.png/220px-Sombra_Overwatch.png"/></a> 🡻

---

Videos

Videos

Videos from YouTube and Vimeo do not need to be inserted with HTML code.

Just post the link of the video and it should embed itself automatically!

https://www.youtube.com/watch?v=to8yh83jlXg 🡻

Overwatch Animated Short | "The Last Bastion"

https://vimeo.com/157114995 🡻

Overwatch - Gameplay Trailer #1

---

Tables & Lists

Tables

First of all, a table is defined with the table tag. You now need to add these:

• The first line of your table, the header, is inserted using the th tag.
• Any data after that can be added using the td tag.
• Use the tr tag to continue with the next line of your table.

<table>
<th>Win Rate (%)</th>
<th>Ana</th>
<th>Doomfist</th>
<th>Junkrat</th>
<th>Zarya</th>
<tr>
<td>PC</td>
<td>46.01</td>
<td>51.06</td>
<td>49.94</td>
<td>51.05</td>
<tr>
<td>PS4</td>
<td>42.63</td>
<td>49.17</td>
<td>50.21</td>
<td>50.77</td>
<tr>
<td>XB1</td>
<td>43.38</td>
<td>49.81</td>
<td>50.27</td>
<td>50.75</td>
</table> 🡻 

Win Rate (%)	Ana	Doomfist	Junkrat	Zarya
PC	46.01	51.06	49.94	51.05
PS4	42.63	49.17	50.21	50.77
XB1	43.38	49.81	50.27	50.75

Unordered List ul

A list in no particular order. Each list item is added with the li tag.

<ul>
<li>Eichenwalde</li>
<li>Hanamura</li>
<li>Junkertown</li>
</ul> 🡻

• Eichenwalde
• Hanamura
• Junkertown

Ordered List ol

A list in a particular order. Each list item is added with the li tag.
You can (but don’t have to) set the starting number using the start attribute.
If you leave this out, the list will count starting from 1.

<ol start="25">
<li>Eichenwalde</li>
<li>Hanamura</li>
<li>Junkertown</li>
</ol> 🡻

25. Eichenwalde
26. Hanamura
27. Junkertown

---

Other

Frame iframe

Although I do not know what this is good for, I thought I’d include it anyway.
The frame can also be customised using the width and height attributes.

<iframe width="300" height="145"> 🡺

Break br

When you want to put some empty space between your paragraphs.

I need healing!<br>I need healing! 🡻
I need healing!

I need healing!

Details details summary

Create a small menu that can be opened for more details.

<details><summary>Shimada Brothers</summary>Hanzo & Genji</details> 🡻

Shimada Brothers

Hanzo & Genji

Horizontal Line hr

<hr> 🡻

---

Description dd

Descriptions are normal texts, but are placed a little further to the right.

<dd>I need healing!</dd> 🡻

I need healing!

Comment < >

Comments are only visible in quotes. Perfect for hidden messages!

Nothing suspicious in here. <Nothing at all.> 🡻
Nothing suspicious in here.

---

Thanks for reading! I’m looking forward to your feedback. Please don’t hesitate posting any additions that I’ve missed, so that I can add them immediately.

---

Pachimari

[Star-22803]

Can we have this article pinned please ?
Also the Images, are only usable at Trust Lvl 3 I suppose ?

Also iFrames are used to load another webpage from a different site into the iFrame.

Eg:

< iframe src=“www dot playoverwatch dot com” width=“300px” height=“300px”></iframe

should load the playoverwatch webpage with the iframe in the page.

[Pachimari]

@Star-22803

the Images, are only usable at Trust Lvl 3 I suppose ?

I think so, don’t quote me on that though. I’ll keep an eye out and get back to you.

@Star-22803

Also iFrames are used to load another webpage from a different site into the iFrame.

I actually tried something similar, and by the looks of it, you can only post a raw frame but not insert any data into it. Which kinda makes me wonder why it’s even possible to create a frame in the first place.

---

Pachimari

[Star-22803]

@Pachimari

I actually tried something similar, and by the looks of it, you can only post a raw frame but not insert any data into it. Which kinda makes me wonder why it’s even possible to create a frame in the first place.

The devs know about the problems of allowing other web content to load within the forums iFrame version. Advertising etc…

So they restricted the iFrames here to work the way it does
But iFrame from an HTML point of view is all about loading other webpages, within the iframe.

Edit: So purely from a forum’s standpoint iframe is there to just create a box of a particular width and height.

[Raven]

@Star-22803

Edit: So purely from a forum’s standpoint iframe is there to just create a box of a particular width and height.

If you want to build a thread out of boxes iFrame is what you need!

Nice work Pachimari, loved your thread!

---

Raven

[Star-22803]

@Raven

If you want to build a thread out of boxes iFrame is what you need!

Nice work Pachimari, loved your thread!

Hi Raven,

<iframe width="500px" height="200px">
<h1> Heading </h1>
<hr/>
</iframe>

Renders As
🡻

Notice that the h1 and the hr does not render inside the iframe box…

Perhaps it’s a bug ?

[Pachimari]

@Star-22803

Perhaps it’s a bug ?

That’s a caterpillar, but hey, close enough.

---

Pachimari

[Star-22803]

I couldn’t find a bug emote
The closest bug I could find was the caterpillar

[Star-22803]

---

Well if nothing else you can create stuff like this with iframes

[Star-22803]

---

Or create patterns like these with iframes and use it as encrypted ways to communicate Morse Code stuff.

[Star-22803]

Morse Code Chart

A .
B . . .
C . .
D . .
E .
F . . .
G .
H . . . .
I . .
J .
K .
L . . .
M
N .
O
P . .
Q .
R . .
S . . .
T
U . .
V . . .
W .
X . .
Y .
Z . .

---

1 .
2 . .
3 . . .
4 . . . .
5 . . . . .
6 . . . .
7 . . .
8 . .
9 .
0

---

1. A dash is = <iframe width="6px" height="1px"></iframe>
2. A dot is = <big><strong>.</strong></big>
3. The space between parts of the same letter is 1 unit (1 space bar).
4. The space between letters is 3 units (3 x  ).
5. The space between words is 7 units (7 x  ).

---

[Star-22803]

. . . .       .        .    . .   .        .        . . ?

---

Is another way of asking “How Are You ?”

[Pachimari]

@Star-22803

Is another way of asking “How Are You ?”

You are bored, aren’t you?

Edit: Removed the ‘Polls’ section because only Blizzard employees can create them.

---

Pachimari

[Star-22803]

.   

---

[Vaneras]

Very helpful thread

Pin for the win!

[Tauldrun-2140]

Hello amigos!

I created this one for the European Spanish forum.

Enjoy!
https://eu.forums.blizzard.com/es/overwatch/t/hammer-and-wrench-guia-para-editar-tus-mensajes/629

[Reaver-2825]

Very inovative

[Pachimari]

@Reaver-2825

Very inovative

Thanks, I’m glad you could make use of this tiny collection!

Even though the pin has gone missing, I’ll continue to update this post once I have more spare time! Markdown seems to have a lot of possibilities which I haven’t mentioned yet. Stay tuned!

@Tauldrun-2140

Hello amigos!

I created this one for the European Spanish forum.

Added it to the main post a couple of weeks ago; totally forgot to tell you. Thanks!

---

Pachimari

[Tauldrun-2140]

Great idea!

I made the same and found other languages.