文書構造（PDF 素材）

WEBの概念

  • 文書形式　HTML
  • 文書転送プロトコル　HTTP
  • 本書所在指定　URI

文書構造

  • URIとリンク

    URIをもとにページ同士がリンクという形で結ばれている。
    
 URL(場所)とURN(名前空間)を含むのがURI
    
 http://www.uni.ne.jp/admin/index.html
    • http://　　　URIスキーム
    • www　　　 サーバー名（サブドメイン）
    • uni.ne.jp　　ドメイン名
    • admin　　　フォルダ名
    • index.html　ファイル名
    • .html　　　　ファイル拡張子
    • admin/index.html　パス

  • 絶対URI

    http://www.uni.ne.jp/admin/index.html

  • 相対URI

    ./index.html
    • ./　　同階層
    • ../　　1階層上
    • ../../　2階層上

  • ブロック要素

    ひとつの独立したまとまり。ほぼ全てのブロック要素がインライン要素やテキストを含むことができ、さらにブロック要素を含むことができる。

  • インライン要素

    行内の一部。テキストレベル要素とも呼ばれる。必ずブロック要素に含まれる形式で記述するのが正しい。

  • <body>　→　<h1>や<div>等ブロック要素　→　<strong>や<a>等のインライン要素

  • 見出し（h1〜h6）ブロック要素

    • h1　大見出し　ひとつの文書にひとつだけ
    • h2　中見出し、h3　小見出し、h4〜h6　必要部応じて
    • 階層構造を守るため、h1→h2→h3→　と使用する。h1→h3は守られていない事になる。
    • インライン要素・テキストを含む事ができるが、ブロック要素は含める事ができない。

  • パラグラフ（p）　段落または文章のかたまり　ブロック要素

    • インライン要素・テキストを含む事ができるが、ブロック要素は含める事ができない。
    • 強制改行は、<br />。容易に使わないように。テキストをひとつの段落内に収める必然性がある時に使う

  • 作成者情報（address）

    • 原則としてすべての文書で明示する。
    • 更新日・公開日・作成者・著作権情報・コピーライトなど
    • 階層構造を守るため、h1→h2→h3→　と使用する。h1→h3は守られていない事になる。
    • img要素・object要素・map要素など、他にdiv・blockquote・form・fieldsetなどは含んではいけない。

  • 引用文（blockquote）ブロック要素

    • テキストをまとまった引用文として定義する場合に使用
    • 必ずテキストやインライン要素はｐ要素内で使用しなければならない。
    • cite属性で、引用元のURIを明示

  • インラインでの引用（q）

  • リスト（ol、ul） ブロック要素

    • ol　箇条書きリスト、ul　番号リスト
    • ol要素・ul要素には、li要素以外を含むことができない。
    • li要素には、テキスト・インライン要素・ブロック要素を含む事ができる。

  • 定義型リスト（dl、dd） ブロック要素（dt） インライン要素

    • dl要素には、dt要素・dd要素以外含む事ができない。
    • dt要素には、インライン要素・テキストを含む事ができる。
    • dd要素には、インライン要素・テキスト・ブロック要素を含むことができる。
    • 用語とその説明、参考文献とその説明、リンク先とその説明、日付と更新情報、カテゴリー名とその内容などの組み合わせで使用

  • 表（table、tr、th、td）ブロック要素

    • 表の作成に使用。
    • tr要素で行を定義し、内容としてth要素かtd要素を含めて、全体をtable要素で囲む。
    • tr要素は、th・td以外を含む事ができない。
    • table要素には、summary属性で要約文・th要素にはabbr属性で略語を指定する。
    • 表にタイトル（キャプション）をつけるには、caption要素を使用する。
    • 行のグループ化には、thead・tfoot・tbody要素を使う。trを囲むように指定する。
    • 列のグループ化には、colgroup要素・col要素を使う。
      
colgroup要素はcol要素を含む事ができるので、colgroupで列をグループ化し、各列のスタイルをcol要素で細かく指定するという使い方が可能。
    • セルの結合には、rowspan属性（縦方向）・colspan属性（横方向）で指定する。
    • セル内の位置指定には、align属性（水平方向の位置）・valign属性（垂直方向の位置）で指定。

  • リンク（a）インライン要素

    • テキストにリンクを設定する場合に使用。
    • 文書内のリンク要素の特定位置を示すために、id属性で指定する。
    • a要素内にa要素を配置してはいけない。
    • title属性でリンク先の補足情報を示す。
    • メールアドレスをURIとして指定する場合、href="mailto:test@test.com"とする。メール

  • 画像（img）インライン要素

    • src属性とalt属性が必須。
    • img要素は、将来object要素になる方向。

  • 強調（em、strong）インライン要素

  • 汎用要素　グループ化として使用。

    • div要素　汎用ブロック要素
    • span要素　汎用インライン要素

  • コメント

    • <!-- ここにコメントを -->
    • <!-- 複数行では
      
　　　　　　　　　こんな感じ -->

  • 文字参照

    • XHTML特有の記号と認識されるのを防ぐため『<』『>』『"』『'』『&』などの記号を、「&」から「;」までの内容で記述する。
    • 特に『<』『>』『&』は、文字参照として使用しなければならない。

Today's Tips

文書構造を決まりに準じて覚える事は、正しいXHTMLになる。SEO対策にもなる。