明日から、身につける。
明日から、身につける。
2012.06.14

初めてHTML5でコーディングする時のまとめ

はやち

こんにちは、はやちです。 今回は初めてHTML5を触る人のために色々とまとめてみました。
新要素のタグなどご紹介します。

まずはじめに

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<!--IEなど対応していないブラウザへの対応▼-->
<!--[if lte IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->

<title>初めてHTML5でコーディングする時のまとめ</title>
<link href="css/html5reset-1.6.1.css" rel="stylesheet" type="text/css" media="all" />
</head>

HTML5特有のDOCTYPE宣言と文字エンコードを記述します。IEなどHTML5のタグが読み込まれないブラウザのために『html5.js』をインストールし記述します。リセットcssは『html5doctor』をダウンロードして読み込みます。

HTML5で新しく出たタグ

header要素

名の通りheaderに使用するタグですが、ページ内に複数使うことができます。

hgroup要素

見出しと小見出しをグループ化して使用する要素です。要素内ではh1~h6以外の要素を使用することはできません

マークアップ例

<hgroup>
	<h1>初めてHTML5でコーディングをする時のまとめ</h1>
	<h2>hgroup要素についての紹介</h2>
</hgroup>
figure要素・figcaption要素

figure要素は画像・コードなどを囲う要素です。画像に対してのキャプションをつける場合はfigcaption要素を使用します。

マークアップ例

<figure>
	<p><img src="photo.jpg" alt="画像" /></p>
	<figcaption>ここにキャプションが入ります</figcaption>
</figure>
section要素

文章を囲う基本的な要素です、この要素には必ずh1~h6の見出しが必要です。 またdivのかわりにレイアウト目的に使用することはできません。

nav要素

サイトやページの主要なナビゲーションに使用する要素です。 個別に使用することはできません。

マークアップ例

<nav>
	<ul>
		<li><a href="#">HOME</a></li>
		<li><a href="#">NEWS</a></li>
		<li><a href="#">SERVICE</a></li>
		<li><a href="#">WORKS</a></li>
		<li><a href="#">COMPANY</a></li>
		<li><a href="#">RECRUIT</a></li>
		<li><a href="#">BLOG</a></li>
	</ul>
</nav>

複数のナビゲーションがある場合

<nav>
	<section>
	<h2>メニュー</h2>
		<ul>
			<li><a href="#">HOME</a></li>
			<li><a href="#">NEWS</a></li>
			<li><a href="#">SERVICE</a></li>
			<li><a href="#">WORKS</a></li>
			<li><a href="#">COMPANY</a></li>
			<li><a href="#">RECRUIT</a></li>
			<li><a href="#">BLOG</a></li>
		</ul>
	</section>
	<section>
	<h2>BLOGタグ一覧</h2>
	<ul>
		<li><a href="#">すべて</a></li>
		<li><a href="#">デザイナー</a></li>
		<li><a href="#">プログラマー</a></li>
		<li><a href="#">社長ブログ</a></li>
		<li><a href="#">お空</a></li>
		<li><a href="#">GO!GO!台東区</a></li>
	</ul>
	</setion>
</nav>
article要素

要素内にコンテンツとして成り立つ要素、メインコンテンツになる部分に使用される要素です。

aside要素

メインコンテンツとは関連性の低いサイドバーの広告バナーや補足記事などに使用される要素です。

time要素

グレゴリオ暦における日付や24時間表記の時刻を正確に表す為に使用します。 マークアップ例

<!--日付の表示 -->
<time>2011-03-09</time>

<!--時刻の表示 -->
<time>15:05</time>

<!--日付と時刻の表示-->
<time>2011-03-09T15:05:38</time>

日付の表記を変えたい場合

<!--日付の表示を変更 -->
<time datetime="2011-03-09">2011年03月09日</time>

<!--時刻の表示を変更-->
<time datetime="15:05">15時05分</time>
footer要素

名の通りfooter部分の使用される要素です。こちらもheader同様、複数使用することができます。ちゃんと調べてみたら自分でも気付かなかったことがありました。今後気をつけねばです_(:3」∠)_