*

HTML5で追加された要素と使用方法サンプル、備忘録!

公開日: : 最終更新日:2013/11/29 HTML+CSS

HTML5の書式は簡略化されていてソースも軽くなり使いやすいですが、ブラウザ対応状況などですべてを使うにはなかなか垣根が高く、いざという時に忘れがちになります。
忘れがちな要素などメモ書きします。

HTML5要素と使い方備忘録

要素 説明
section 章や節といった一般的なセクションでh1~h6要素の見出しとそれに付随するコンテンツをグループ化。
section要素の直下には必ずhx要素を含めなくてはならない。
※HTML5の仕様案では他のセクション内容要素に該当しないセクションのみを<section>要素としてマークアップすべきとしている。
article ブログエントリやニュース記事のように、単独で成り立つような独立したコンテンツを含んだセクションをグループ化する。
記事やページなど自己完結した独立した記事のセクション。
nav ページの中で主要なサイト・ナビゲーション
aside 注釈や余談など本文、ページのメインコンテンツと関連性が薄いコンテンツを含んだセクション
主にの補足記事やサイドバー。
hgroup セクションの見出し要素(h1~h6)をグループ化する。
最もレベルの高い見出し要素がそのコンテンツのタイトルとなり、それ以外の見出し要素はサブタイトルを表す。
header ページまたはセクションのヘッダー
footer ページまたはセクションのフッター
figure イメージやビデオなどのコンテンツと、そのキャプションをグループ化
figcaption figure要素の中で、キャプションを表す。
mark ページ著者がページ読者に注意を払わせたい部分|※ operaで改行されるバグあり。
time 新暦のグレゴリオ暦における正確な日付、場合によっては時刻を表す。
ruby ルビを伴ったテキスト
rt ruby要素の中で、ルビ・テキストを表す
rp
ruby要素の中で、ルビ・テキストの前後に括弧を入れる。
ルビをサポートしていないブラウザーでその括弧が表示。
wbr ブラウザーがテキストをレンダリングする際に、改行しても構わない位置を指定。
embed プラグイン・コンテンツ。これまでも一般的に使われてきた要素がHTML5で正式に規定。
video ビデオ再生
audio オーディオ再生
source video要素またはaudio要素の中で、再生するビデオやオーディオのURLを指定。
canvas グラフ、ゲームなど、動的にビットマップ・グラフィックをレンダリング
datalist input要素の入力用にコンボボックスに入力候補を表示。サジェスト機能を提供。
この要素の中でoption要素を使って入力候補をマークアップ
keygen フォーム送信時に秘密鍵と公開鍵を生成
output 計算結果
progress 何かの処理の進捗状況。
ブラウザがこの要素に指定された進捗状況をグラフィカルにレンダリングすることを想定。
meter この要素に指定された計測結果をグラフィカルにレンダリングすることを想定
details ディスクロージャー・ウィジット
summary details要素の中で、ディスクロージャー・ウィジットのキャプション
command ユーザーが呼び出すことができるコマンド。menu要素の中でメニューの項目として使用。

記述例.1


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイト名</title>
</head>
<body>

<h1>サイト名</h1>
<p>サイトの説明</p>

<nav>
<h2>サイト・ナビゲーション</h2>
<ul>
<li><a href="/new/">最新記事</a></li>
<li><a href="/about/">運営者情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
<section>

<h2>新着エントリー一覧</h2>
<article>
<h3>タイトル1</h3>
<p>本文</p>
</article>
<article>
<h3>タイトル2</h3>
<p>本文</p>
</article>

</section>

<aside>
<h2>広告</h2>
<div>...</div>
</aside>

</body>
</html>

記述例.2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイト名</title>
</head>

<body>
<h1>サイト名</h1>
<p>サイトの説明</p>

<nav>
<h2>サイト・ナビゲーション</h2>
<ul>
<li><a href="/new/">最新記事</a></li>
<li><a href="/about/">運営者情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>

<section>

<h2>新着エントリー一覧</h2>

<article>
<h3>タイトル1</h3>
<p>本文</p>
</article>

<article>
<h3>タイトル2</h3>
<p>本文</p>
</article>

</section>

<aside>
<h2>広告</h2>
<div>...</div>
</aside>

</body>
</html>

※書きかけです。

関連記事

HTML5+CSS3をIE8以下にも適用させる方法。html5shiv.js & PIE.htc

HTML5とCSS3をIE8以下でも対応させる覚書です。 html5shiv.js 以前は下記の...

記事を読む

IE11 ユーザーエージェント・スニッフィング 無効 マイクロソフトの強行仕様変更!

元々はマイクロソフト産ブラウザIEが右習いをしない体制が悪いのに!!! ようやく4月にIE6の呪縛...

記事を読む

各種ブラウザ表示検証用Webツール

制作環境WindowsOSで、Macでの表示を確認したい 昨今では、MacからWindows表示検...

記事を読む

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...

記事を読む

新着記事

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...

記事を読む

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプラグインのインストールなどして...

記事を読む

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされました。 夏前よりBeta版を...

記事を読む

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをしたばかりですが、その後突然フリー...

記事を読む

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリケーションが重たくなってきたの...

記事を読む

古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件

2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9...

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプ...

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされま...

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをした...

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリ...

→もっと見る

PAGE TOP ↑