STINGER5で見るHTML5から新たに追加された要素

 2014/10/10

html5-1
WordPressの人気テーマSTINGERシリーズもヴァージョン5となりHTML5へと変わりました。HTML5からは新たに加わった要素がいくつかあり、ざっくりとしか理解していない方もいると思います。(わたし、わたし!)おさらいの意味も兼ねてHTML5から加わった新要素をSTINGER5に照らし合わせて説明していきたいと思います。

Attention

STINGER5のver20150505よりマークアップが変更となりました。こちらの記事はver20141227以前のマークアップ方式に基づき書いたエントリーとなりますのでご了承ください。

スポンサーリンク


STINGER3とSTINGER5のページを構成する要素の違い

HTML要素とはHTMLでマークアップした文書を構成するもので、titleタグやhead、strongやmetaタグなんかもそれに該当します。

STINGER3の場合

heml4-stinger3

STINGER3ではページレイアウトを構成するすべての要素<div>タグで出来ており、それぞれにidやclassを設定しcssで見た目を制御しています。<div>タグは文書構造上特に意味を持たないタグなので、単純にレイアウトを構成するために使用されているのです。

したがって<div id=”header”>として、で見た目を整えブラウザ上はヘッダー部分を示したとしても、文書構造上では単なる『箱』という意味合いでしかないのです。

STINGER5(HTML5)の場合

heml5-stinger5

変わって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は以下のサイトの説明が参考になります。

<footer>

<footer>はフッター要素であることを表す要素です。ページ下部に記述し、ナビゲーションやコピーライトなどを挿入して利用します。

<time>

日付や時刻を表します。timeは文書内の一部に対して意味づけを行う要素の一つです。既存のタグであれば<strong>や<em>の分類と同じものです。STINGERではブログの公開日のところで使用しています。

参考

ちょっと内容が違いますがこちらの記事はHTML5から変更された要素について詳しく書いてあるので大変参考になります!

要素ではないですが…

HTML5から追加された属性role属性についてもエントリーを書きましたのでよろしければ合わせてこちらもどおぞ╭( ・ㅂ・)و

まとめ

普段ブログを書く中ではHTML5のことなどは気にすることはないかと思います。しかしサイトのカスタマイズをするなら最低限の要素は憶えておきたいところです。アウトラインが崩れてしまったりするので。
また間違ったマークアップしてしまった結果、SEO的にマイナスに作用してしまうことだって今後はあるかも。わからないですけど(~_~;)

自分でHTML5のサイトを一から作らないとなかなか憶えられなくていけません。改めて勉強しなおさないとダメっぽいです。それでは、ちゅんこ@shufulifeがお送りしましたー!!

STNGER5

Please comment!

  

2件のコメント

  • kojikoji 2015年5月5日 1:16

    WordPressでブログを始めたばかりの駆け出しブロガーです。
    WrodpressでStinger5を使用しているので、いつも参考にさせてもらっています。

    Twitterもフォローさせていただきました。

    • ちゅんこ 2015年5月7日 15:34

      kojikoji様

      コメントありがとうございます!!今後ともよろしくお願いいたします

Messege




現在トラックバックはありません。