素朴な疑問

HTML を使用してウェブサイト制作ができるようになりましたが、人にHTMLって何？

と聞かれても何と答えていいのかわかりません。

この記事では、一度HTMLというものについて基礎的なところから解説していきたいと思います。

HTMLとは？？

HTMLとは『HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）』の略称です。『ハイパーテキスト』とは、複数のテキストを相互に関連付け、結びつける仕組みのこと。加えて、『マークアップランゲージ』とは、コンピュータによって処理される人工言語の種類の一つで、データ中に特定の記法を用いて何らかの情報を埋め込むためのもの。とされています。

つまり、HTMLとは、特定の記法を用いてそれらを相互に関連付け、結びつけることである種の情報を埋め込むことができるコンピュータ言語ということになります。

HTMLを決まったルールに従って書けば、情報を埋め込むことができるんですね。

ここで、決まったルールと出てきましたが、HTMLの記法とは実際どのようなものなのか確認していきます。

特定の記法①要素

まず、HTMLには要素というものがあります。

下記の例は、『HTML』というテキストをウェブ上に表示する記述です。ここで、<>で囲われた『h1』という表記がありますが、この『<h1></h1>』が要素となります。<h1>を開始タグ、</h1>を終了タグといい、これはコンピュータにこのタグで囲われた記述は、見出し（heading）であるということを読み込まれる記述になります。（h1はheadingのhですね。）

そのため、見出しの要素として読み込まれた『HTML』というテキストは、見出しになるので太字かつ少し大きめのフォントサイズで表示されるようになります。

このように、要素を表す開始タグと終了タグで囲うことで、その中に記述された文書がどういった種類の情報を持つのかということを指定することができます。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

特定の記法②属性

次に、HTMLには属性と呼ばれるものがあります。

下記の例は、先ほどの例のh1要素に『zokusei』というクラス属性を指定しています。

この記述をすることで、このｈ1要素は『zokusei』というクラスに分類することができます。

それでは、この分類わけで何をすることができるのかというと、cssで『zokusei』クラスに分類される要素には赤い文字を適用する(color:red;)ことができるようになります。

本記事ではcssの説明は割愛しますが、簡単に言うとHTMLの要素を装飾するようなものです。

HTMLでは要素をクラス属性で分類することで、各要素に特定の効果を適用することができるようになります。

また、ここではclassという属性を記述していますが、他にも『id属性』『title属性』など様々な属性があり、それぞが要素にある種の設定のようなものを指定することができる。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

まとめ

HTMLは、『要素』『属性』といった特定の記述方法で、コンピュータに情報を読み込ませて表示することができる言語というような感じでしょう。

初学者の方でも、この要素と属性を意識してコードを見てみると、ただの文字の羅列だったものが、一定の構造で組み立てられていることがなんとなくわかると思います。

ちなみにHTMLを考案したのはティム・バーナーズ＝リーという方だそうです。

HTMLの属性、要素の種類や今回割愛したcssについても、今後解説していきたいと思います。

ありがとうございました。

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。