12. The basic of HTML

OperaWSC HTML

Web Design Concepts のとこは後で読むことに。

What HTML is

  • "HyperText Markup Language"
  • web documents 用の言語
  • ドキュメントの一部を user agent がどう解釈するか、という情報*1
  • user agent != web browser

What HTML looks like

<h2 id="htmllooks">What HTML looks like</h2>
  • `<h2>` が "tag"
    • この後に続くのはレベル2 の見出し、という意味
    • `</h2>` で終わり（"closing tag"）
  • tag 〜 cloning tag（その間のも含めて）が "element"
    • 厳密に言うと間違いだが、"tag" と "element" は同じ意味で使われることがある
  • `id="htmllooks"` は "attribute"

The history of HTML

今んところ HTML 4.01 と XHTML 1.0 があって、HTML 5 が策定中。

  • HTML 3.0 はブラウザメーカーが実装してくれなかったんで却下。HTML 3.2 でそれらの新しい機能は削除して、Mosaic とか Netscape Navigator で実装されてた機能を取り込んだ、なんてこともあったそうな。

The structure of an HTML document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Example page</title>
   </head>
   <body>
      <h1>Hello world.</h1>
   </body>
</html>
  • 最初に doctype がある
    • どの HTML なのかを指定してある->ブラウザが解釈できる
  • 次いで html element
    • document 全体が html element
  • head element
    • document そのものに関する情報（metadata）
    • title element: "Example Page"
  • body element
    • ページの中身
    • 上の例では "Hello world." という h1 element のみ

elements の中に他の elements を含むこともある。

The syntax of HTML elements

基本的に HTML の element はテキストをマーカー（tag）で包んだもの。テキストを包まないのもある。ほとんどの場合は sub-element を含むことができる。

elements は、その element の振る舞いを変えたり情報を追加する attributes を持つことができる。

<div id="masthead">
   <h1>The Basics of
      <abbr title="Hypertext Markup Language">HTML</abbr>
   </h1>
</div>

この例では div element に "masthead" という値の id attribute を持っている。
h1 element のテキストの一部は、"Hypertext Markup Language" という値の title attribute を持つ abbr element になっている。

HTML では多くの attributes が全ての element に共通だが、一部は特定の element 専用。形式は `keyword="value"`。値はシングルクォートかダブルクォートで囲むこと。

指定された attributes の取り得る値以外は使っちゃダメ。例外は id と class。

他の element に含まれる element は "child" と呼ばれる。逆に "child" を含む element は "parent" と呼ばれる。CSS と javascript でとても重要。

Block level and inline elements

HTML の element には大きく2つのカテゴリがある --- block level elements と inline elements。

block level は構造を表す。大抵は新しい行になる。paragraphs, list items, headings and tables.

inline elements は構造を表す block level element に内包される。hypertext links, highlighted words or phrases and short quotations.

Character refernces

特殊な文字。< とか > とか & とか。入力とかが難しい文字を方法。

ampersand `&` で始まって semi-colon `;` で終わる。間に数値（numeric references）か単語（entity references）で参照する。

*1:`(called "elements")` って書いてあるけど "tags" の間違いだと思う