ホームページを作ろうと思うと必ず目にするHTMLという言葉。
Web制作初心者にはなじみがなく、とても難しそうな印象がありますね。
初めのうちは敷居が高く難しく感じるかもしれませんが、しっかりと勉強することで、HTMLの役割を理解することができます。
当サイトでは、Webページ作りに必須のHTMLタグについて紹介しています。
HTMLとは
HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。
ハイパーテキストとは複数の文書を相互に関連付けて、結び付ける仕組みのことです。
インターネット上には、文章だけでなく、画像や動画、音声などさまざまなコンテンツが存在します。
一つのコンテンツ（文章や画像を）を超えて、ほかのコンテンツへリンクできるように考えられたものがハイパーテキストです。
マークアップとは、これらのコンテンツにタグと呼ばれるマークで役割や意味を持たせる方法のことを言います。
HTMLとはインターネット上の様々なコンテンツを、マークアップして役割や意味を持たせて結びつけるための方法です。
Webページを作成するためにはHTMLを理解が大切です。
Webページの構成
Webページはタイトル、見出し、段落、表、画像などの要素から構成されています。
本や雑誌を読むとき、読者は文字の大きさや配置などその見た目から、そのコンテンツがどの要素（タイトル、見出しなど）なのかを判断しています。
しかし、パソコンにはただの文章や画像が、どの要素なのかを判断する能力がありません。
自分で作ったコンテンツを見出しや段落、画像などの要素としてパソコンに読み込ませるために、HTMLで役割や意味づけを持たせる必要があります。
HTMLの使い方
HTMLを使って、コンテンツに役割や意味づけをする方法を紹介します。
HTMLを使うには次のような概念を理解する必要があります。
タグ
コンテンツに役割や意味を持たせるマークのことです。
タグと呼ばれる＜＞＜/＞で示されたマークでコンテンツを囲むことで、コンテンツに意味づけをすることができます。
例えば、見出しの意味を表す<h2>タグを用いて、「HTMLとは」という見出しを作成する場合、
<h2>HTMLとは</h2>
と表現します。
また、本文（段落）の意味をあらわす<p>タグを用いて、「HTMLとは文書を相互に結び付ける仕組です」という本文を作成する場合は、
<p> HTMLとは文書を相互に結び付ける仕組です</p>
と表現します。
この時、コンテンツの前方にある< >を開始タグ、後方にある</ >を終了タグといいます。
開始タグと終了タグでコンテンツを囲むことで、コンテンツに意味づけを行うことができます。
要素
開始タグと終了タグまでのひとまとまりの意味づけされたコンテンツの塊を要素と言います。
さきほどの「<h2>HTMLとは</h2>」の「 」内のすべてのものが要素にあたります。
タグで意味づけされた要素を組み合わせることで、表現豊かなWebページを作成することができるようになります。
属性
要素の役割を決めるための付加的な情報のことを属性と言います。
例えば、先ほどの本文（段落）の要素に「文字が赤色」という情報を付加する場合は、つぎのように属性を付加したタグ付けをします。
下記の属性は、「スタイル」という、要素のスタイリングを指定する属性になります。
<p style=”color: red;”> HTMLとは文書を相互に結び付ける仕組です</p>
「style=”color: red;”」の属性をつけることで、文字が赤色の本文という要素を作成することができます。
HTMLの作成例
実際のHTMLの例を紹介します。
<title>HTMLとは</title>
<body>
<p>HTMLとは</p>
<h2>ハイパーテキストとは</2>
<p>ハイパーテキストとは</p>
<h3>マークアップとは</3>
<p>マークアップとは</p>
</body>
実際のWebページのHTMLはこのような形で記述されます。
<title>タグで、サイトやページ個々のタイトルを指定します。
<body>タグは、ページの中身を指定します。
文章や画像などのコンテンツはすべて、この<body>タグで囲まれるように記述していきます。
<h2><h3>タグは見出しといい、本文（段落）より文字が大きく、強調されて表現されます。
<ｐ>タグは、本文（段落）のことです。このタグの中に文章を記述していきます。
このように、HTMLでそれぞれのコンテンツの意味づけをタグで行い、作成していきます。
代表的なタグの種類
次にHTMLの代表的なタグをいくつか紹介します。
<h1></h1>~<h6></h6>
見出しを指定します。
<h1>から<h6>に数値が増えていくに従い、大見出し<h2>、中見出し<h3>、小見出し<h4>と見出しの強調度合が下がっていきます。
最近では、<h1>タグは、ページタイトルに使われることが増えてきました。
<p></p>
本文の段落を指定します。
属性を追加することで、文字の大きさや色、斜体や下線引きなどの装飾を加えることもできます。
<ul><li></li></ul>
箇条書き（リスク）を指定します。
箇条書きの要素を<ul></ul>タグで全体を囲み、箇条書きする文章を<li></li>タグで囲みます。
箇条書きが複数ある場合は、<li></li>タグを複数回使いそれぞれの項目を囲みます。
<a href></a>
リンクを指定します。
<a>タグでリンクにページをジャンプする役割を指定して、「href」という属性を付加することでリンク先を指定してジャンプすることができるようになります。
<br>
文章を改行します。
HTML内で記述した文章は改行が無視されるか、1文字分のスペースとして認識されるため、Webページ上の表現として改行したいときは<br>タグを用います。
<img src >
画像を表示します。
<img>タグで画像として指定して、「src」という属性で画像ファイルのURLを指定します。<img>タグ、</br>タグは開始タグのみで、終了タグを省略できます。
HTMLで実際に作成してみる
HTMLの使い方を理解したところで、実際にWebページを作成してみましょう。
Webページは「.html」ファイルを作ることで、GoogleChromeやSafariなどのインターネットブラウザで読み込むことができます。
「.html」ファイルはパソコンのメモ帳アプリで作成できます。
HTMLを記述したら、「.html」ファイルとして保存しましょう。
具体的なHTMLファイル
先ほど紹介した、タグを使って次のようにHTMLを書いてみましょう。
<h2>HTMLとは</h2>
<p>ハイパーテキスト<br>マークアップランゲージの略</p>
<h3>作成方法</h3>
<ul>
<li>タグ</li>
<li>要素</li>
<li>属性</li>
</ul>
<p style=”color: red;”> これらの道具でWebページを作る</p>
作成できたら、「.html」ファイルを保存して、ブラウザで読み込んでみましょう。
どうでしたか？うまくWebページは表示されましたか。
お気に入りのページをまねてみる
HTMLはどのWebページも簡単に確認することができます。
お気に入りのWebページがあれば、そのページ上でマウスの右クリックから「ページのソースを表示する」を選択して、そのページのHTMLを表示させることができます。
HTMLを見れば、文字の大きさやスタイル、タグの使い方など参考にできることがたくさんあると思います。
気に入った表現方法を自分のサイトに利用することもできます。
まとめ
HTMLについて紹介してきました。
HTMLはWebページ作成に必須の知識です。
実際に「.html」ファイルを作ってWebページを作ってみた人は、今回紹介したもの以外のタグも利用してWebページを作ってみてください。
HTMLを理解すれば、
・一部分のみ文字を強調して大きくする
・表を挿入する
・入力フォーム、ボタンを作成する
・画像をクリックしてほかのサイトにジャンプする
などの、色々な表現や機能も付け加えることができます。
HTMLは初めのうちは思ったようなページにならないかもしれませんが、失敗を繰り返して、やればやるほど上達します。
とにかく実践あるのみです。
お気に入りのWebページも参考にしながら、HTMLを駆使して自分だけのWebページを作ってみてはいかがでしょうか。