こんにちは、はやちです。 今回は初めて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」∠)_
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
