2日目 HTMLを学ぼう!
「今日はHTMLについて勉強だね。前回インストールしたエディタを開いておいて」
「HTMLならすこし分かるよ~。小説投稿サイトで覚えた」
「へぇ、どんなの知ってるの?」
「こんなの」
<marquee>ようこそ!</marquee>
<blink><font size="4" color="red">注意!</font></blink>
<font color="red">キリ番踏み逃げ厳禁</font>
立ち上げたエディタに覚えているHTMLを打ち込んでいく。途中まで打つと自動で候補が現れる。入力補完の便利さに感動していると、スズメが固まっているのに気付いた。たしかあっていたはずだが、何か間違ってたのかな?
「……あぁ。うん、大体わかった。じゃぁ勉強はじめよっか」
フリーズから回復したらしいスズメはため息をついた。なんだろダメだったのかな?
* * *
※https://www.w3.org/
「HTML(HyperText Markup Language)はWebページを作るために必要な言語。1989年、CERNの職員が提案し1990年にコード化されたよ。実はスイス生まれのエリートなのさ。
HTMLが作られた目的は、情報を整理するため。多くの情報の中から必要な情報をコンピューターが解析できるようにしたかったから。解析しやすくするために文書構造を明確にするために作られたよ。
作られてから改良が重ねられているので、時代ととも使える機能も変化していっている。バージョンの推移はこんな感じ。
1993年 HTML 1.0 一番初期のHTML。
1995年 HTML 2.0
1997年 HTML 3.0
1997年 HTML 4.0 ケータイ小説ブームやレンタルスペースでHTMLを書いていた人にとって一番なじみがあるバージョン。そのころにHTMLを覚えた人にとってはこれがHTML。
2014年 HTML 5 現在のHTMLの主流。
HTML 4 まではまだまだインターネットも黎明期で言語としての方向性が完全に定まっていなくて、ブラウザ間での仕様の違いもあってなかなかにカオスな状況だったね。すぐに変わる仕様に振り回された人も多かったんだ。
HTML 5ではブラウザ間の差異も少なくなって安定してきたね。役割や使い方に関しても大体定まった。特にHTML4 とHTML5で一番大きく変わったのは役割かな。
最初のコンセプトだった『文書構造を定義するための言語』に徹していった。
もともとHTMLは文書構造を整理するために作られたんだけど、HTML4では多くの装飾用のタグが作られたりしてやりたい放題だった。HTML5になって、ようやく原点に戻ってきたんだ。
HTML5になってそれまで使っていたタグが非推奨になったんだけど、昔に学んだ人はまだ使っている人も多いね。文書構造を表すのではなく装飾を目的としたタグは大体非推奨となっています。
例えば非推奨タグはこんな感じ。
<big>大きめの文字
<blink>文字の点滅
<center>センタリング
<font>フォントのサイズ・色・種類
<marquee>文字のスクロール
これらは文書構造じゃなくて、装飾を意味しているのでなるべく使わないようするようになってる。使えないわけではないけど、使っているとあまりいい印象は持たれないね。
それに、サポートされないからいつ使えなくなってもおかしくない。Webアプリケーションを作るなら推奨されているものだけを使って作るのが無難だね」
「へー、HTMLってそうだったんだ。装飾のために使うものだと思ってた」
「ユーザーから見たらそうかもね。でも開発者としてはできる限り文書構造を表すものとして割り切らないと後で大変。そのあたりはおいおいで。さて、歴史と役割はこれくらいしにて実際に使ってみようか」
* * *
「使ったことがあるんだから初歩的なことは簡単に説明するけど
HTMLを使う大原則は、<></>で挟むこと。<XXXXX>構造</XXXX>が基本。XXXXXはタグ名。
これらは『タグ』と呼ばれる。
といった感じ。pは段落を表すタグ。こんな風に文書内の構造を整理するのがHTMLの役割だね。開始タグから終了タグに囲まれる部分をコンテンツ、それ全体を要素という。終了タグには/が入る。
ただ、終了タグが必要のないタグもある。コンテンツが不要なものが当てはまる。例えば画像タグなんかはそれ自体が内容なので終了タグが必要ない。
<img src=""> もしくは、<img src="" />
/はどちらでもいいよ。(XHTMLでは必須ですが、ここでは使わないのでどっちでもいいです。
要素の中に他の要素を入れることも出来る。
例えば、<p>私の小説に<strong>レビュー</strong>が書かれました!</p>
ただ、どんな要素でも中に入れられるかというとそうではないよ。文書構造的におかしいものは中に入れられない。文法違反となり、ブラウザ側で適切なように処理される。
例えば<p>段落の中に<h1>見出し</h1>があるっておかしくない?</p>
段落の中に見出しがあるのは不自然。法違反だね。
あとは属性。
<a href="">リンク</a>
開始タグの中に、付加情報を書くこともできる。この場合はリンクタグにリンク先の付加情報として、href属性を追加している。使える属性はタグによって違うよ。
まぁ、こんな風にタグを使って表示したいページを文書構造で表すのがHTMLの役割。装飾やレイアウトはあとで説明するCSSの役割になるよ」
「へぇ、なんとなく使ってたけどそんな意味があったんだ」
「あとは、主要なタグの説明と、それらを使った練習をやって今日はおしまいにしようか。
HTMLタグには使う場所によっていくつか種類がある。それぞれ使う場所が大体決まってるのできちんと覚えようね
■構造用の基本タグ:構造を表す中で最も基本的なタグ。
html:HTMLの文書であることを示すタグ。
head:ヘッダー部分を表すタグ。この部分はブラウザに表示されなくて、検索や所設定のためのもの。
meta:ページの情報を記述するタグ。
title:ページのタイトルを記述するタグ。
link:参照する外部ファイルを読み込むための物。CSSを読み込むためによく使う。
body:ブラウザで表示するコンテンツ部分を表すタグ。ユーザーに表示する部分はこの中に記述する。
■グループ分けのタグ:bodyの中のコンテンツをさらに用途に分けてグループ分けするためのタグ。
header:ページ上部にあるヘッダー部分を表すタグ。ロゴやサイト名のために使う。
nav:ナビゲーション部分を表すタグ。メニューのために使う。
article:ページ内の記事部分を表すタグ。それだけで独立した内容になる要素。
section:一つのテーマを表すタグ。独立していなくてもよい。
main:ページのメイン部分を表すタグ。
aside:補足情報を表すタグ。特になくてもページに支障がない部分に使う。
footer:ページ下部にあるフッター部分を表すタグ。コピーライトに使う。
div:特に意味を持たないブロック。上記以外の意味を持った部分を作るために使う。汎用ブロック。
■表のためのタグ:表を作成することができる。
table:表を表すタグ。
tr:表の一行を表すタグ。
th:表の1つの見出しセルを表すタグ。
td:表の1つのセルを表すタグ。
■リストを表すタグ:リストを作成することができる。
ul:順序なしリストを表すタグ。
ol:順序ありリストを表すタグ。
li:リストの各項目を表すタグ。
■フォームのためのタグ:ユーザーに情報を入力してもらいたいときに使うタグ。
form:フォームを表すタグ。
input:入力欄を表すタグ。type属性で入力値を制限できる。
select:セレクトボックスを表すタグ。
option:セレクトボックスの選択項目を表すタグ。
textarea:複数行のテキスト入力欄を表す。
label:フォームのパーツのラベルを表すタグ。
■コンテンツ内容:
h1~h6:見出しを表すタグ。6まであるけど、使っても1~3くらい。
p:段落を表すタグ。
span:意味を持たないインライン要素、一部の装飾のためによく使うタグ。
a:リンクを表すタグ。
img:画像を表すタグ。
■その他:
br:改行を表すタグ。
よく使うのはこんなところかな」
「はぁ、いっぱいあるんだね……。これ全部覚えるの?」
「これでもよく使うものだけ厳選したんだけどね。まぁ使うときに覚えればいいし、テンプレートを用意すればそんなに使うこともないからどんなものがあるかくらいでいいよ」
「はーい」
この後、いくつか基本的なタグの勉強と配置の仕方を勉強した。すこしHTMLのことが分かった気がした。んー、それにしても入力補完機能って便利だな。
このエッセイでは、具体的な部分までは立ち入りません。全体を説明し終わったら今回のように勉強内容は省略します。詳細な内容は勉強してね。
具体的に書くと数万文字は楽に消費できちゃうのと、このエッセイは流れだけ説明するための物なので。HTMLの教科書ではないのです。
一番効率がいいのは作りながら覚えることですね。インプットしながらアウトプットするのが効果的です。ぜひ手を動かしましょう。