Forum HTML tutorial

General Discussion
1

Introduction

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!



Tags

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.

Basic Text Editing

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! 2

Subscript Text

uses the sub tag.

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

Hidden Text

uses the details tag.

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

Title Goes HereText 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!

Text alignment

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.

Image and link embedding

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"/>  → Mercy
<img src="https://i.imgur.com/6CDLE57.png" alt="Huge Rez!!" height="200" width="200" />  →  Huge Rez!!

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"/>  → 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!.

Lists and tables

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

  1. Ana
  2. D.va
  3. 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%

Miscellaneous

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 or numbers.
  • 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 :slight_smile:.

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!)
    334 Likes
    2

    Very useful! Thank you for the in-depth tutorial :3

    ~Sincerely Yours xoxo,
    a Lover of True, Fair, and Fun Balance.
    #RevertMercy

    24 Likes
    3

    Better tell me how you make the text colored, and how do you make the boxes around some symbols like the box around here:

    You can’t just use some formatting in the post and not explain that :) that’s just a tease xD

    10 Likes
    4

    There’s a mini tutorial next to every example: the red and green text was made using ins and del tags while the “boxes” are explained at the end, they use the kbd tag

    6 Likes
    5

    This is really useful! I have this bookmarked from now on, thanks for sharing!

    5 Likes
    6

    I’m glad you found this helpful :slight_smile:

    3 Likes
    7

    Incredible post!

    Really puts everything in one place with great examples!

    Thanks for making this!

    5 Likes
    8

    Saved for reference since I’m a total noob to formatting. Thank, my dude.

    4 Likes
    9

    Definitely a permanent bookmark ^.^

    Impressive post, thanks for sharing :heartpulse:

    4 Likes
    10

    It may look kinda difficult at first but once you get the hang of it, it’s quite easy ^^

    4 Likes
    11

    Some of the tags are featured in the text box, but thanks anyways, pretty useful.

    2 Likes
    13

    True, but if I try to do this in the textbox H**e_ll**o_ it doesn’t work: He_llo_.
    If I do this instead h<b>e<i>ll</b>o</i> it turns our just fine “hello”.

    4 Likes
    14

    Great example, hopefully when you are more trusted you get access to some of the premium HTML features

    3 Likes
    15

    Oh, i thought ins and dell were alternatives for underline and strike through, but they also color the text. I get it now. And the kbd tag i just missed somehow, my bad.

    Thanks!

    4 Likes
    16

    Forum automatically handles embedding of links \ videos \ gifs \ etc.

    You don’t actually need to do anyhting at all except post the link and forum will convert it for you.

    1 Like
    17

    When you do

    <a href="https://www.google.com">My link</a>

    the text that would display would be “My link”. It would be a clickable link and wouldn’t say “https://www.google.com”

    This is but one advantage of making your own links.

    2 Likes
    18

    Interesting, I only tried the “hard way” I guess ahahaha. Even though as linkdude240 said this way lets you customize more your posts, in fact I could potentially make an image clickable

    <a href="http://www.google.com" target="_blank">
    <img src="https://i.redd.it/aqdolr7iv9by.png"/>
    </a>

    This piece of code would allow me to click on it and go to google for example

    1 Like
    19

    I honestly would be surprised if they made the links clickable, that sounds like a major security risk waiting to happen

    1 Like
    20

    Well you’re right. Better safe than sorry, I guess that’s why they have a reputation system. Also, if they ever were to make links clickable I’m led to believe they would use a linkfilter similar to Steam’s one…

    2 Likes
    21

    IMO… if you’re naiive enough to click a malicious link, without an antivirus, it’s going to happen eventually.

    Everyone should practice safe browsing.

    But besides that, the trust system would take away that person’s privileges, and at that point I think the forum moderation would have cleaned up the post as well.

    1 Like