ボクココ

個人開発に関するテックブログ

かるーくHTML5の関連本を読んでみた

HTML5のcanvas要素にかなり憧れを持って本をのぞいてみました。その本はHTML5の全般に関して書かれていたため、canvas要素はあまり多くは取り上げられていませんでした。
何が多かったのかというと、pとかだけでよくね?と思えてしまうようなタグ。おそらくこれってSEO対策とかの時に使うタグなんだろうけど、実際に作っていく上でユーザーには見えない部分だからちょいと面白くないな―と思ってしまった。こういうのって言語解析とかで勝手に要素作りやってくれないのかな。
意外とびっくりしたのがフォーム関連。今までブラウザには無くてウィンドウズアプリにはあったようなものが続々と追加されていますな。ブラウザが普通のアプリとして使われる日もそう遠くはない。しかも保存するデータはサーバ側にすれば、本当にネットだけ使えればいい時代になる。
さて本当に簡単にですがまとめを書き残しておきます。


HTML5の設計原則
1、互換性
・コンテンツの互換性
これまで作られてきたウェブサイトもこれまで通り問題なく利用可能である
・古いブラウザーの互換性
もしサポートされていないブラウザーからのアクセスがあった場合、一部の機能を落としてでもある程度の機能を提供するか
フォールバック・コンテンツを表示する仕組みを導入することが考慮される。「グレースフル・デグラレーション」
・機能の再利用
クロスブラウザ問題の解決
・利用方法の互換性
過去の利用方法を出来る限り認めている。<br>→<br/>のような書き方でもOK
2、実用性
3、相互運用性
ウェブ制作者がブラウザによる違いを意識する必要がなくなる
4、ユニバーサル・アクセス
あらゆるメディア(PC,モバイル、テレビ、ゲーム機など)、あらゆる言語そしてあらゆる人でもアクセスできるように機能を開発する

HTML5の全体像
文書構造の要素や、マルチメディア系の要素が注目されがちだが、JavaScriptによるウェブアプリケーションの基礎となる技術やアクセシビリティ等も扱う。
16もの仕様があるので、それは興味があれば調べてみよう

HTML4とHTML5の違い
コンテンツ・モデル
HTML4におけるブロックとインラインという概念に置き換わるもの。インラインの中にブロックを入れてはいけないとされている。
要素をグループ化するもので、それぞれのグループには名前がつけられている。
その各グループでは、そのグループに属する要素にはどんなコンテンツを入れてもいいのかが規定される。
カテゴリー
1、メタデータコンテンツ ・・ 主にドキュメントのメタデータやスタイルの定義、ビヘイビアに分類されるような要素
2、フロー・コンテンツ ・・ 基本的にはドキュメント内に現れるコンテンツ全般
3、セクショニング・コンテンツ ・・ 章や節のように、見出しからその内容までを含んだ範囲を定義するコンテンツ
4、ヘッディング・コンテンツ ・・ 見出しを表す
5、フレージング・コンテンツ ・・ ドキュメントのテキスト。HTML4のインライン要素に近い概念
6、エンベッディッド・コンテンツ ・・ ドキュメントの中に外部リソースをインポートするコンテンツやHTMLではない別の言語で表されるコンテンツ
7、インタラクティブ・コンテンツ ・・ ユーザーが何かしらの操作をすることができるコンテンツ
8、セクショニング・ルート ・・ その前後のコンテンツとは切り離されたものとしてみなされる。独立したコンテンツかのように見なされる

アクセシビリティ重視
アクセシビリティに関する規定はHTML4では細かくなかった。HTML5アクセシビリティに配慮した規定が随所にみられる

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

変更された要素
a要素
href属性が無いものはプレースホルダーリンクを表す。
プレースホルダーリンク・・JavaScriptで動的に作られるものを想定して予めセットしておく場所
その他は以前の意味からの変更が多い。
廃止になった要素
basefont,big,center,font,s,strike,tt,u
frame
このようなものはCSSで対処できるので廃止となった。
applet要素の代わりにobject要素を使う

DOCTYPE
シンプルになった。  <!DOCTYPE html>

HTML作成の準備
用語
ドキュメント・・HTMLを使って表されるもの。静的・動的でもHTMLで作られたものならドキュメントである。
ブラウジング・コンテキスト・・ドキュメントがユーザーに表示される環境。個々のタブ、そのウィンドウ、
要素とタグ
コンテンツ属性・・要素に記述する属性のこと。
論理属性・・コンテンツ属性の中には値を指定せず、存在するかしないかだけで表すもの
列挙属性・・属性値に決められたキーワードしか指定することができない属性 inputの中のtypeなど
グローバル属性・・あらゆる要素で共通に利用できるもの
IDL属性・・JavaScriptから利用できるオブジェクト・プロパティのこと
オブジェクト・プロパティ・・JavaScriptから利用できるオブジェクトのプロパティ
CSSプロパティ・・CSSのプロパティ
リアライゼーション・・ブラウザはシリアライズされたHTMLデータを受信して表示している。
Content-Type
このヘッダーに何がセットされるかによってブラウザで解釈されるシリアライゼーションの種類が決定される。
その種類を表すのがMIMEタイプと呼ばれる値。 HTMLの場合はtext/html XMLの場合はapplication/xhtml+xml
文字エンコーディング
<meta charset="UTF-8" />
マークアップの作法
一部で終了タグは省略しても良い。 li要素など
スタイルシート
真要素はインラインで表示されるので、適宜必要になったらブロックで表示させるようにスタイルシートを記述すること。

Script要素
<script src=""></script>
async属性・・外部のスクリプトファイルを非同期で読み込んで、そのスクリプトが実行できるようになったらすぐに実行されるよう指示するための論理属性。
defer属性・・ブラウザがページの読み込みを完了した時点で、スクリプトが実行されるように指示するための論理属性。

組み込みコンテンツ要素
img要素
ismap属性・・サーバーサイド・イメージマップをクリックすると、a href 先のアドレスに対して、クリックされた座標情報を送る。
alt属性にはセマンティクスが加わっている。
iframe要素
別ページのコンテンツを組み込む。
<iframe src="child.html"></iframe>
srcdoc属性・・フレームに組み込みたいコンテンツを指定。 HTMLマークアップそのものを入れる。
name属性・・ブラウジング・コンテキスト名
sandbox属性・・iframe出組み込まれるコンテンツをサンドボックス化して、セキュリティーを強化。
コンテンツのフォームやスクリプトやプラグインを無効にする。リンクのターゲットも向こうになる。
seamless属性・・あたかも親のブラウジング・コンテキストの中に始めからマークアップされていたかのように扱う。フレームの境界線が引かれることなく、シームレスにレンダリングされる。

object要素・・主にプラグインを組み込むために使われる。FLASHとか

param要素・・object要素で組み込むプラグインが呼び出される際に、そのプラグインが初期値として採用するパラメータを定義する。

video要素
video要素にスタイルシートを適用でき、JavaScriptからビデオを制御できる。
自動再生、オートバッファ、ポスターフレーム、ループ再生、ビデオの種類 属性で変更可能
audio要素・・音楽再生
source要素・・複数再生したい場合に使う。使える順に再生される。
canvas要素・・動的グラフィックを作成する
map要素・・img要素やobject要素で表されたイメージの中の特定の幾何学的な領域をハイパーリンクにしたもの。
area要素・・イメージマップ上のハイパーリンクを定義

フォーム関連要素
fieldset要素・・フォームをグループ化するためにつかう
formコンテンツ属性・・これによって従来フォームコントロールはform要素の中に入れるものだったのが、その制約がなくなった。
input要素のtype属性
search・・検索用テキストボックス
tel・・電話番号用テキストボックス
url・・絶対URLを検証してくれるテキストボックス
email・・メールアドレスを検証してくれるテキストボックス
datetime・・日付と時間を入力するテキストボックス
date・・日付をカレンダーで入力できる
month・・月をカレンダーで入力できる
week・・週をカレンダーで入力できる
time・・時間をスピンボタンで入力できる
datetime-local・・日本に特化したサイトならこちらのdatetimeを使う
number・・数値を入力
range・・幅をレンジで設定
color・・カラーピッカーが表示される
input要素の共通属性
pattern属性・・正規表現でフォーマット指定
required属性・・その値がコントロールに必須かどうかを指定する
step属性・・コントロールに指定できる値の制度を指定する
placeholder属性・・テキストフィールドに何を入力したらよいかを気付かせるようなヒントを表す
autofocus属性・・ページがロードされた瞬間にフォーカスが当たるよう指示する

progress要素・・タスクの進歩を表す。value,maxで属性指定
meter要素・・評価レビューの星の数等に使う