|Liberty自由に生きる。2019年5月23日HTML5って何だっけ?新しく追加された要素やSEO内部対策についてHTML・CSS|プログラミングこんにちは、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宣言が簡潔になりました。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>で囲むことでそれぞれが別々の役割を持ったセクションであることを表すようにしています。記事やコメントであることを表します。これも<section>同様に一つのセクションを表す要素ですが、セクションがもつ意味合いが記事やコメントとなっていてより具体的です。ブログ記事の表示エリアや、記事へのコメントエリアなどに使うと良いでしょう。使い方ブログ記事の表示エリアなどを<div>の代わりに<article>で囲みます。3.要素を最適化してSEOの内部対策を行うHTMLのコードを適切な要素を用いて記述することで、コードを編集したり、見たりする人にとって理解しやすくなるだけでなく、GoogleのクローラーロボットにとってもWebページの構造を理解しやすくなるため、SEOの内部対策として重要です。先ほど紹介した要素以外にも様々な要素がありますが、<div>や<span>といったグルーピング要素だけを使うのではなく、そこに記述する内容にあった要素を使用することでSEOを強化していきましょう。今回は、意外とよく分かっていないHTML5と、HTML5で新たに追加された要素についての紹介でした。【CSS】画面スクロールでヘッダー画像の上にコンテンツを表示する方法Webフォントとは?無料のWebフォントに触れてみた。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。