読書研修ーWebを支える技術　第10章HTML

## HTMLとは
<strong>HTML</strong>は Hypertext Markup Languageの略です。
<strong>マークアップ言語(Markup Language)</strong>とは、タグ(Tag)で文書の構造を表現するコンピュータ言語です。
<strong>「構造化文書」(Structured Document)</strong>とは、マークアップ言語でマークアップした構造を持った文書です。

#### HTML5
* `＜section＞＜nаv＞`要素などを追加しています。
* JavaScriptアプリケ-ションのためのAPが新規に追加され、ローカルストレージの利用やドラッグ&ドロップなどが可能です。

## メディアタイプ
| メディアタイプ | 示すこと |
|:-:|:-:|
|  text/html |  SGMLベースのHTML |
| applicationlxhtml+xml2xhtml+xml |  XMLベースのXHTML |

どちらのメディアタイプを使う場合でもcharsetパラメータ起付けて文エンコーディングを指定できます。HTMLの文字エンコーディングは、一般的にUTF-8を使う。

## 拡張子
明示的にHTML表現を取得させたい場合は、URIに「.html」を付けるようにリソースを設計する

## XMLの基礎知識
#### XMLの木構造
XMLは、表現するデータを木構造にモデリングする
#### 要素
要素は開始タグ(Start Tag)、内容(Content)、終了タグ(End Tag)から成ります。タグには要素名が入り、開始タグは<要素名>、終了タグは</要素名>と記述する。
例：`<span href="/foo/bar/baz.html">sample link</span>`
#### 空要素
要素は内容を持たないこと:`<br></br>`
空要素は終了タグを省略: `<br/>`

#### 属性
要素は属性(Attribute)を複数持つことができます。
属性は属性名と属性値の組で、開始タグの中に属性名="属性値"という形式で記述します。属性名、属性値ともに文字列です。
開始タグは属性を複数持てますが、同じ名前の属性は1つだけしか記述できません。また、属性は入れ子にできません。開始タグの中での属性の順番には意味がありません。

#### 実体参照と文字参照
XMLの文書構造を記述するための特別な文字となる場合があるので、実体参照(EntityReference)という機構を用いて表現します。
<strong>定義済みの実体</strong>
| 文字 |実体参照 |
|:-:|:-:|
|  < | &lt  |
| >  |  &gt |
|  " |  &quote |
|   '|  &apos |
| &  | &amp  |

以外の文字をエスケ-プして表現する方法には文字参照(Character Reference)があります。こちらはUnicode番号で文字を指定します。


#### コメント
XML文書中にはコメントを書くことができます。
`<!-- コメント内容 -->コメントは「<!--」で始まり「-->」で終わります。`コメントの中に「-->」という文字列は挿入できません。

#### XML宣言
XML文書の先頭にはXML宣言(XML Declaration)を書く
```
<7xml version="1.0" encoding="utf-8"?>
<html mlns="http://www.w3.org/1999/xhtml">
...
</html>
```
XML宣言では、XMLのバージョンや文字エンコーディング方式な指定します。

### 名前空間
複数の XMLフオ-マットを組み合わせるときに、名前の衝突を防ぐ目的で使うのが名前空間(Namespace)です。
 要素の名前空間まずは要素の例から見てみましょう。
```
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:atom="http://www.w3.org/2005/Atom>
  <head>
    <link rel="stylesheet" href="base.css"/>
    <atom:link rel="enclosure" href="attachment.mp3"/>
  </head>
</html>
```
この2つの<link>要素を区別するために名前空間を使っています。<html>要素にxmlnsで始まる属性が2つあることに注目してください。これが名前空間宣言です。名前空間宣言はxmlns:接頭辞="名前空間名"という書式で記述。接頭辞には任意の文字列入ります。名前空間名にはURIが入ります。

## HTML要素
HTMLの最も基本的な構成要素はへッダとボディです。HTTPメッセージと同様に、へッダには文書のメタデータを、ボディには文書の内容そのものを入れます。
### へッダ
へッダに入る要素
| 要素|意味	|
|:-:|:-|
| title  |文書のタイトル |
| link  |  ほかのリソ-スへのリンク |
|  script |  JavaScriptなどのクライアントサイドプログラム |
|  meta | そのほかのメタデータ  |

### ボディ
#### ロックレベル要素
| 要素|意味	|
|:-:|:-|
| h1、h2、h3、h4、h5、h6	|見出し|
| dl,ul,ol	 |  リスト	|
|div  | プロックレベル要素のグループ化	 |
| p | 段落	 |
|  address| アドレス情報 |
| pre | 整形済みテキスト |
| table |  表|
| form | フオーム	 |
| blockquote | 引用	 |

#### インライン要素
インライン要素はプロックレベル要素の中に入る要素で、強調や改行、画像埋め込みなどを表現します。
主なインライン要素
| 要素	|意味 |
|:-:|:-:|
|  em	|強調 |
| strong	|強い強調|
|  dfn	|定義語  |
|code	|ソースコード|
|samp|	例|
|kbd|	キ-ボ-ド入力文字|
| var	|変数	 |
|	cite|	引用またはほかのリソースへの参照|
|abbr|	WWW、HTTP などの省略形|
|a	|アンカー	|
|q	|インラインの引用	|
| sup  |  上付き文字 |
| sub	  |  下付き文字	 |
| br  |  改行 |
|  ins |  挿入した文字列 |
| del|	削除した文字列|
|  img |  画像 |
| object  |  オプジエクト |

### 共通の属性
HTMLのすべての要素は、id属性とcass属性を持つことができます。
* id属性
文書内で一意なID。文書内のある部分をURIで示すときにURIフラグメント(「#」以降で指定する部分)で利用したり、CSS でスタイルを指定したりするときに利用する
* class属性
その要素が属するクラス。その要素がどのような意味を持つのかを指定するメタデータとしての役割がある。CSSでのスタイルの指定や、microformatsなどでメタデータを表現するときに利用する

## リンク
* `<a>`要素 -- アンカー
* `<link>`要素	
* `<a>`要素はHTMLのプロック要素の中で別のWebページにリンクするために用いましたが、`<link>`要素はHTMLのへッダでWeb ベージ同士の関係を指定するために使います。

### オブジェクトの埋め込み
一般的には画像の埋め込みには`<img>` 要素を、それ以外のオプジエクトの埋め込みには`<object>`要素を利用
### フォーム
#### フォームによるGET
フオームによる GET は、キーワード検索などユーザからの入力によって URIを生成するときに利用します。
#### フォームによるPOST
`<a>`要素や`<link>`要素でのリンクはGETしか発行できませんでしたが、フオームでのリンクはPOSTも発行できます。POSTはリソースの作成など、ユーザの入力をターゲットURIに送信するときに利用します。


## リンク関係
### rel属性
| リンク関係 | 意味|
|:-:|:-:|
|  alternate |  翻訳などの代替文書へのリンク	 |
| stylesheet  |  外部スタイルシートへのリンク |
| start  |  文書群の最初の文書へのリンク	 |
| next  |  文書群の次の文書のリンク |
| prev  |  文書群の前の文書へのリンク	 |
| contents  |  目次へのリンク |
| index  |  索引へのリンク |
| glossary  |   用語集へのリンク	|
| copyright  |  著作権表示へのリンク |
|  chapter | 章へのリンク	  |
|  section |節へのリンク   |
| subsection  |  小節へのリンク	 |
| appendix  | 附属書へのリンク  |
|  help |  へルプへのリンク |
| bookmark  |  文書中のプックマークへのリンク |
	

## ハイパ-メディアフオ-マットとしてのHTML

HTMLでリンクを設計する際は、「リンクをたどることでアプリケーションの状態が遷移する」ことを強く意識しましょう。リソース同士をきちんと接続してアプリケーション状態を表現できているかどうかは、HTMLでリソースを表現するときの重要な設計指針です。