Hello again everyone!
This guide is an introduction to HTML for those who have never worked with it or even know what it is or does.
HTML stands for Hypertext Markup Language. It's the programming language that converts text to webpages. You can literally do anything with HTML, but for the purposes of this guide I'm only going to explain the simplest stuff you can use here at Smogon in your analyses or guides.
Everyday interaction with HTML
If you've ever worked on an analysis here at Smogon you've done a little HTML! Ever wonder why we have you use those <p> tags? Those <p> tags and the other structured text we have you do is what makes the analyses look as they do on the StrategyDex (with help from scripts in the Smogon Content Management System (SCMS) ).
Proper use of HTML
HTML is a system of tags. Typically, anything you want to show up on your analysis properly needs to be "wrapped" in the tags.
In order for tags to work they must be placed in the front of the text you want to change, and "closed" at the end.
For example, in order for the <p> tags to work, your paragraph must start with <p> and then end with </p>. Note the slash in the second tag. The slash is actually very significant. It defines where the tag ends. In order for any HTML to work it must have a start and an end.
There's a lot of other nuances to HTML, but I'll explain those in the specific examples below.
HTML you can use in your analyses and articles
Here I will list the tags you can and probably will end up using at some point if you choose to write for Smogon.
<p> tags, or paragraph tags, defines a paragraph. Everything you put inside the <p> tags will be a part of that paragraph. Every analysis needs these tags to define the separate paragraphs, otherwise the paragraphs will be "broken" (in this instance merged or squashed together) on the StrategyDex.
This tag bolds
certain text in your analysis.
This tag italicizes
certain text in your analysis.
This tag puts a
text in your analysis.
This tag underlines
text in your analysis.
The <a> tags put a hyperlink in your analysis. In order to use it properly they must be used in conjunction with the href attribute.
Here is an example of a hyperlink and how you'd use it in an analysis:
There's a couple important things to note when using this tag. The first thing to note is the space between the a and href. The second is the =, it defines where the link starts. The url must then be wrapped in " ", which defines it. Finally, don't forget to close the link with the </a> tag after you're finished hyperlinking the text you wish to.
Because of the SCMS, most of the links you want to get to on the Smogon website can be cut to the / after the smogon.com. So for example, if you wished to link to another Pokemon's analysis, this is how you'd link it.
Another thing to be wary of is that some parts of the site ends in a backslash /. For example, if you wanted to link to the RU Hub, you'd use the following:
<a href="/tiers/ru/">RU Hub</a>
<ul> </ul> and <ol> </ol>
The first two tags stand for unordered list and ordered list respectively. The <li> tags stand for list. In order to use the first two they must be used with the <li> tags.
The <ul> tags have this effect when used:
You'll use this one most commonly in your analysis for damage calculations. In order to do this, here's how it should look in your analysis:
<li>252 SpA Choice Specs Typhlosion Hidden Power Grass vs. 40 HP / 216+ SpD Lanturn: 180-214 (44.88 - 53.36%) -- 95.31% chance to 2HKO after Stealth Rock</li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 252 HP / 52+ SpD Cresselia: 226-267 (50.9 - 60.13%) -- 87.5% chance to 2HKO></li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 0 HP / 0 SpD Entei: 205-242 (55.25 - 65.22%) -- guaranteed 2HKO</li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 252 HP / 4 SpD Poliwrath: 176-207 (45.83 - 53.9%) -- 53.13% chance to 2HKO after Stealth Rock</li>
The ="damage_calculation" part of the tag is a specialty of the SCMS which puts the damage calcs in a bulleted list form without the actual bullets. If you want to put an unordered list within your analysis not for the purpose of damage calcs you would not use the ="damage calculations" part of the tag.
The <ol> tags have this effect when used:
or <ol type="A">
<dl> </dl>, <dt> </dt>, and <dd> </dd>
You'll only really use these if you're writing an article. These tags stand for definition list, defined item, and description of item respectively.
This is how you'd use them in an article:
<dd>Black hot drink</dd>
<dd>White cold drink</dd>
You can see these tags in action on the Smogon Credits
page. The whole page is wrapped in a single <dl> tag, each username is wrapped in a <dt> tag, and each separate description line is wrapped in a <dd> tag.
<h2> </h2> (and h3, h4, h5, h6)
The <h#> tags stand for header. These tags break up an article just like how I break up this article into different headers. You can most commonly see these in action in our Smog
articles. Issue 23's Featured Uber Pokemon
is a good one.
The important thing to note about the <h> tags is that the higher you go in number, the smaller the header gets. <h2> is typically the largest header you'll see and the most visually appealing. All subheaders will typically be <h3> and then <h4>.
Finally, the last use of HTML you may want to use in your article is a table. Tables are a little complicated, but you usually won't ever have to use a very complicated one. Here are the tags you'd use and in descending order:
Defines where the table begins and ends. Wrap this around the whole table and use only once.
This is the table's header.
Defines a row in a table.
Defines a header cell.
This is the table's body.
Defines a body cell.
That's a lot of tags to take in, and that's not it. However, Smogon makes it pretty easy. Almost every table you'll use will start off with this tag:
This tag gives you a table that looks like every one we have onsite.
The other part for getting the table to look like the ones we have onsite is to alternate the background color we have available every other row. In order to do this, the following tag must be used alternatively.:
This puts the blueish tint to the background of the table to divide it more clearly.
When put all together, this is what your table HTML should look like when used in practice:
<td><a href="/rb/moves/quick_attack">Quick Attack</a></td>
<td>All moves not listed</td>
This short HTML table can be seen in action right here
There is so much more to HTML than this, including working with articles as a whole and including images. However, I'll save those for another guide as they get pretty complicated.
Hopefully this guide will help those who (like myself before coming to Smogon) have never even seen or worked with HTML before at least know their way around a tiny bit. Have fun out there!