HTMLとは

今回は機会があったので、僕が他人にhtmlについて説明する時の内容を書いてみようかと思います。

htmlは文書

スイスの研究機関で誕生したそうです。
大量の論文やら資料やらを効率的に探すのはしんどいし、
人の入れ替わりもあって各々の状況確認もしんどいしで、発明されました。

文書にはURLという住所(アドレス)を充てておいて、
サーバーに文書を貯めてブラウザでブラウズすれば、あら便利！
URLを利用すれば文書内にリンクも貼れるから遷移も楽になりました。

html ( HyperText Markup Language )

文書を記述する言語です。

テキストとは文書の事。
ハイパーテキストとはリンクを貼れる文書の事。
マークアップとは意味を与える書き込みの事。教科書に線を引く感じ。
ランゲージは言語ですね。

つまり、リンクを貼れる文書内に意味付けする言語です。

論文のような文書を例にしましょう。

マークアップされてない論文はこんな感じ。

 

すんげー見づらい。

マークアップするとこうなります。

どこが見出しと本文で、何が重要なのか読みやすくなりましたね。

人間だと見れば分かるんですが、これをコンピューターは理解できません。

ここまま閲覧するとこのような表示になります。

これでは酷いのでどこをマークアップしてるのか指示してあげましょう。
この指示に用いるのがタグです。

コンピューターの為にHTMLを書き加えました。
人間の目で見ると少し読みにくいえですが、
おかげでコンピューターも理解できるようになりました。

人間が紙を介して文書を閲覧するように、
コンピューターに貯まってる文書はブラウザで閲覧します。

ブラウザで閲覧する事をブラウズとかブラウジングとか言います。

ブラウザはURLの指定先から文書を取り出すのが役目です。
取り出した文書はレンダリングエンジンという仕組みを介してブラウザに表示します。

レンダリングエンジンには種類があって、同じ文書でも表示が違う事があります。
各々開発元が、文書の理想の見た目を追い求めた結果、個人差が出ちゃったんです。

一方は、デフォルトフォントはゴシックが良いと思ってても、
もう一方は、メイリオが読みやすいと思ったり。

一方は、リストの印は黒丸が良いと思ってても
もう一方は、灰色の立体的な丸が良いと思ったり、

そのせいでレンダリングエンジンやブラウザによって表示が異なります。
皆それぞれの思う一番見やすい表示でレンダリングしてブラウズさせてくれてるんですよ。

その後、html言語自体にも改良が重ねられ、最近はhtml5という言語もあります。
動画とかメジャーになって来ましたよね。紙の文書では表現できない音や映像や対話型処理が便利になりました。

css ( Cascading Style Sheets )

閲覧環境によって表示が違うのは困る事もありますよね。
そこでcssが便利です。

カスケーディングとは階段状に連鎖的に伝わるような感じ。
スタイルとは見た目の事。
シーツはcssファイルの事だと思ってください。

どのタグに見た目の設定を加えるかは
ルールやプロパティなどを使って設定します。

ルールの優先順位の決定基準など細かい話はあるのですが、
今回はhtmlの話なので説明を割愛しますね。

これで多くのブラウザで意図通りの閲覧が出来るようになりました。
それでもブラウザやレンダリングのバージョンの対応してない/対応が遅れてる事があって
必ずしも全ての閲覧環境で意図通りの閲覧が出来るという訳ではないんです。

奥が深い話ですね～

おわり。