HTML5 基礎教程

HTML5 API

HTML5 メディア

HTML5 図形

HTML5 新しい要素

HTML5の意味のあるタグおよび属性は、開発者が明確なウェブページレイアウトを実現するのに非常に便利で、CSS3の効果的なレンダリング、豊富で柔軟なウェブページの迅速な構築が非常に簡単です。

HTML5 新しい要素

から1999年以降HTML 4.01 で多くが変更されました、今日、HTML 4.01のいくつかは廃止されました、これらの要素はHTML5では削除されたか再定義されています。

今日のインターネットアプリケーションをよりよく処理するために、HTML5多くの新しい要素と機能が追加されました、例えば: グラフィックの描画、マルチメディアコンテンツ、より良いページ構造、より良い形式処理、およびいくつかのAPIドラッグ＆ドロップ要素、位置決定、包括的なウェブページアプリケーションキャッシュ、ストレージ、ネットワーカーなど。

HTML5の新しいタグ要素

<header>ページやエリアのヘッダーを定義；
<footer>ページやエリアのフッターを定義；
<nav>ページやエリアのナビゲーションエリアを定義；
<section>ページの論理的な領域や内容の組み合わせ；
<article>本文や一つの完全な内容を定義；
<aside>補足や関連内容を定義；

navナビゲーションタグ

例

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　Navナビゲーションタグの使用/title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>

テストを見て‹/›

<header>タグで実現

例

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><header>タグで実現 by ja.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>

テストを見て‹/›

<footer>タグで実現

例

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><footer>タグで実現 by ja.oldtoolbag.com</title>
</head>
<body>
<footer>タグで実現
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>

テストを見て‹/›

<section>ブロックと<article>記事

例

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><section>と<article>タグで実現 by ja.oldtoolbag.com</title>
</head>
<body>
<section>と<article>タグを実現します
<section　id="posts">
　　　　　　　　/*複数の<　article>を含むことができます*/
　　　　<article　class="post">
　　　　　　　　　/*articleの内容*/
　　　　　　　　</article>
　　　　　　　　<article　class="post">
　　　　　　　　　/*articleの内容*/
　　　　　　　　</article>
</section>
</body>
</html>

テストを見て‹/›

<canvas>の新しい要素

タグ	説明
<canvas>	グラフや他の画像などのグラフィックを定義するタグです。このタグはJavaScriptの描画APIに基づいています。

新しいメディア要素

タグ	説明
<audio>	オーディオコンテンツを定義します。
<video>	ビデオ（videoまたはmovie）を定義します。
<source>	メディアリソース<video>や<audio>を定義します。
<embed>	埋め込まれた内容（プラグインなど）を定義します。
<track>	例えば<video>や<audio>などのメディア要素に対して外部テキストトラックを規定します。

新しいフォーム要素

タグ	説明
<datalist>	オプションリストを定義します。input要素と組み合わせて使用して、inputが可能な値を定義します。
<keygen>	フォームのキーゲネレーターフィールドを規定します。
<output>	異なるタイプの出力（例えば、スクリプトの出力）を定義します。

新しい意味と構造要素

HTML5より良いページ構造を作成するために新しい要素を提供します：

タグ	説明
<article>	ページの独立した内容エリアを定義します。
<aside>	ページのサイドバー内容を定義します。
<bdi>	テキストを親要素のテキスト方向設定から切り離して設定できるようにします。
<command>	コマンドボタン（ラジオボタン、チェックボックス、ボタンなど）を定義します。
<details>	ドキュメントやドキュメントの一部の詳細を説明するために使用されます。
<dialog>	ダイアログを定義します。例えば、ポップアップボックスなど
<summary>	details要素のタイトルを含むタグ
<figure>	独立した流内容（画像、グラフ、写真、コードなど）を規定します。
<figcaption>	<figure>要素のタイトルを定義します。
<footer>	sectionやdocumentのフッターを定義します。
<header>	ドキュメントのヘッダーエリアを定義します。
<mark>	マーク付きのテキストを定義します。
<meter>	測定単位を定義します。最大値と最小値が既知の測定にのみ使用されます。
<nav>	ナビゲーションリンクを定義する部分。
<progress>	どの種類のタスクの進捗を定義
<ruby>	ruby 注釈（中国語の注音や文字）を定義
<rt>	文字（中国語の注音や文字）の説明や発音を定義
<rp>	ruby 注釈で使用され、ruby 元素をサポートしないブラウザで表示される内容を定義
<section>	ドキュメント内のセクション（セクション、区画）を定義
<time>	日付や時間を定義
<wbr>	テキスト内に適切な場所に换行符を追加する規定

削除された要素

以下の HTML 4.01 要素がHTML5中で削除されています:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 インライン SVG HTML5 ブラウザのサポート