HTML5って何だっけ？新しく追加された要素やSEO内部対策について |

投稿日 : 2019年5月23日

HTML5って何だっけ？新しく追加された要素やSEO内部対策について

こんにちは、yutaです。

HTMLを学習している方は、「HTML5」という言葉を聞いたことがあると思います。「これから作るWebサイトはHTML5に準拠いていなきゃダメだ」とかね。でも、「そもそもHTML5ってなんやねん！」という方の為にサクっと読める程度でHTML5についての説明と、HTML5で新しく追加された要素についての説明を行います。また、要素を適切に使うことはSEO的にも大事だよという話もすこーしだけします。

1.HTML5とは
 2.HTML5での変更点
 2-1.HTML5とそれ以前でのDOCUTYPE宣言の比較
 2-2.HTML5で新しく追加になった要素
 3.要素を最適化してSEOの内部対策を行う

1.HTML5とは

W3Cの文書を参考にすると、もともと科学文書を書くために作られたHTMLという言語があったが、徐々に他の用途にも使われるようになった。その後様々な改良が重ねられ、HTML4.01やXHTMLなどが開発されたのち、現在はHTML5というバージョンが最新である、ということです。(正確には、HTML5.2)

2.HTML5での変更点

HTMLでは、DOCUTYPE宣言が簡潔になったり、header、footer、navなどの意味のある要素がたくさん追加されました。以下では、HTML5とそれ以前でのDOCUTYPE宣言の比較や、HTML5で新しく追加になった要素を紹介します。

2-1.HTML5とそれ以前でのDOCUTYPE宣言の比較

HTML5以前では、以下のようにDOCUTYPE宣言を記述する必要があり、分かりづらい感じです。

HTML5では、以下のようにDOCUTYPE宣言が簡潔になりました。

余談ですが、metaタグの記述も簡潔になっており、文字コードを設定するCharsetもHTML5では、<meta charset=“UTF-8”>だけで良くなりました。

2-2.HTML5で新しく追加になった要素

HTML5では様々な要素が新しく追加されました。今回は、それらの中からいくつかピックアップして解説します。

<header>

役割
ヘッダーを表します。ヘッダーに使う要素なので、<h1>、<h2>などの見出し要素が含まれていることを想定していますが必須ではないようです。

使い方
<div>などでヘッダーを作っていた方は、それを<header>に書き換えます。

<footer>

役割
フッターを表します。ナビゲーションを配置したり、著作権の記述をするのが一般的です。ナビゲーションを配置する場合は、あとで説明する<nav>を使うと良いでしょう。

使い方
<div>などでフッターを作っていた方は、それを<footer>に書き換えます。

<nav>

役割
ナビゲーションを表します。Webページトップのナビゲーションメニューなど、別ページへのリンクをまとめているエリアに用います。

使い方
Webページトップのナビゲーションメニューを<div>ではなく、<nav>で囲むように書き換えます。

<section>

役割
<section>内部が、意味や機能でまとめられた一つのセクションであることを表します。<section>は、後で解説する<article>とも似ていますが、<article>は記事という具体的な意味があるのに対し、<section>は漠然としたセクションなので、これを使用する際にはそのセクション内で統一された意味や役割があるか考えて利用すると良いでしょう。単にレイアウトのためにセクションわけするのであれば、<div>が適切です。

使い方
今回は、サイドバー内のプロフィールエリア、記事のアーカイブリンクエリア、記事のカテゴリーリンクエリアを<div>の代わりにそれぞれ<section>で囲むことでそれぞれが別々の役割を持ったセクションであることを表すようにしています。

<article>

役割
記事やコメントであることを表します。これも<section>同様に一つのセクションを表す要素ですが、セクションがもつ意味合いが記事やコメントとなっていてより具体的です。ブログ記事の表示エリアや、記事へのコメントエリアなどに使うと良いでしょう。

使い方
ブログ記事の表示エリアなどを<div>の代わりに<article>で囲みます。