OREMATOPEE

プログラミング、気になったこと、メモ書き...etc

HTML基礎

以下は、自身がフィヨルドブートキャンプのカリキュラムで学んだ内容をメモしたものになります。
元の著者が表現したい内容を歪めている可能性もあるので、詳しくは参考文献をご確認ください。また、フィヨルドブートキャンプ 独自のコンテンツで学習したメモもあるので、気になった方はご参加いただければと思います。

参考文献

ごく簡単なHTMLの説明

HTMLってなに

Hyper Text Markup Language 「テキストを超越した文章に意味付けを行える文法」

なぜ生まれた

CERNに務めていたティム・バーナーズ・リーにより、1989年に発明された。
研究所において扱われる資料などは流動的に改変されるため、それらを常に最新に保つことは難しく、従来の本の分類分けのような管理方法では現状を把握することが困難であった。 そのため、組織やプロジェクトが変化していくのに合わせて自在に追加・拡張でき、コンピュータの機種に依存せず相互に情報交換が行なえ、階層構造で分類整理するのではなく文書自体を相互につなげる仕組み=WWWを考案した。
ハイパーテキストやリンクなどはこの仕組みの構成要素である。

HTMLを扱う際に大事なこと

これまでの普遍的な文書構造に従い、段落や強調などそれら文章の構成要素がもつ意味合いを表現し、読み手にとって読みやすいものであること。
文書を分析・管理している強力なシステムにとっても理解しやすいように、どこからどこまでがタイトルなのか、見出しはどこか、こういった要素を把握し、文章を構造として捉えること

また、HTMLは文章の構造を記述することを目的としており、文字の形や色など見た目の情報をそこに混ぜると情報が不明確になってしまう。 HTMLに本来の役割以外の要素をもたせることは作者や読者に限らず、ハンディのある人にとっても不利益な結果になる。
情報を発信するということはコミュニケーションであり、誰にとっても使いやすく設計することが大事。

HTMLってなにでできてる

章、見出し、段落などの文書構造を構成する要素タグと呼ばれる目印で示して表現している。

<p>Hello, world!</p>

具体的には<p>という開始タグと、</p>の終了タグ(閉じタグ)のペアで挟んで要素の内容を表現している。

HTMLにはこういった文書構造を示すために種類分けされた要素タイプがたくさん存在する。
またタグ同士を入れ子にすることにより親子関係をもたせることができ、子は親に属するという関係性を表現することができる。(親要素>子要素)
こうした親と子に枝分かれしたツリー構造をきちんと表現することが、これら文章を利用するシステムの利点を最大限に発揮するために極めて重要な概念である。

なお、要素同士は自由に親子関係になれるわけではなく、要素タイプごとに子要素になり得るものは決められており、 こうした関係を内容モデルと呼ぶ。文書型定義(DTD)というHTMLの文法書で定めらている。

HTMLは一番の親要素(ルート要素)にhtmlタグが存在し、大きくヘッド要素(head)とボディ要素(body)で構成されている。これらはそれぞれ1つの文書に1回しか使うことはできず、中に記載する情報も役割ごとに明確に分けられている。

<html>
  <head>
    <!-- 文書自身に関する情報を記載する(メタ情報) -->
  </head>
  <body>
    <!-- 見出し、段落など本文を構成する情報を記載する -->
  </body>
</html>

ブロックとインライン

body要素の子要素となる要素タイプ群は、文書を構成する役割によって2つの種類に分けられる。 - ブロック要素 見出しや段落のように、それ自体が直接本文を構成する単位(ブロック)となる要素 - インライン要素 ブロックの一部分に対してそれを装飾するような役割をもつ要素

インライン要素内にブロック要素を置かないなどHTMLを構成する上で大事な原則である。
CSSで見た目を装飾する際に意図した挙動にならない場合などの問題が発生した際も、ブロックとインラインの概念は重要。

よいHTMLとは

WWWを使うユーザーには見る人聞く人、はたまた世界中のページを収集するロボットまで様々なユーザーがいる。
これらすべてのユーザーがハッピーになれるように書かれたHTMLのこと。

タイトルちゃんとつけよう

読み手だけでなくて作者自身にもタイトルは有用である。
本の背表紙のように一瞬でその文章に何が書かれているか、簡潔で具体的なタイトルをつけることを意識する。

altテキストには画像が示す意味を記載する

なんの画像があるのかということを書いても、音声ソフトで読み上げたときに意味が通じない。
その画像が示している意味を記載しよう。

アンカーには意味のある文を

リンクのための文章にするのではなく、そのまま読んでも意味が通じるようにアンカーテキストを配置すること。

ナビゲーションを活用する

Web文書は書物に比べて2次元情報に配置されているため、利用者は全体を俯瞰しにくく迷子になりやすい。
今どこにいるのか、次はなにか、利用者が迷子にならないようナビゲートし、またそれらに関する窓口を適切に用意する。

文書や作者に関する情報を示す

いつどこから文書がリンクされるか予測することは不可能。 作者の意図に反して文書が利用されることもある。
すべての文書に作者がだれであるかをたどれる情報を用意し、address要素に連絡先やメールアドレスを記載するなど作者自身が誰であるかを明示すること。

自分の情報を提供し、知らないことはリンクする

インターネットは分業の世界。自分より詳しい情報源があれば、そこへのリンクを提供する。
ユーザー全体で特定のトピックや情報を作り上げる意識を持つこと。
他者ではなく自分の情報を示すこと。

わるいHTMLとは

ユーザーの視点に配慮されていないHTMLのこと。

無意味な画像の多用

画像でなければ伝えられない情報に対してのみ、画像を用いること。
ページパフォーマンスや通信費などに影響するため、思い描いたデザイン通りにしようとした画像の乱用は避ける。
(大きな画像1枚より小さい画像の複数枚のほうがページ表示の時間がかかる。)

ページ全体をテーブルで囲む

テーブルは範囲全てがブラウザにダウンロードされないと描画されないため、ページ全体を囲むとしばらくの間ユーザーは空白を見つめることになる。 音声読み上げソフトで利用しているユーザーにとっては致命的。
描画された最初の部分を読みながら、後続をダウンロードできるのだから、ユーザーを置き去りにしないこと。

選択の自由を奪う

Webは好きなときに好きなページを読むことができる自由度の高さがあり、従来のメディアでは不可能だった新しい世界を生み出した。
ナビゲーションでユーザーの選択肢を狭めて進む手段を与えないようにしたり、リンクを新しいウィンドウで常に開く、画面サイズを固定する、最初に大きなアニメーションを魅せるなど、自由度を下げ利用者の自由を奪わないこと。
作者の考えた使い方を強制しないこと。

特定の環境に依存する

日々進化するHTMLの新機能は魅力的だが、その機能を持たないものを排除するべきではない。
だれもが利用できる状態を目指すこと。

ちゃらちゃら動く物が多い

画面上でアニメーションやGIFなどを多用しないこと。
本来の伝えたい情報、注目すべき内容を重視すること。利用者にとっては集中できないだけでなく、読解不能もありうる。
どうしても必要な場合でも、何らかの機能でオフにできるなど、利用者に自由度を与えること。