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>
※書きかけです。
関連記事
-
-
古いiOSのiPadで「問題が起きたため、このwebページを再度読み込みました。」となる件
2年ぶりに書いてみる。 すでにAppleより見放されてiOSが9.3.5止まりのiPad初期型...
-
-
IE11 ユーザーエージェント・スニッフィング 無効 マイクロソフトの強行仕様変更！
元々はマイクロソフト産ブラウザIEが右習いをしない体制が悪いのに！！！ ようやく4月にIE6の呪縛...
-
-
HTML5+CSS3をIE8以下にも適用させる方法。html5shiv.js & PIE.htc
HTML5とCSS3をIE8以下でも対応させる覚書です。 html5shiv.js 以前は下記の...
-
-
各種ブラウザ表示検証用Webツール
制作環境WindowsOSで、Macでの表示を確認したい 昨今では、MacからWindows表示検...
新着記事
-
-
古い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さんがまたヤッてくれました。 お仕事中にアプリケーションが重たくなってきたの...
PREV :
NEXT :
HTML5+CSS3をIE8以下にも適用させる方法。html5shiv.js & PIE.htc
