（できるだけ）正しい HTML を書くために ～基礎編その 1 ～
この記事は前回書いた「（できるだけ）正しい HTML を書くために ～概要編～」の続きです。
前の記事を読んでいない方は、先にそちらをお読みください。
正しい HTML ってそもそも何？
皆さん、何を満たせば正しい HTML だと思いますか？
書いた通りに表示される HTML？
チェックツールでエラーが出ない HTML？
確かに、これらも大事ですが私は
文書構造を重視して適切にマークアップされた HTML
だと思います。
「Web ページを見る人はどんな要素でマークアップしているかなんて気にしてないから全部 <div> と <span> でいいじゃん」と言う人も、いるかもしれません。
でも、これを気にしている重要人物？もいるのです。
それは検索ロボットです。
検索ロボットは自然言語（日本語や英語など人間が会話などに使っている言語）をきちんと理解することはできません。
では、どうやってサイトの内容を把握しているかと言うと「どんな要素でマークアップされているか」を見て判断しています。（ここらへんの話はこの Qiita の記事を読むと雰囲気が分かるかと思います）
検索結果に表示されるためには検索ロボットがサイトの内容を把握してくれていることが重要です。
検索結果上位に表示させるための第 1 歩として、ぜひ正しい HTML を書くように心がけてください。
用語紹介
HTML を書くうえで最低限知っておくべき用語を紹介いたします。
とりあえずこれだけ知っておけばググったときに困ることは（たぶん）無いと思います。
・入れ子（ネスト）
要素の中に要素を入れること。
前回の記事でも紹介したため具体的な説明は省きます。
・親要素
ある要素から見た 1 階層上の要素のこと。
<div>
<p>
<span></span>
</p>
</div>上記のような入れ子になった HTML 要素があった場合、
「span 要素の親は p 要素である」
「p 要素の親は div 要素である」
と言えます。
・子要素
ある要素から見た 1 階層下の要素のこと。
<div>
<p>
<span></span>
</p>
</div>上記のような入れ子になった HTML 要素があった場合、
「div 要素の子は p 要素」
「p 要素の子は span 要素」
と言えます。
・孫要素
子要素以下の要素のこと。
<div>
<p>
<span></span>
</p>
</div>上記のような入れ子になった HTML 要素があった場合、
「div 要素の孫は span 要素」
と言えます。
ちなみに、子要素と孫要素を合わせて「子孫要素」と呼んだりします。
<div>
<p>
<span></span>
</p>
</div>上記のような入れ子になった HTML 要素があった場合、
「div 要素の子孫要素は p 要素と span 要素」
「p 要素の子孫要素は span 要素」
と言えます。
・属性
要素の持つ性質を表現するもの。
属性には「どの要素にも指定できる属性」と「特定の要素のみ指定できる属性」の 2 種類が存在します。
また、どの要素にも指定できる属性をグローバル属性と呼んだりします。
グローバル属性紹介
グローバル属性の種類はたくさんあるのですが、ここではその中でも代表的な 5 種類を紹介いたします。
・id 属性
要素に対してユニークな識別子（HTML 文書中 1 個しか出現しない名前）を定義します。
ユニークな識別子という名前の通り 1 つの HTML 文書の中で同じ値を複数使用することはできません。
前回の説明で属性には半角スペースで区切ることで複数の値が設定できると説明しましたが、id 属性に関しては 1 つの要素に指定できる値は 1 つのみです。
id 属性は、URI フラグメントを用いて文書の特定部分へリンクするために使われます。
要素をスタイルシートで装飾する際にも使用できますが、先程記載したものを含めていくつかの制約があって使いづらいです。
そのため、原則的に URI フラグメントのためにのみ使用すると覚えてください！
（具体的な理由はいつか CSS に関しての記事を書いたときにでも……）
・class 属性
要素に対して識別子（名前）を定義します。
id 属性と違ってユニークである必要はありませんし、1 つの要素に対して複数の値を指定することもできます。
要素に名前をつけるというよりも、会社でいう「部署」に配属させると言ったほうが適切かもしれません。
ある部署に複数の人間が所属していたり、1 人の人間が複数の部署に所属していたりするように、ある要素が複数の class 属性の値を持っていても、ある class 属性の値が複数の要素に指定されていても問題ありません。
class 属性はスタイルシートで見た目を装飾する際にその対象を指定するために使用されます。
・lang 属性
要素の内容（コンテンツ）の基本言語を指定します。
使い方としては html 要素にて指定することで、文書全体で使用されている言語が何かを明示することが多いです。
値は言語名に対応する ISO 639 コードを指定します。
例えば、日本語なら ja 英語は en です。
省略しても問題ありませんが、スクリーンリーダーに使用している言語を伝えるためにも必ず指定するのがマナーです。
・style 属性
値に CSS 宣言ブロックを記述することができます。
この属性を指定することで直接要素に対してスタイリングすることができますが、HTML 文書はあくまでも文書構造を示すためのものなので特別な理由がない限りスタイリングはスタイルシートに記述しましょう！
・title 属性
要素の補助的な情報を指定します。
リンクに対して使用する場合はリンク先のタイトル、画像に対しては画像の作品や説明文、引用に対しては引用元の情報を記載したりなど様々な使い方ができます。
アウトラインについて
本当は HTML 要素の紹介をしていこうと思っていましたが、この記事内に入れるには文字数が多すぎるのでそれは次回に……。
というわけで、最後にマークアップする上で大切なアウトラインについて説明したいと思います！
アウトラインとは文書の章立てを表すものです。
文章の目次と言ってもいいかもしれません。
例を見たほうが早いと思うので、お見せしますね。
1. 概要
2. 国号
2.1 日本語の表現
2.1.1 発音
2.1.2 別称
2.2 その他の言語
2.3 国号の由来
3. 歴史
3.1 日本の黎明
3.2 律令国家の成立と貴族政治の展開
……
（Wikipedia の記事から一部省略して引用）
こんな感じのものです。
実は全ての Web サイトにこのアウトラインというものが存在します。
HTML 5 Outliner というサイトの HTML: と書かれた文字の下にある大きな入力欄に、適当なサイトを右クリック、「ページのソースを表示」をクリックして表示されるページを全部コピーして貼り付けて「Outline this」を押してみましょう！
（テキスト量が多すぎると動かないので適度な物量のサイトで試してください）
（画像は MDN のトップページで試してみたものです）
目次のようなものが書かれていなくても、上記のような章立てが確認できると思います。
（サイトによってはアウトラインが残念な感じになっているものもあるかもしれません）
chorome を利用している人は chorome の拡張機能でワンクリックでサイトのアウトラインを確認できるものがあるのでぜひ入れてみてください。
これは h1 などの見出し要素などによって自動的に生成されます。
具体的にどういうふうに書けばきれいなアウトラインが生成されるかは次回以降に説明します。
とりあえず、今は「HTML を書くときはこのアウトラインを意識しないと行けないんだなぁ」程度に思っていただければ……。
このアウトライン、検索ロボットにとっては重要なものです。
皆さん、何か専門書や技術書を買うときに、どんな内容について書かれているか本屋で目次を確認してから買うという経験はありませんか？
目次を見るだけで、その本にかかれている内容が中身を全部読まなくても何となくわかりますよね？
これは検索ロボットでも同じで、Webページのアウトラインを見てそのページの概略を把握して（いると言われて）います。
（私も人から聞いた話なので、具体的なソースは提示できず……。すみません。）
まぁ、SEO 対策の一つとして「アウトラインをきれいな構造にする」は有名な手法なので、意識しといて損は無いはずです。
最後ふわっとした話で締まりませんが、～ 基礎編その 1 ～ を終わりにします。
次回はこの記事で紹介できなかった HTML 要素の説明をしていこうと思います。
もし間違ってることを書いていたら Twitter の DM か記事にコメント下さい。
もし、恵んでやってもいいかなと思ってくださったらぜひお願いします