Oglemi
Borf
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> </p>
<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.
<strong> </strong>
This tag bolds certain text in your analysis.
<em> </em>
This tag italicizes certain text in your analysis.
<del> </del>
This tag puts astrike through text in your analysis.
<u> </u>
This tag underlines text in your analysis.
<a> </a>
and
href
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:
<a href="http://www.smogon.com">Smogon</a>
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.
<a href="/bw/pokemon/abomasnow">Abomasnow</a>
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>
and
<li> </li>
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:
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:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
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:
<table> </table>
Defines where the table begins and ends. Wrap this around the whole table and use only once.
<thead> </thead>
This is the table's header.
<tr> </tr>
Defines a row in a table.
<th> </th>
Defines a header cell.
<tbody> </tbody>
This is the table's body.
<td> </td>
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:
<table class="sortable">
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.:
<tr class="a">
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:
Generation 6 and moving forward: Markdown
Starting in XY, our site overlord chaos made the decision to move on from HTML and use a system called markdown, which is more intuitive and requires far less busy work on the part of the writers here on Smogon. While our articles and many parts of the site will still use HTML, our analyses will use markdown. Markdown forgoes the need to clarify how each line of text works on a webpage, and instead uses pre-determined formatting to convert the text to HTML for us. Essentially, the programmers do all the hard work, and we the users just need to follow the easy directions they create to make the pages appear. You can read more about it here.
In this system, Seven Deadly Sins created the formatting for our analyses. It is as follows:
And that's it! That's all the more we use markdown on the site for the time being, and you won't need to deviate from that format at all from the time being.
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!
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> </p>
<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.
<strong> </strong>
This tag bolds certain text in your analysis.
<em> </em>
This tag italicizes certain text in your analysis.
<del> </del>
This tag puts a
<u> </u>
This tag underlines text in your analysis.
<a> </a>
and
href
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:
<a href="http://www.smogon.com">Smogon</a>
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.
<a href="/bw/pokemon/abomasnow">Abomasnow</a>
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>
and
<li> </li>
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:
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.<ul="damage_calculation">
<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>
</ul>
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:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
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:
<table> </table>
Defines where the table begins and ends. Wrap this around the whole table and use only once.
<thead> </thead>
This is the table's header.
<tr> </tr>
Defines a row in a table.
<th> </th>
Defines a header cell.
<tbody> </tbody>
This is the table's body.
<td> </td>
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:
<table class="sortable">
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.:
<tr class="a">
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:
This short HTML table can be seen in action right here.<table class="sortable">
<thead>
<tr>
<th>Priority</th>
<th>Moves</th>
</tr>
</thead>
<tbody>
<tr class="a">
<td>+2</td>
<td>Switching</td>
</tr>
<tr>
<td>+1</td>
<td><a href="/rb/moves/quick_attack">Quick Attack</a></td>
</tr>
<tr class="a">
<td>0</td>
<td>All moves not listed</td>
</tr>
<tr>
<td>-1</td>
<td><a href="/rb/moves/counter">Counter</a></td>
</tr>
</tbody>
</table>
Generation 6 and moving forward: Markdown
Starting in XY, our site overlord chaos made the decision to move on from HTML and use a system called markdown, which is more intuitive and requires far less busy work on the part of the writers here on Smogon. While our articles and many parts of the site will still use HTML, our analyses will use markdown. Markdown forgoes the need to clarify how each line of text works on a webpage, and instead uses pre-determined formatting to convert the text to HTML for us. Essentially, the programmers do all the hard work, and we the users just need to follow the easy directions they create to make the pages appear. You can read more about it here.
In this system, Seven Deadly Sins created the formatting for our analyses. It is as follows:
Code:
[OVERVIEW]
Generalize what the Pokemon does in the metagame and as a whole and why you should or shouldn't consider using it on your teams. See this thread for more tips.
[SET]
name: SET NAME
move 1:
move 2:
move 3:
move 4:
item:
ability:
nature:
evs:
[SET COMMENTS]
Moves
========
Describe what the moves on the set do.
Set Details
========
Describe the other aspects of the set such as what the EVs do and nature/item.
Usage Tips
========
Describe how to use the Pokemon in question.
Team Options
========
Describe some teammates that would be a good idea to pair with this Pokemon.
[STRATEGY COMMENTS]
Other Options
=============
List some options for the Pokemon user that are plausible but not always recommended due to either being not consistent enough or too outclassed by other Pokemon in the metagame.
Checks and Counters
===================
**Insert Threat Here**: Describe why the Pokemon is a threat.
**Insert Threat Here**: Describe why the Pokemon is a threat.
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!
Last edited: