突然「HTMLを書け」と言われたら

#はじめに（読み飛ばしてOK）
###この記事で対象としている人
* 入社した途端に（広報部とかでもないにも関わらず）Webページやブログ等の担当をやれと言われた新入社員（とか）

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

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

###この記事で目標としていないところ
* ヘッダ属性とかそこらへんのところ
* CSSとの絡み

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

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

具体的に言うと、例えば

```HTML:HTMLの例
ここを<strong>太字</strong>とする
```

と入力すると、おそらく

> ここを**太字**とする

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

```html
<strong>
```

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

##少しだけ応用編：属性と属性値
```html:文字の色を変更
<font color="#ff0000">赤い</font>林檎
```

この例では、
> <font color="#ff0000">赤い</font>林檎

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

また、上記の例は

```html:文字の色を変更(カラーコードを使わない例)
<font color="red">赤い</font>林檎
```

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


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

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

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

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

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

上記の文では、

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

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

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

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

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

##tableタグについて
例えば

| 季節 | 悩み | 
|:-:|:-:|
| 春 | 花粉症（スギ・ヒノキ） |
| 夏  | 熱中症 |
| 秋  | 花粉症（ブタクサ） | 
| 冬  | **インフルエンザ** |  

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

```html:tableタグの例
<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クイックリファレンス](http://www.htmq.com/)というサイトだが、HTMLはメジャーな技術なので、取り扱っているサイトも多いだろう（Qiitaも勿論そのひとつ）。
また、Webブラウザによって操作は違うが、だいたいWebページ上で右クリックしてそれっぽい選択肢を選ぶと、そのページを構成するコードを表示してくれる[^3]ので、既存のページのコードを読んでみるというのも勉強になるかもしれない。

[^1]: リンクの意味をご存じないという方はあまりおられないと思うが、クリックすると他のページに飛ぶアレのことである。
[^2]: カラーコードそのものについてもこのサイトの「[よくある質問と回答](https://www.colordic.org/faq/)」に説明が記載されている。
[^3]: 例えばGoogle Chromeでは「ページのソースを表示」を選択。