STINGER5で見るHTML5から新たに追加された要素STINGER5で見るHTML5から新たに追加された要素WordPressの人気テーマSTINGERシリーズもヴァージョン5となりHTML5へと変わりました。HTML5からは新たに加わった要素がいくつかあり、ざっくりとしか理解していない方もいると思います。(わたし、わたし!)おさらいの意味も兼ねてHTML5から加わった新要素をSTINGER5に照らし合わせて説明していきたいと思います。AttentionSTINGER5のver20150505よりマークアップが変更となりました。こちらの記事はver20141227以前のマークアップ方式に基づき書いたエントリーとなりますのでご了承ください。スポンサーリンク[toc]STINGER3とSTINGER5のページを構成する要素の違いHTML要素とはHTMLでマークアップした文書を構成するもので、titleタグやhead、strongやmetaタグなんかもそれに該当します。STINGER3の場合STINGER3ではページレイアウトを構成するすべての要素<div>タグで出来ており、それぞれにidやclassを設定しcssで見た目を制御しています。<div>タグは文書構造上特に意味を持たないタグなので、単純にレイアウトを構成するために使用されているのです。id=”header”>として、で見た目を整えブラウザ上はヘッダー部分を示したとしても、文書構造上では単なる『箱』という意味合いでしかないのです。変わってSTINGER5(HTML5)はSTINGER3と比べると非常にシンプルです。ヘッダー部分には<header>、フッターは<footer>と要素を使うことで文書構造上にもそれがヘッダーやフッターであると明確に理解できます。このように<div>タグを使用し見た目だけの意味を付ける方法から、文書構造上にも意味を持たせた新しい要素を使うことで、サイトを見る人にも、検索エンジンにも意味が理解できるサイトを作ることができるようになるのです。STINGER5にあるHTML5の新要素の説明HTML5は従来のHTML4を改良し、文書構造をより明確にするための要素が追加されています。<header><header>はヘッダー要素であることを表す要素です。通常はサイト名やロゴ、ナビゲーションなどを挿入して利用します。※<head>とは別物なので注意!<nav><nav>はナビゲーションであることを表す要素です。<main><main>タグで囲まれた部分はbody要素のメインコンテンツであると定義するタグという意味合いです。body内に1つしか存在しません。<article><article>は文書内でひとつの記事であることを表します。articleはそれだけで一つのコンテンツとして成り立つものに使用します。ブログなどの記事がそれにあたります。STINGER5は1ページに1記事なのでarticleはひとつしか存在しないのはそのためだと思われます。<section><section>は文書内でひとつのセクションであることを表します。セクションとは主にページ内の文書に対して、おおまかなグループ分けをすることです。HTML4でいうdivタグのようなタグですがdivタグのようなcssの受け皿のような使用方法は避けるべきだとされています。STINGER5では記事の内容部分で使用しています。<aside><aside>は補足説明や、本文内容と直接関連しない余談などを表します。補足記事やサイドバー、広告などがそれにあたります。STINGER5ではサイドバー部分で使用しています。asideは以下のサイトの説明が参考になります。HTML5でサイトをつくろう<footer><footer>はフッター要素であることを表す要素です。ページ下部に記述し、ナビゲーションやコピーライトなどを挿入して利用します。<time>日付や時刻を表します。timeは文書内の一部に対して意味づけを行う要素の一つです。既存のタグであれば<strong>や<em>の分類と同じものです。STINGERではブログの公開日のところで使用しています。Shufulifeまとめ普段ブログを書く中ではHTML5のことなどは気にすることはないかと思います。サイトのカスタマイズをするなら最低限の要素は憶えておきたいところです。アウトラインが崩れてしまったりするので。間違ったマークアップしてしまった結果、SEO的にマイナスに作用してしまうことだって今後はあるかも。わからないですけど(~_~;)自分でHTML5のサイトを一から作らないとなかなか憶えられなくていけません。勉強しなおさないとダメっぽいです。記事URLhttps://shufulife.com/html5/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。