ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

トップ＞HTML5について

HTML5について

HTML4.01やXHTML1.0の上位版として、コンテンツの論理構造をより明確化した画期的な
機能を持ったHTML5が出ました。
今後のWEBサイト作成においては、これまでに作成したWEBの資産を無駄にする心配のない、
下位互換性を持つこの新しいHTML5が主流となるでしょう。すでにHTML5をサポートする
ブラウザも増えてきました。

ここでは、まずHTML5の概要を見た後、次にHTML4.01とHTML５の違いを見てみましょう。
その後、既成のHTML4.01 で作ったWEBサイトを手直しして、HTML5のWEBサイトへと完全
移行する方法を述べてみたいと思います。

HTML5の概要

HTML4.01やCSS2.1は、サイトの構成つまりレイアウトやその属性に重心が置かれています
が、コンピュータによる情報処理を完全に自動化したい時や、ウェブアプリケーションを作成す
るには機能不足な面があり、そのために改善策として新しく改良されたものがWHATWGから
提唱されたHTML５ということになります。

更に、HTML5はブラウザ間の差異をなくし、APIといったWEBアプリケーションの開発に
関する機能の標準化も行われているので、実用性の高い規格となっています。
HTML5の書き方は、従来のHTMLやXHTMLとほぼ同じか、またはもっとシンプルになって
います。

HTML５の利用の現状の一例をあげると、
ブログ構成ツールとして多くの人々に利用されているWordPressでは、HTML5で記述された
テンプレートが標準搭載されています。
なおHTML5の策定作業はW3CとWHATWGとの共同で進められています。

　◆ CSS3の概要

CSS3はCSS2.1の機能をそのまま引き継いだ上位版であり、次世代の規格として、W3Cで
策定が進められています。

特徴としては、多くの新しい機能が追加されており、CSS2.1では画像やJavaScriptなどを
利用して表現するしかなかったデザインを、スタイルシートの設定のみで表現できるよう
になっています。

尚、新機能の種類は膨大なため、標準規格もフォントやリスト、テーブル、背景といった
機能別に策定が進められているようです。

HTML5の特徴と新機能

HTML5には新しいタグが追加されています。その特徴と主たる新機能を以下にあげます。


１．セマンティック・マークアップが導入される

セマンティック（semantic)とは、「意味の、意味論的な、語義の」などの意味を持つ形容詞です。

セマンティック・マークアップでは、ページ内の情報に対してメタデータ（semantics：意味、語義）を
付加します。

HTML4.01やXHTML1.0では、メタデータを指定するために、idとclass 属性、更には<div>と<span>が
用意されましたが、メタデータにルールが無かったために、セマンティック・マークアップとしてはうまく行き
ませんでした。

HTML5では、以下の２つの流れで、セマンティック・マークアップを行います。
　１つは、タグ<article>や<section>に意味をもたせ、それによってセマンティック・
　マークアップを行います。

　２つ目は、属性の形を利用して、管理されたボキャブラリー（語彙）でメタデータを
　付加します（属性の拡張）。

例えば、「microdata」という記述方式では、属性の形でメタデータを付加します。
Schema.org という管理されたボキャブラリーを利用して、ブログ記事にメタデータ
を付加する場合、全体をマークアップした、＜div＞や＜article＞に、itemscope属性
とitemtype属性を追加して、コンテンツの種類を　http://schema.org/BlogPosting
と指定して、ブログ記事であることを示します。
すると、子階層では、itemprop属性を利用して、ブログのタイトルや本文などを個別に示すことができるようになります。
タイトルの場合は「name」、本文の場合は「articleBody」といった具合です。

【 例 】これはHTML5で記述したwebページの例です。(HTML5Sample.html)　

上記の【例】（HTML5Sample.html）を見る ⇒⇒　ここを クリック！

（注）：メタデータのボキャブラリーはWeb制作者が独自に作成することも出来ますが、
一般的なボキャブラリーについては、検索エンジン大手のGoogle、Microsoft（Bing)、
Yahoo!の３社が共同で立ち上げた「Schema.org」（http：//schema.org/)で管理され
ています。

したがって、メタデータを付加することで、webページのコンテンツはより精密に分析
され、各社のアルゴリズムに従って検索結果に反映されることが期待できます。

例えばGoogleでは、
microdata に記述された商品レビューやレシピ情報などを検索結果の表示（スニペット）
に反映される様になっています。

２．図形や絵の描画、アニメーションなど作れる「canvas要素」
これまでなら図形や絵を表示したい時は、 画像を作って掲載しました。また、複雑
なアニメーションを作りたい時は、Flashなどを活用する必要がありました。

しかし、HTML5で追加された「canvas要素」を使えば、JavaScriptを使って動的に
図形を描画したり動かしたりできます。
canvas要素を使う場合は、描画するためにJavaScriptが必要ですが、SVGを使えば、
HTMLソース内だけで図形の描画が完結します。動的に生成したり、アニメーション
させる必要がない場合は、SVGの方がソースが短くて済みます。
また、MathMLを記述するためのmath要素を使うと、複雑な数式も表示させられます。


３．機能的な入力フォームを作れる。
HTML5を利用すると、フォームのフィールド内に入力内容を示唆するプレースホルダ
を表示したり、ユーザーに入力漏れや入力ミスを知らせることが出来ます。また、様々
な用途に特化したフォームも作れます。
例えば、
「メールアドレス入力フォーム」では、メールアドレス以外の文字列が入力されたら
ブラウザが警告してくれます。
「日付入力フォーム」だったら、input要素のtype属性を「datetime」にすると、
カレンダーが表示され、日付を選択することが出来ます。
他にも様々な機能があり、実用的なフォームを簡単に作れます。


４．スマートフォンやタブレットで最適表示。
CSS3のメディアクエリの機能を利用して、ブラウザ画面の横幅に応じて適用する
スタイルシートを変更し、スマートフォンやタブレットに最適化したデザインで
ページを表示できる。


５．グラフィカルデザインができる。
CSS3の角丸やグラデーション、影（ドロップシャドウ）、透明色、回転などの
機能を組み合わせて、ナビゲーションバーや枠のデザインをカスタマイズ出来ます。
また、フレキシブルボックスレイアウトに拠る高さを揃えた段組みの設定も出来ます。


６．映像・音声を再生・制御できる「video要素、audio要素」
映像（動画）を掲載したい時、今まではFlashなどのプラグインを使いましたが、
HTML5で追加された「video要素やaudio要素」を使えば、映像（動画）や音声
を簡単に再生できます。またJavaScriptを使うと様々な制御も出来ます。

HTML5への移行の仕方

　HTML4.01 で作成した既成のサイトを、
　　　HTML5のサイトに移行するにはどうしたらいいか？

　　　続きを見る