はじめに（読み飛ばしてOK）

この記事で対象としている人

• 入社した途端に（広報部とかでもないにも関わらず）Webページやブログ等の担当をやれと言われた新入社員（とか）

この記事で対象としていない人

• HTMLのことをちょっと知っている人（知らないタグが出てきたときに自力で検索できる人）
• いわゆるエンジニアと呼ばれる職業の人（偶然HTMLについて知らなくても、職業柄検索能力が高いでしょうからよそを当たってください）

この記事で目標とするところ

• なんかそれっぽい記事を書けるように、自力でタグを検索できるようになる（今のところ「タグ」の意味が分からなくてもOK）

この記事で目標としていないところ

• ヘッダ属性とかそこらへんのところ
• CSSとの絡み

この記事を書いている人

• 文系
• 新入社員で営業をやっていて、何故かHTMLができると思い込まれ、Webページを担当させられていた
• その後転職し、今はITエンジニアになったが、何故かまた片手間でWebページの担当をさせられている
• HTMLは好きでも嫌いでもない

HTMLってそもそも何ぞや

「HTML とは」みたいな感じでGoogleとかで検索をかければ出てくるので、HTMLがHyperText Markup Languageの略で……みたいな話は割愛。
ざっくり言うと、Webページ内の文字に取り消し線をつけたり、太字にしたり、見出しをつけたり、画像を貼り付けたり、リンク¹を貼ったりするためのおまじないである。

具体的に言うと、例えば

ここを<strong>太字</strong>とする

と入力すると、おそらく

ここを太字とする

というふうに表示されるはずである。このとき、この

<strong>

とかのことをタグと呼ぶ。
このstrongというタグは、文中のある部分（この文では「太字」というところ）を強調するためのタグ、ということになる。

少しだけ応用編：属性と属性値

<font color="#ff0000">赤い</font>林檎

この例では、

赤い林檎

と表示される。これはfontというタグを使っているのだが、colorというところ（これを属性と呼ぶ)で、装飾する色を決定している。で、実際の色は#ff0000（属性の内容を指定しているので属性値と呼ばれる）で指定しているのだが、これはカラーコードといって、説明すると長くなるので、別途検索して調べてほしい。
ちなみにカラーコードの実例はWeb色見本に詳しい²。

また、上記の例は

<font color="red">赤い</font>林檎

でも同じ結果が得られる。上記の例との違いは、属性値が#ff0000からredに変わっている点である。

色々なタグ

ところで、タグの役割は、文の装飾だけではない。
例えば、

今日は春分の日で休みなので1日中寝てようと思っていたが、思いついてHTMLの記事をQiitaに書いている。
ところで今日、東京で桜の開花が宣言されたというが、小学生の頃、春に校庭の桜の木を眺めていたら、毛虫が降ってきたことがあったので、私は花見が好きではない。
そもそも私は桜より梅の花の方が好きかもしれない。

という文章を書こうとしたところ、ちゃんとEnterキーを押したのに、

今日は春分の日で休みなので1日中寝てようと思っていたが、思いついてHTMLの記事をQiitaに書いている。ところで今日、東京で桜の開花が宣言されたというが、小学生の頃、春に校庭の桜の木を眺めていたら、毛虫が降ってきたことがあったので、私は花見が好きではない。そもそも私は桜より梅の花の方が好きかもしれない。

というふうに、うまく改行されなかった、という経験がある方もおられるかもしれない。
例えばWordPressなどではEnterキーを押すとちゃんと改行されるのでこういった悲劇は起きないが、実は「ここで改行しますよ」というタグが存在していて、それを使わないのが理由である。

上記の文では、

今日は春分の日で休みなので1日中寝てようと思っていたが、思いついてHTMLの記事をQiitaに書いている。<br />ところで今日、東京で桜の開花が宣言されたというが、小学生の頃、春に校庭の桜の木を眺めていたら、毛虫が降ってきたことがあったので、私は花見が好きではない。<br />そもそも私は桜より梅の花の方が好きかもしれない。

というふうに横一列にずらーっと書いても、brというタグによって改行されているので、結果的にはちゃんと改行される。
とはいえ、別にEnterキーを使ってはいけないわけではないので、可読性の高さ（要は「読みやすさ」）を重視して

今日は春分の日で休みなので1日中寝てようと思っていたが、思いついてHTMLの記事をQiitaに書いている。<br />
ところで今日、東京で桜の開花が宣言されたというが、小学生の頃、春に校庭の桜の木を眺めていたら、毛虫が降ってきたことがあったので、私は花見が好きではない。<br />
そもそも私は桜より梅の花の方が好きかもしれない。

というふうにしてもよい。
先ほどのstrongタグやfontタグなどは、装飾する対象となる文の前後をタグで挟んでいた（手前のタグを開始タグ、後ろのタグを終了タグと呼ぶ）が、このbrタグのように、ペアでなくても動くタグというのも存在している（多数派ではない）。
ちなみに、文章の体裁を整えるタグとしては、divタグやpタグなども知っておくと便利かもしれない。

他にも、水平線を表示するhrタグや、表を作ってくれるtableタグ（これはtrタグやtdタグと一緒に使う）など、タグによって様々な役割を持っている。

tableタグについて

例えば

という表があったとする。これをHTMLで表現すると、

<table>
<tr>
<th>季節</th>
<th>悩み</th>
</tr>
<tr>
<td>春</td>
<td>花粉症（スギ・ヒノキ）</td>
</tr>
<tr>
<td>夏</td>
<td>熱中症</td>
</tr>
<tr>
<td>秋</td>
<td>花粉症（ブタクサ）</td>
</tr>
<tr>
<td>冬</td>
<td><strong>インフルエンザ</strong></td>
</tr>
</table>

となる（実際には、各タグに属性を与えることで色々工夫することができる）。
このちょっと長そうなHTML文も、分解すれば単純な構造だということがわかる（strongタグは既出）。

tableタグ

表の範囲を示す。

trタグ

表の列を示す。この中にthタグやtdタグを入れる。

thタグ

見出しのセルを示す。

tdタグ

見出しでないセルを示す。

ステップアップ

ここまで理解できたら、おそらく自分であれこれと検索したり、簡単なHTMLなら理解することができるようになっていると思う。
筆者のおすすめはHTMLクイックリファレンスというサイトだが、HTMLはメジャーな技術なので、取り扱っているサイトも多いだろう（Qiitaも勿論そのひとつ）。
また、Webブラウザによって操作は違うが、だいたいWebページ上で右クリックしてそれっぽい選択肢を選ぶと、そのページを構成するコードを表示してくれる³ので、既存のページのコードを読んでみるというのも勉強になるかもしれない。