私たちが日頃何気なく見ているWebサイトはほぼすべて、「HTML」から成り立っています。「HTML」はすべてのWebサイトの基礎といえる言語です。言語といっても人と人とが話をする言語と違って、コンピューターに対して情報を伝えるための言語です。本稿では「HTML」とはなにか、わかりやすく解説していきます。
Webページの裏側
今あなたが閲覧しているこのページも、HTMLで作られています。見ているページの画面上で右クリックを押し、「ページのソースを表示」を押してみましょう。すると、以下のような英文？何かのコマンド？のような文字列が表示されるかと思います。
これらの文字列はソースコードと呼び、これによって画像を挿入する位置を指定できたり、リンク先を設定したりとWebページ内の表示や動作を命令することができます。このように、普段見ているWebページの裏側では、HTTPというプロトコルで情報がやり取りされ、HTMLタグを使って文書が構成されていて、ブラウザに読み込まれることでWebページが表示されるのです。ソースコードは、あらゆるWebページで見ることができます。
HTTPとは？HTTPSについても解説
私たちが普段、Webブラウザを使ってWebサイトにアクセスする時、「HTTP」という通信プロトコルが利用されています。Webブラウザのアドレスバーに「http://www.〇〇〇.co.jp」などと入力した場合の、「http:」の部分のことです。本稿では「HTTP」とはなにか、分かりやすく解説していきます。
HTMLと主なタグの種類
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。そして、HTMLには様々なタグの種類があります。HTMLタグとは<title> や <body>などの、< >で囲まれた記号となる文字のことです。タグにはそれぞれ意味があり、文章構造を明確にする役割を果たしています。例として<b>というタグを使ってみましょう。
<b>は太字を指示するタグです。<b>と</b>の間の文字がブラウザを通すと太字で表示されます。このようにタグを閉じるときには/(スラッシュ)を用いて、この部分にこの指示を出す、ということを明確にしていきます。
他にも様々なタグがありますが、ここでは一例をご紹介します。
<hr>や<img>のように単体で使うタグもあります。
HTMLはテキストエディタと呼ばれる文書が書けるソフトと、ブラウザがあれば作成することができます。基本のルールを理解していれば、それぞれのタグを調べつつHTML文書を作成することができますので、コンピュータさえあれば簡単にWebページ制作は体験できるのです。
HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがあります。最新のHTMLバージョンは「HTML5」で使えるタグが豊富になり書き方もシンプルになっています。
headとbody
HTMLを構成する際、中身は大きく<head>と<body>の２つの要素にわけることができます。<head>はファイル自体のヘッダ情報を示す部分であり、ブラウザ上では直接見えないタグを入力します。ですがその中で、１つだけ実際に見える部分のタグがあります。それは<title>タグで、ブラウザ上部のタブ部分に表示されるページタイトルを表します。
<body>はブラウザ上で実際に見える部分で、コンテンツはすべて<body>の中に記述します。<body>で使用する主なタグとして、<h1>の見出しタグ、<p>の段落などがあります。見出しタグは<h1～6>と表記し、数字が大きくなるほど見出し文字は小さくなっていきます。では、簡単に１ページのHTMLタグを入力してみます。
まず１行目に<!DOCTYOE html>とありますが、これはドキュメントタイプ宣言と呼ばれ、正確にはHTMLタグではありません。これはこの文書がHTMLで記述されたものであることを示すもので、<html>タグの前に必ず必要になります。
２行目の<html>タグは、ここからHTML文書がスタートしますという宣言の役割になります。「html」の後に「 lang=”ja”」という属性が書かれていますが、これは言語を表記するもので、language=japaneseということになり、コンピューターに日本語が使われたページであることを認識させるために入力します。
次に、<head>と<body>それぞれのタグを見ていただくとわかるように、HTMLタグは入れ子のように入力して、文書を構成させていきます。この場合、<head>タグの中には<meta>と<title>、<body>タグの中には<h1><p>がそれぞれ配置されています。
<meta>は文字コードを指定するためのタグでこれが入力されていないと、Webページが文字化けしてしまい検索エンジンに適切に収集されないことがあります。そのような事態を避けるためにもここで文字コードを指定することを忘れないようにしておきましょう。それでは、このHTML文書を実際にブラウザで読み込ませてみます。
このように適切なタグを使用することによって、見出しや本文をブラウザが認識してくれます。正しい言語を使用していないサイトやブログなどは、Googleによって検索順位が下がってしまうことにも繋がりますので、注意が必要です。
装飾にはCSS
コンピューターにわかりやすく伝えるために使用するのがHTMLですが、人が見やすいページを作成するためには、さらに色付けなどの装飾が必要になります。HTMLでも背景色やフォントの指定はできますが、CSS（カスケ―ディングスタイルシート）を使用するとより分かりやすい文書のままに、装飾を施すことができます。
HTMLでホームページを作成したりブログをカスタムしたいというかたは、CSSも合わせて覚えておくと良いでしょう。
まとめ
本稿では、日頃から当たり前のように利用しているウェブを理解するために、HTMLについて分かりやすく解説しました。どのようにデータがやり取りされるのか、安全性などを考えた場合に何が必要なのかといったことをまとめた記事もありますので、参考にしてください。
関連記事：HTTP（HyperText Transfer Protocol）とは
WAFとは
Webアプリケーションファイアウォール（WAF：Web Application Firewall）は、ウェブサイトに対するアプリケーションレイヤの攻撃対策に特化したセキュリティ対策です。
