WEBページの裏側、ソースコードとHTMLの簡単な説明

普段見ているホームページは、どうやって表示されているかご存知でしょうか？
WEBページはHTMLと言われるソースコードで書かれていて、例えば文章などを「タグ」といったもので囲い、ブラウザへ表示させます。

そもそもHTMLとは？

HTMLとは、HyperTextMarkupLanguage(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、ウェブページを作成するのに開発されたマークアップ言語と呼ばれているものになります。
HTMLは主にタグと呼ばれるもので文章を囲ってブラウザへ表示させたり、タグの持つ意味合いで、文章に見出しや段落をつけたり、一つの文章の塊を作ったりする事ができ、このタグや文章の集合体が、主にソースコードと呼ばれています。

この「ハイパーテキスト」と、「マークアップ」の特性を持った言語、それがHTMLという事になります。

HTMLに使われる代表的なタグをご紹介します

ここまで簡単に出来るだけ分かりやすくHTMLのご紹介をしてきましたが、ここでそのHTMLに使われているタグの代表的なものをいくつかが紹介いたします。

見出しタグ　h1～h6

見出しタグとは文章に見出しの意味を持たせるタグになります。
h1タグがWEBページの中で一番大きな見出しとり、数字が大きくなるにつれて、見出しの順番が下がっていきます。
h1より小さい見出しはh2。h2より小さい見出しはh3という順番になっていきます。

このタグを使う時は、以下のように使用します。

<h1>ここに、文章を入力します。</h1>
<!-- 文章の先頭には<h1>というタグを書きます。 -->
<!-- 文章の終わりには、</h1>とか気ます。 -->

段落タグ

本文を書く時は、主にこのPというタグで文章を囲います。
使い方は先程説明した見出しタグと同じです。

イメージタグ

こちらは、画像を表示するという意味を持つタグになります。
今までのタグと少し違うのは、このタグには属性というものを付けて、画像を参照する「パス」というものを書いて画像を表示させます。

このタグを使う時は、以下のように使用します。

<img src="images/image.jpg" alt="画像ファイル">
<!-- このタグは、見出しや段落タグのように囲って使用はしません。 -->
<!-- src属性に画像の置いてあるファイルの場所(階層)を書きます。 -->

リンクタグ

先程説明させてもらいました、他のページへ関連付けをするタグになります。
このタグは、画像ファイルの時と同じように属性を書いて関連付けするファイルの場所を書くのですが、画像タグはsrc属性なのに対してリンクタグはhref属性を使い、ファイルの場所を書きます。

<a href="page/menu.html">メニューページはこちら</a>
<!-- こちらは、文字をタグで囲い、使用します。 -->
<!-- 画像タグやその他のタグを囲う事もできます。 -->

その他にもまだまだ色々なタグがあり、HTMLにもバージョンがあり、そのバージョンごとに使用できるタグは少し違ったりもします。
次回以降では、もう少し掘り下げてHTMLやタグについてご紹介していければと思います。

関連記事：【HTML】ファイルをダウンロードさせるリンクの設置方法

まとめ

ソースコードとHTMLの簡単なご説明をいたしましたが、いかがだったでしょうか？

普段見ているWEBサイトの裏側ではブラウザがソースコードを読み取り、人が見ても読めるように表示をさせています。

この他にも色々なタグがあり、それぞれに意味合いがありますので、HTMLをコーディングする際は、その意味合いを考慮しつつコーディングを行うと人にもロボットにも読みやすいWEBページとなりますので、ご興味のある方は是非この辺りを意識してると良いでしょう。