HTML5 とは?

公開日: : html5

HTML5とは?

HTML5は、標準化団体のW3C(World Wide Web Consortium)とWHATWG(Web Hypertext Application Technology Working Group)が2008年から共同で仕様策定中のHTML(Hyper Text Markup Language)の最新バージョンである。

W3Cが進めていたHTMLを再定義した「XHTML」の構造化を目指した「セマンティックWeb」と、WHATWGが新しい独自仕様で策定したWebアプリケーションにフォーカスしたマルチメディアを実装する言語に向上することがHTML5の主な目的である。

対応ブラウザ

Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9

文字コード

“UTF-8”(デフォルト)

HTML5の主な機能追加

Canvasタグ、Videoタグ、Audioタグの追加

動画や音声、グラフィックの描画が可能に

Web Storage(ウェブ ストレージ)

Cookieよりも簡単に、大量のデータをクライアント側に保持させることが出来る

Form機能の強化

要素、属性、入力タイプ、ブラウザベースの検証、CSS3 スタイリングの手法、FormData オブジェクトなどが追加

Web Workers

JavaScriptでスクリプトをバックグラウンドで実行

CSS3

多彩なグラッフィック表現が可能になる

SVG(Scalable Vector Graphics)

ベクター画像をWEB上で表示することが可能に

基本構造

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
コンテンツ内容
</body>
</html>

bodyタグ内での新しい構造化タグの追加

header: ページタイトルやサブタイトル、ロゴ、前置的な文章などの表示領域。
nav: サイト内ページへのリンクの集まり。
section: 見出し(h1~h6)が含まれまる、ドキュメントのセクションまたはアプリケーション用のセクション。
article: ひとつの完結した記事のセクション。ブログやWebマガジンの場合、一覧記事の個々のエントリー。
aside: メインコンテンツから分離しても構わないセクション。
footer: コピーライト・関連リンク・Emailページのフッター領域。

新要素を使った構造の例

html5新要素構造例

基本構造例(サンプルコード)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="sample.js"></script>
</head>
<body>
<header>
<h1><abbr title="HyperText Markup Language 5">HTML5</abbr></h1>
<nav role="navigation">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
</header>
<section>
<h2>セクションのタイトル1</h2>
<article>
<p>独立したコンテンツ</p>
</article>
<article>
<p>独立したコンテンツ</p>
</article>
</section>
<section>
<h2>セクションのタイトル2</h2>
<article>
<p>独立したコンテンツ</p>
</article>
<article>
<p>独立したコンテンツ</p>
</article>
</section>
<aside>
<p>関連のあるセクション</p>
</aside>
<footer>
<small>Copyright &copy; 2014</small>
</footer>
</body>
</html>

HTML5オススメチェッカー

URLを入力するだけでチェックが出来ます。

Validator.nu (X)HTML5 Validator

素材

HTML5 ロゴをトレースを、フリー素材にアップしました。
フリー素材

関連記事

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

html5

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

→もっと見る

    • 201812
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      24252627282930
      31
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑