はじめに
本記事では、主にHTMLタグの意味とその用法について取り上げました。
HTMLタグは多種多様にあります。
中には、<title>タグなどの直接SEOに影響する最重要タグもあれば、そうでないタグもあります。
初心者の方の多くは、「最重要タグだけ抑えていればいいじゃん」と勘違いし、重要でないタグを蔑ろにしがちですが、重要でないタグだからといって使い方を誤れば、HTML文書そもそもの意味合いが変わってしまい、検索エンジンに本来伝えなければならない情報が伝えられない為、結果的にSEOの低下、すなわち検索順位の低下に繋がってしまいます。
逆に言えば、タグを正しく理解し使いこなすだけで、SEOを高めることができるということです。
また、タグを正しく使うことでのその他メリットとして、自分以外の方がそのHTMLを見たときに、"どういうテーマをもったページで何を伝えたいのか"がHTMLからある程度理解しやすくなるということが挙げられます。
以上のことから、どんなタグも正しく理解することは非常に大切だということがわかったはずです。
この記事に辿り着いたのも運命。
これを機にタグについて正しく理解していきましょう
マークアップとは
そもそも、なぜタグを用いる必要があるのかを理解するためには、マークアップについて知る必要があります。
マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことです。
人間だったら理解できるテキストでも、コンピューターはそのテキストを正しく理解することができません。その為、コンピューターにも人間と同じようにテキストを理解してもらうように何かしらでテキストを定義してあげないといけません。その定義をするために用いるのがタグです。
例えば、
「ここのテキストはタイトルで、このテキストは一番の見出しで、このテキストは段落」
という文章をコンピューターに正しい意味で理解してもらう為には、
<title>ここのテキストはタイトルで</title>
<h1>このテキストは一番の見出しで</h1>
<p>このテキストは段落</p>
といったように、そのテキストの持つ意味に一番適したタグで定義してあげなければならないということです。
ということで、お待ちかねのタグの意味とその用法の解説に移ります
よく使われるタグの意味を知ろう
全てのタグの意味について書くとさすがに収まりきらないため、ここではよく使われるタグやよく間違って使われているタグのみをピックアップして説明します。
1. 文書にメタデータを付与するタグ類
<title>
文書にタイトルを指定するタグ。
検索エンジンが一番重みをおいているタグである最重タグの一つ。
~ 注意すべき点 ~
あくまで自然なタイトルにしましょう。また、文字数は長すぎると不自然さが出てしまい、クリック率低下に繋がる可能性があるため、極力短く簡潔なタイトルをつけるように心掛けましょう。
<meta>
その文書に関する情報（メタデータ）を指定するタグ。
初めてWeb開発をする方で忘れがちのタグの一つ。
文書の説明や検索ワードの設定、OGP設定などをすることができる重要なタグの一つ。
<meta>タグについては、こちらの記事により詳しく記載されていますので是非読んでみて下さい！
もうmeta要素を迷わない！最低限入れるべきmeta要素のまとめ
2. セクションに関するタグ類
<header>
ヘッダであることを示すためのタグ。
<footer>
フッタであることを示すためのタグ。
<h1>~<h6>
見出しを示すためのタグ。
<h1>タグは一番の見出しを意味するため、簡潔なテキストにしよう。
~ 注意すべき点 ~
<h2>タグや<h3>から使われていたりするのを見かけるが、それは間違った使い方です。絶対に<h1>から順々に使っていきましょう。
また、<h1>タグは一番の見出しを意味するため、１ページ１つしか使わないようにしましょう。
<section>
一つのセクションであることを示すためのタグ。（ここで言うセクションとは、意味や機能のまとまりのことを意味しています。）
HTMLの策定を行うW3Cという団体が推奨する使い方は以下の通りです。
The section element
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content.
【W3C】https://www.w3.org/TR/html51/sections.html#the-article-element
つまりは、「要素のまとまり一つを段落としたいなら<section>タグを使いましょう」ということです。
Question：
<div>タグと<section>タグってどう使い分ければいいの？
Answer:
ただのレイアウト目的として定義する場合は<div>タグ、それ以外の場合は<section>タグを用いるようにしましょう。ただ、<section>タグは意味を持つ要素のまとまりを示す為、見出しをつけるようにしましょう。
<article>
記事であることを示すためのタグ。
W3Cが推奨する使い方は以下の通りです。
The article element
The element represents a complete, or self-contained, composition in a document, page, application, or site.
【W3C】https://www.w3.org/TR/html51/sections.html#the-section-element
つまりは、「独立した内容を持つ要素のまとまりならarticleタグを使いましょう」ということです。
Question：
<section>タグと<article>タグってどう使い分ければいいの？
Answer:
まとまりの内容が単体で完結するのであれば<article>タグ、内容単体では完結しないが、意味をもつまとまりである場合は<section>タグを使うようにしましょう。
また、<article>タグ内に<section>タグがあるのはダメかな？と疑問に思われる方もいるかと思いますが、状況によっては起こり得るので、それ自体は全く問題ありません。逆も然りです。
<nav>
ナビゲーションであることを示すためのタグ。
サイト内で共通で使われているナビゲーションやカテゴリ一覧、パンくずなどのリンクをまとめるときに使います。
<aside>
余談や補足情報のセクションであることを示すためのタグ。
主に、サイドバーや補足説明、関連記事や広告などをまとめるときに使います。
補足
HTML5で上記のタグ達(<h1>~<h6>タグ以外)が追加されるまでは、<div>タグでセクション周りを定義することが当たり前だったということもあってか、未だに<div>タグを乱用しちゃっている方を度々目撃します。現在は、より詳しくテキストに意味づけできるようなタグが用意されたので、これを機に上記のタグを使っていくよう心掛けていきましょう
3.コンテンツの分類に関するタグ類
<p>
段落を意味するタグで、ページ内で最も多く使われるタグ。
Question：
<p>タグと<br>タグってどう使い分ければいいの？
Answer:
ただのレイアウト目的として定義する場合は<br>タグ、トピック単位で区切りたい場合は<p>タグを使うようにしましょう。ただ、<p>タグは段落以外では使わないようにしましょう。
<ul> <ol> <li>
リストであることを示すタグ。
<ol>は Ordered List(順番のあるリスト)、<ul>タグはUnordered List(順番のないリスト)を意味します。
ランキングなどの順番のあるリストには<ol>タグ、テキストを箇条書きに列挙したい場合は<ul>タグを使うようにしましょう。
<dl> <dt> <dd>
<ｄｌ>タグは説明リスト、<ｄt>タグは説明される言葉の定義、<dd>タグは用語や言葉の定義を示します。
このタグは、タグ内に記述しても良いタグが決まっているため、使用する際は注意です。
<ｄｌ>タグ内には、<ｄt>、<ｄd>、<div>の３種類のタグしか使用してはいけません。
詳しくは、こちらの記事に詳しく記載されていますので是非読んでみて下さい。
HTML5.2のdl要素について誤解していたこと
4. テキストの意味づけに関するタグ類
<a>
ハイパーリンクであることを示すタグ。
<a>タグはリンク元のSEO評価をリンク先に渡す役割をもつ重要なタグの一つ。
~ 注意すべき点 ~
検索エンジンは、<a>タグの内容とリンク先の主テーマの関連性を見ます。そのため、<a>タグには画像ではなくリンク先の主テーマを正確に伝えるためのキーワードを含めるようにしよう。
<strong> <em>
どちらも強調を意味するタグで、<strong>タグの方が強い強調を意味する。
使い分けが難しいところではありますが、ページの主テーマにより強い関連性を持つキーワードは<strong>タグ、その他で強調したいテキストには<em>タグを使用するようにしましょう。
5. 表に関するタグ類
<table> <caption> <th> <td>
<table>タグは表の作成、<caption>タグは表の見出し、<th>タグは表の項目、<td>タグはデータを示します。
表を表現したい場合に使うのは問題ないのだが、ページレイアウト目的で使用してはいけません。
~ 注意すべき点 ~
<table>タグを使用する際は、その表は何を意味するものなのかを明確にするためにもsummary属性を指定するようにしましょう。そうすることで、検索エンジンにより詳細な表の情報を伝えることができます。
まとめ
紹介したタグたちは全体のほんの一部ではありますが、これだけのタグを完璧に理解し使えるようになれれば、
脱マークアップ初心者といっても過言ではないでしょう
SEO施策には、HTMLタグを正しく使う以外にもたくさんありますが、何事もまずは基礎からということで、この辺りをしっかり理解して次のステップに進みましょう
おわりに
HTMLタグの意味とその用法についていろいろ書かせていただきましたが誤った知識もあるかと思われます。その際はご指摘いただけると幸いです。