HTML5のマークアップの備忘録

ここ最近、HTML5でマークアップすることが多くなってきましたが、分からないことが多いです。特にHTML5の新要素のマークアップの仕方は、何度もマークアップして覚えていかなければなりません。

なので、自分なりに覚えたHTML5の新要素(新要素だけではありませんが・・・)のマークアップの備忘録として記述します。

HTML5のドキュメントタイプ宣言

<!DOCTYPE html>

文字エンコーディング

<meta charset="utf-8">

HTML5の新要素が未対応のブラウザ向けCSS

header, footer, article, section, nav, aside, hgroup, figure {
	display: block;
}

CSSとJavaScriptファイルの指定

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

CSSの場合のtype="text/css"、JSのtype="text/javascript"などのtype属性は省略可能

IEにHTML5新要素を生成

( function () {
	var elems = [
		'header', 'footer', 'article', 'section',
		'nav', 'aside', 'hgroup', 'figure',
		'mark', 'time', 'ruby', 'rt', 'rp'
	];
	for(var i = 0; i < elems.length; i++){
		document.createElement(elems[i]);
	}
})();

hgroup要素

<hgroup>
  <h1>大見出しのh1要素</h1>
  <h2>中見出しのh2要素</h2>
</hgroup>

hgroup要素にはh1-h6要素以外の要素はいれることができない。

nav要素

<nav>
  <ul id="globalNavi">
     <li>メニュー1</li>
     <li>メニュー2</li>
     <li>メニュー3</li>
     <li>メニュー4</li>
     <li>メニュー5</li>
  </ul>
</nav>

aside要素

<aside>
  <ul id="localNavi">
     <li>メニュー1</li>
     <li>メニュー2</li>
     <li>メニュー3</li>
     <li>メニュー4</li>
     <li>メニュー5</li>
  </ul >
</aside>

header要素

<header>
  <hgroup>
    <h1>大見出しのh1要素</h1>
    <h2>中見出しのh2要素</h2>
  </hgroup>

  <nav>
    <ul id="globalNavi">
       <li>メニュー1</li>
       <li>メニュー2</li>
       <li>メニュー3</li>
       <li>メニュー4</li>
       <li>メニュー5</li>
    </ul>
  </nav>
</header>

footer要素

<footer>
  <address>連絡先:<a href="#">E-riverstyle Design</a></address>
</footer>

figure要素とfigcaption要素

従来のマークアップ

<img src="image/img.jpg" alt="代替テキスト" width="200" height="80" />
<p>画像のキャプション</p>

HTML5でのマークアップ

<figure>
	<img src="image/img.jpg" alt="代替テキスト" width="200" height="80">
	<figcaption>
		<p>画像のキャプション</p>
	</figcaption>
</figure>

video要素

<video width="640" height="360" controls="controls" autobuffer="autobuffer" poster="video.png">
	<source src="video.ogg" type="video/ogg">
	<source src="video.mp4" type="video/mp4">
	<p>ここに代替内容</p>
</video>
video.ogg / video.mp4
Safariはmp4のみ対応のため、mp4形式のファイルを用意する。
controlsコンテンツ属性
再生や停止などのUI表示
autobufferコンテンツ属性
ビデオが最後まで再生される可能性が高いことをUAに伝える論理属性。
posterコンテンツ属性
ビデオがロードされなかった場合やデータがブラウザで対応されてなかったりなどで、ビデオが再生できなかったときにposterに指定しれいる画像が表示される。
loopコンテンツ属性
自動再生の繰り返し
autoplyaコンテンツ属性
自動再生

audio要素

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" type="audio/ogg">
	<source src="file.mp3" type="audio/mp3">
	<p>ここに代替内容</p>
</audio>
ogg
FirefoxがMP3に対応していないので、ogg形式のファイルを用意

section要素

<section>
  <h1>記事タイトル</h1>
   <p>概要文など</p>
 <section>
    <h2>中見出し</h2>
    <p>内容分</p>
 </section>
</section>

article要素

<article>
  <section>
    <h1>記事タイトル</h1>
     <p>概要文など</p>
   <section>
      <h2>中見出し</h2>
      <p>内容分</p>
   </section>
  </section>
</article>

間違いなどありましたら、ご指摘いただければ幸いです。次はform関連要素について記述します。