HOME > > > html5を組む上で忘れがちなタグ・マークアップをまとめてみました

html5を組む上で忘れがちなタグ・マークアップをまとめてみました

html5

html5を組む時に忘れがちなコト

html5ファイルを組む上で忘れがちなコトをまとめておきます。
ちゃんと使おうとすると結構忘れちゃったり、あれ?このタグどこだっけ?ってなっちゃいます。

DOCTYPE宣言

宣言がないと互換モードになってしまいます。
宣言を記述すると標準モードで解釈されます。

<!DOCTYPE html>

script

外部からjavascriptを読む時の記述ですが、HTML4.01時から変更になっています。
type属性の初期値はtype=”text/javascript”なので、HTML5ではtype属性の指定を省略する事ができます。

<script src="sample.js"></script>

header

サイトのヘッダ情報を示すタグです。

<header>・・・・・</header>

nav

メニュー等のナビゲーションを示すタグです。

<nav>
<ul>
<li>・・・・・</li>
<li>・・・・・</li>
<li>・・・・・</li>
</ul>
</nav>

article

ブログ記事やサイトの更新情報などに使用します。
sectionとどう使い分けたら良いかと聞かれますが、
articleは囲んだ部分が1つの記事として成り立っているというコトです。
使用する場合は、article内がタイトル、hタグ、コメントなどできちんと形成されているか確認しましょう。

<article>
<header>
<h1>記事タイトル</h1>
<p>記事テーマに関する</p>
</header>
<p>記事のコメント</p>
</article>

section

sectionは1つのセクションを表します。
範囲は1つのまとまりであるコトを意味しています。
1つの記事の中に項目分けされている場合は、項目ごとにsectionで囲みます。

<section>
<h2>記事タイトル1</h2>
<p>記事テーマに関する</p>
</section>

<section> <h2>記事タイトル2</h2> <p>記事テーマに関する</p> </section>

h1~h6

hタグは見出し(タイトル)に使います。
h1が大見出しとして、数字が増えてく毎に見出しの位置関係が低くなります。
SEOを考えるなら1ページにh2までは入れた方が良いと考えます。
html5ではh1が何回も使えますが、どうなんでしょうか。
articleとsectionの使い方次第ではh1ばかりになってしまうという方は、ページデザインの段階でhタグのコトも考えながらデザインしていくと良いかもしれません。

<h1>大見出し</h1>
 <h2>記事中見出し1</h2>
  <h3>記事中見出し1</h3>
・・・
・・・
・・・

address

直近の祖先にあたるarticleかbody要素に対する連絡先情報を示す場合に使います。
メールとか問い合せフォームリンクとか。
addressという名前から住所を囲むかと思うのですが、住所には使えません。

<address>
<p>連絡先はこちらまで</p>
<a href="mailto:mail@sample.com">mail@sample.com</a>
<a href="contact/">メールフォームはこちら</a>
</address>

aside

asideはページにおける補足情報を示すタグです。
メインのコンテンツに関連はしているけれども、直接関係無い部分に記載します。
ブログだとアーカイブリストや最新記事リスト部分が対象になります。

<aside>
<ul>
<li>記事タイトル3</li>
<li>記事タイトル2</li>
<li>記事タイトル1</li>
</ul>
</aside>

footer

コンテンツのフッター部分を示すタグです。
footer部分はfooterで囲みましょう

<footer>
フッター内
</footer>

small

smallは著作権などを示します。
フッター内のコピーライトはsmallで囲みます。

<footer>
<p><small>copyright©2000</small></p>
</footer>

仕様が廃止になったタグ

こちらは仕様から廃止になったタグです。

hgroup

hタグ(見出し)をグループで囲むタグでした。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.02.20

HTMLの記事を読んだ人にオススメ