--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2010年11月02日

HTML5について勉強してみた(初級編)

HTML4・XHTML1とHTML5の違いとHTML5のマークアップ +IE6でもHTML5に対応させるJavascriptの紹介。
HTML5はこれまでの使用と大きく違うのはマークアップ言語にとどまらず、ウェブアプリケーションの分野もカバーしているというところです。
これまでになかったAPIが数多く生み出されてきており、未来ウェブがアプリケーション・プラットフォームになる世界を実現しようとしている、とのこと。
今現在はそこまでいたってないので成長過程にある段階。

HTML5の策定で重要視される4つのポイント
「互換性」「実用性」「相互運用性」「ユニバーサル・アクセス」

    新しい API
  • ビデオやオーディオの再生
  • 保存
  • オフライン
  • 編集
  • ドラッグ&ドロップ
  • 戻るボタン
参考サイト:http://ja.wikipedia.org/wiki/HTML5
HTML5ができるまでの歴史の参考サイトは以下
・W3C:http://www.html5.jp/trans/w3c_differences.html
・HTML5,きちんと:http://www.slideshare.net/myakura/html5-2480964

HTML5の入り口マークアップ
HTML5はXMLベースのマークアップ言語ではないのでbr要素の終了タグを表す終端スラッシュが不要です。
ですがこれまで通り<br />と記述することも可能。極端に言えば<br> と<br />の混在も可能のようです。
HTML5ではアクセシビリティを考慮が数多く盛り込まれ、すでにつかわれてきた要素についても、アクセシビリティを考慮したマークアップが求められています。

■新たに導入された要素
section 一般的なセクションを表します。h1~h6、それに付随するコンテンツをグループ化します。
article ブログエントリーやニュース記事のように、単独で成り立つような孤立したコンテンツを含んだセクションを表します。
aside ページのメインコンテンツに関する参考コンテンツを含んだセクションを表す。朱に補足記事やサイドバーに使います。
hgroup セクションの見出し(h1~h6)をグループ化するために使います。
header セクションのヘッダーを表します。
footer セクションのフッターを表します。主に、著者、コピーライトなどを入れ使います。
nav 主に、サイト内のリンクを含んだセクション、サイト・ナビゲーションに使います
figure
figcaption
figure要素は、イメージやビデオなどの組み込みコンテンツと、そのキャプションをグループ化するために使います。キャプションにはfigcaption要素を使います。
video
audio
audio要素やvideo要素を使えば、プラグインなしにビデオ・ファイルやオーディオ・ファイルを再生することができるようになります。マルチメディアコンテンツを操作するためのAPIが用意されています。
source audio/video要素の中に入れて、該当のマルチメディア・ファイルのURLやMIME-Typeを複数していするために使います。
embed プラグインコンテンツを表します。これまで一般的に使われてきた要素ですが、html5で初めて正式に規定されることになりました。
mark ページ著書がページ読者に注意を払わせたい部分を表します。
progress 何かしらの処理の進歩状況を表します。html5ではブラウザーがこの要素をプログレスバーとしてレンダリングすることを想定しています
meter ディスク使用率といった計測結果を表します。html5では、ブラウザーがこの要素に指定された計測結果をグラフィカルにレンダリングすることを想定しています。
time 新暦のグレゴリオ暦における正確な日付、時刻を表します。
ruby
rt
rp
ルビを表すために使います
canvas グラフ、ゲームなど、動的にビットマップ・グラフィックをレンダリングするために使います。
command ユーザーが呼び出すことができるコマンドを表します。menu要素の中で、メニューの項目として使います。
details
summary
ユーザーの要求に応じて表示させることを想定した追加情報を表します。この要素は、ディスクロジャー・ウィジットと呼ばれるユーザー・インターフェースとしてレンダリングされることが想定されています。ウィジットのキャプションに、summary要素を使います。
datalist input要素の入力用に、コンボボックスに入力候補を表示するために使います。つまりサジェスト機能を提供します。この要素の中で、option要素を使って、入力候補をマークアップします。
keygen フォーム送信時に秘密鍵と公開鍵を生成します。主に電子証明書の発行に使われます。
output 計算結果を表します。
■意味の変更又は新たに意味づけされた要素
a html5ではページ内にあるアンカーリンクに使用してはいけません。要素を問わずid属性を指定するだけで、それがコンテンツのアンカーとして 機能します。
address

html5ではどの要素(セクション) の中にaddress要素が入っているかによって、そのaddress要素がどのコンテンツ部分に関連した連絡先情報なのかについて区別する方法が規定されています。(サイト全体に対する連絡先情報なのか、ページの中にある特定の記事の部分に対する連絡先情報なのか等。)

hr 段落レベルの区切りというセマンティクスが与えられました。
i 声やムードなどを表すテキストの範囲に使うか、又は、技術用語や船の名前、印刷表現ではイタリック体で表されるようなテキストの範囲に使うことになりました。
label html4と同じくフォームコントロールと関連付けることができます。html4では、ラベルをクリックすると、関連付けられたフォームコントロールがクリックされたのと同じ挙動を示すこととなっていましたが、html5ではOSのインターフェース基準に従うこととなりました。
menu 主にコンテキスト・メニュー(右クリックしたときのメニュー等)やツールバーといったウェブ・アプリケーションからの利用を想定しています。
small 注釈を表す要素として再定義されました。
strong 重要性を表す要素として再定義されました。
■廃止された要素(説明は省きます)
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • frameset
  • noframes
  • acronym
  • applet
  • isindex
  • dir
参考資料:徹底解説html5

その他HTML5関連の記事
HTML5をIEでも表示させる
DreamweverCS4でHTML5をコーディングできるようにする



最後にHTML5はまだW3Cでは勧告に至ってません。2009年12月の段階で草案の状態です。
それを踏まえたうえで使用するかどうか個々で判断し、着手することをお勧めします。

スポンサーサイト

Comment

非公開コメント

Trackback

http://perruche15.blog134.fc2.com/tb.php/29-074adb35

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。