目次
ウェブページを作成・表示するコンピュータ言語
HTML というのはウェブページのコンテンツをスマホやパソコンで表示できようにするために使われるコンピュータ用の言語です。ウェブページの表示には HTML の他にも、CSS、さらには JavaScript、PHP などのようなコンピュータ用の言語もよく使われます。
パソコンやスマホでウェブページを閲覧するために使っているソフトやアプリは、そのようなコンピュータ言語を解釈してコンテンツを表示します。
ここで、それぞれの言語がどんな役割を持っているのか少しだけ説明しておきましょう。
- HTML は文章をはじめとし、さまざまなコンテンツを表示するために使う言語です。印刷物を作るときの組版の役割を果たします。
- CSS はコンテンツのレイアウトやデザインを決めるための言語です。
- JavaScript は、ウェブページに動きをつけるなどの目的で使わます。この言語は普通、ウェブページを閲覧しているしている人が使っているコンピュータ上で動作しています。
例えば、ボタンをクリックすると音が鳴る、ポップアップが現れる、時刻を表示する、画像をスライドするなどの用途で使われます。 - PHP はサーバー側で動作しているプログラミング言語です。
例えば、メールフォームから送られてきたデータを処理し返信するために使われます。
これら以外の言語が使われることももちろんあります。特にサーバー側では PHP 以外の言語が使われていることが数多くあります。
ここでの説明でわかるように、本来、ウェブページを作成するときには HTML、CSS、JavaScript、PHP のようなコンピュータ用の言語を使ってコードを書く必要があるわけです。
で、HTMLとは
ウェブページに限らず、一般に文章には構造があります。ワープロソフト、例えば Word を使って文章をつくる場合でも、タイトルとか、大見出しとか、中見出し、小見出しのようなものを作ってそれぞれの見出しの下に段落を設けるということをよくしますよね。ウェブページでもそれと同じように、構造を持った文章をつくることが基本になります。そして、文章に構造をもたせるために、HTML という言語ではタグと呼ばれるものを使います。例えば、タイトルとなる文には h1 というタグ、段落となる文には p というタグをつけるようになっています。ウェブブラウザ（例えば Chrome とか Edge など）はタグをもとに文章の構造を解釈してディスプレイ上にウェブページを表示します。例えば次のように。
えっ、よくわからない？で、タグとは
そうですよね、文書にタグをつけるってところをまだちゃんと説明していませんね。
次は上で見た、「今年も桜まつりが開催されます！屋台やステージイベントも」という文書をウェブブラウザで表示するために使われるコードが書かれたファイルから、内容を一部抜き出したもので、HTMLという言語で書かれています。
<h1>今年も桜まつりが開催されます！屋台やステージイベントも </h1> <p>ここで見るように、ウェブページの文章も Word などのワープロソフトで作る文章と同様の階層構造があります。</p> <h2>見どころ紹介 </h2> <p>大見出し、中見出し、小見出し…に対応するものとして、上から順に H1 から H6 までの見出しがあります。</p> <h3>約2km に渡る桜並木 </h3> <p>段落はいずれかのレベルの見出しに属しています。これはレベル３の見出し（H3）に属している段落の文です。</p>
これを見ると、<h1>とか<h2>とか<h3>とか<p>という記号が付けられているのがわかりますね。この他にも、スラッシュ付きの、</h1>とか</h2>とか</h3>とか</p>という記号もありますね。こういうのを「タグ」と呼んでいます。そして、タイトル（大見出とかレベル1の見出しとでも呼べるもの）にしたい文は<h1>と</h1>ではさみます。同様に、レベル2の見出しとして使いたい文を<h2>と</h2>ではさみ、レベル3の見出しとして使いたい文を<h3>と</h3>ではさみ…というようにします。また、本文、つまり段落として使いたいところは<p>と</p>ではさみます。
ちなみに <h1>とか<h2>などの h は heading、<p>の p は paragraph から来ています。また、スラッシュのないタグを開始タグ、スラッシュのついたタグを終了タグといいます。
このようなファイルはパソコンで簡単に作ることができます。Windows を使っている人なら例えばメモ帳というアプリ、Mac を使っている人なら例えばテキストエディットというアプリを開いて、どんな内容でも良いから何かタグのついた文章を作ってみてください。（どんな内容にすればよいか考えるのが面倒なら、上のコードをコピーアンドペーストしてみてください。）つまり、とにかく何かしらのテキストエディタを使ってタグ付きの文章を書いてみてください。そしてファイルの名前を自分の好きなものにし、さらに拡張子として.htmlをつけてあなたの好きなフォルダの中に保存してみてください。そうしておくと、そのファイルを Chrome とか Edge などのウェブブラウザで開けば、ちゃんと見出しなどの構造を持った文書が表示されるはずです。
つまり、普段、何気なく見ているウェブページは、このようなファイルで作られていて、ウェブページにアクセスするたびにウェブサイトはこのようなファイルにかかれているデータをあなたのパソコンやスマホへ送ってくるわけです。そしてそのデータをウェブブラウザが解釈して画面に表示します。（実を言うと、ウェブページを表示するためのこのようなファイルは存在していなくても、ページを表示するためのタグ付きデータ自体がパソコンやスマホに送られてくればウェブページはブラウザで表示されます。）
HTMLという言語では、<h1>とか<h2>や<p>の他にも、とても多くの種類のタグが用意されています。例えば、リンクを貼るために使わてるのが <a>というタグです。また、付番なしの箇条書きを作るために使われるのが<ul>タグと<li>タグです。さらに、画像を文書中に表示するために使われるのが<img>タグなど、まだまだたくさんあります。例えば、今見ているこのウェブページがどんなふうにできているか見てみたければ、これから説明するとおりにしてみてください。別のタブが開き、思いっきりたくさんタグのついた、このページの正体が見られるはずです。（スマホではこの方法では無理です。）
- このページのなにもないところで右クリック
- 現れたメニューから「ページのソースを表示」などと書いてあるところを左クリック
HTMLの一番の特徴
HTML が登場する前にもタグをつける方法を用いた言語は存在していました。それらと比べた場合の HTML の一番の特徴は、あるウェブページから、たとえ遠く離れている別のウェブページでも参照できる機能を持っていることで、この機能はハイパーテキストと呼ばれています。難しい言い方をしましたが、もう、おなじみの、リンクを貼れるという機能のことです。
じゃあ、HTML ファイルとは？
実を言うと、タグを付けて構造を表す言語は HTML 以外にもあり、いろいろな目的で使われます。それらの言語のうち、特にウェブページの表示のために使われるものが HTML とばれる言語です。HTML ではタグの意味づけは世界で統一されていて、規格が定められています。そして、HTML で定められているタグを用いて書かれたファイルを HTML ファイルといいます。また、ファイルの拡張子には .html をつかう習慣になっています。
それでは、ウェブページを作るには？
これまで見てきたように、スマホやパソコンのユーザーがウェブページへアクセスすると、ウェブサイトは閲覧者のスマホやパソコンに HTML という言語で書かれたタグ付き文書のデータを送ってくるわけで、それがウェブページの正体なのでしたね。ですから、ウェブページを作るには、本来なら、テキストエディタを使って、HTML ファイルを作る必要があるのです。本来なら…
