理解できる内容

• HTMLの概要
• HTMLの役割
• HTMLの書き方

HTMLの概要

「HTML」という名称は、プログラムに興味のある方であれば一度は耳にしたことがあると思います。ホームページを作るために必要なものであることは間違いないのですが、具体的なことはあまり詳しくないという方も多いでしょう。ですが、逆に考えれば具体的なことを知らなくとも書けることが利点です。

最近では、個人でブログなど運用することは珍しくもない時代ですが、その昔は情報ひとつ取っても、それを共有することがかなり大変な時代でした。「昔」と言っても石器時代や戦国時代の話ではなく、ほんの2、30年前の話です。もともとHTMLは、研究者の間で情報を共有する手段として開発されました。インターネットが普及していなかった時代に、論文などの膨大な情報を共有するためには、郵送したりFAXしたりとかなりの手間暇がかかり、かつ不特定多数の人たちに公開することができなかったのです。また、一度共有したとしても、それらを検索することができないという不便さもありました。

そのために開発されたHTMLは、Hyper Text Markup Languageの頭文字を取ったもので「Text」の文字が示すとおり「文書」を公開することを目的にしているのです。HTMLの書き方については後述しますが、その書き方が「文書作成」に類似していることに注目しながら読んでいただくと面白いかもしれません。

HTMLの役割

話を直近に戻します。文書を共有するのがHTMLの役割であることは現在においても変わることはありません。現在においては「文書」という枠が広がって「情報」という膨大なものに変わっていますが、その本質は変わっていないでしょう。]

さて、HTMLを使ってプログラミングをする際にもうひとつ理解をしていただきたいことがあります。それは、HTMLはあくまで「文書の枠組み」を「決める」ために使うということです。概念的な話であるため、なんとなく頭の片隅においていただくだけで構いません。要は、Webのページを作成するためにはHTMLだけでは完成しないという理解で良いと思います。

では、HTMLだけでは完成しないというのであれば、他にはどのようなものを使用するのでしょうか？

今回は用語だけ覚えていただければ良いですが、昨今ではWebページを作るために「CSS」や「JavaScript」を組み合わせて完成させることが主流となっています。「CSS」は「Cascading Style Sheets」の略で、一般的に「スタイルシート」と呼ばれています。「スタイル」という名称が示すとおり「見た目」を定義するために用いる言語です。最近のWebページは閲覧するユーザのニーズやデザインほ流行り廃りによってスムーズに変えていく必要があります。ひと昔前では、HTMLだけを使ってデザインまで設定していた時代もありました。前述のとおり、HTMLは本来は「文書の枠組み」を「決める」だけにすぎません。

もう少しわかりやすく例えてみると、手帳を使う際に、システム手帳を使うか、そうではない一体型の手帳を使うかという感じでしょうか。システム手帳を使えば、中身の予定表（リフィル）や、外のカバーなどを自由に変えることが可能ですが、一体型の場合はそれができません。仮に、あなたがシステム手帳の中身はそのままにして外見だけ変えたい場合は、カバーだけを購入して中身を移動させればOKですが、一体型の場合は中身を書き写すなどの手間のかかる作業が発生します。これが、HTML+CSSの組み合わせがシステム手帳で、HTMLだけの場合が一体型と考えると、どちらが柔軟なのかはイメージできるのではないでしょうか？

次に「JavaScript」ですが、これは「Webページに動きを付ける」ための言語です。HTMLは本来「何の動きもない画面」しか表示できません。つまり、文字や画像を表示して終わりなのです（昨今のHTMLやCSSは機能が向上して、若干の動きはつけられるのですが）。では、これに動きを付けるとどのような結果になるのかと言うと、いちばん分かりやすいのが「ポップアップ」と呼ばれる機能です。よく、Webページを操作していると「内容を送信しますか？」とか「ログアウトしますか？」など質問をする小画面が表示されることがあると思います。これは、JavaScriptで制御しています。他にも、画面の色を変えたり、ボタンを押せたり、押せなくしたりの制御など、条件に応じた処理を担当してくれます。

このように、HTML、CSS、JavaScriptはそれぞれの役割によって使用を分けるのが一般的になっています。簡単にまとめると以下のようになります。

• HTML：Webページの枠組みを決める
• CSS：Webページの見た目を決める
• JavaScript：Webページに動きを与える

次に、HTMLを使ったWebページの書き方について解説します。

HTMLの書き方

CSSやJavaScriptを使うことで見た目や動きのあるWebページが完成するのですが、そもそもの土台となるHTMLを理解していないと話になりません。今回は最後に、HTMLの構造を理解しつつ、書き方について理解していきましょう。

HTMLは「タグ」と呼ばれるパーツを組み合わせて文章の意味付けを行います。例えば以下のような記述です。

<>に囲まれたものが「タグ」です。ぱっと見すぐに分かりそうなのは「title」だけだと思いますが、その他にもいろいろな種類があることが確認できますね。これらはJavaScriptのように動きをもたせるものではなく、あくまでも「意味付け」に使用します。先ほどもお伝えしたとおり、これらは文書を作成するのと同じ意味を持っています。

今回の場合だとつぎのような意味付けを行っています。

• html：この文書が「HTML」で書かれていることを宣言している
• head：この文書に関する「前提」を宣言している
• title：この文書の「タイトル」を宣言している
• body：この文書の「本文」を宣言している
• h1：この文書の「見出し」を宣言している（見出し1）
• h2：この文書の「見出し」を宣言している（見出し2）※見出し1と2は大見出し、小見出しの関係
• p：この文書の「段落」を宣言している

以上の内容をみれば、これが「文書」を作成していることが何となくわかっていただけるのではないでしょうか？

今回はあくまでも、簡単にイメージがつく範囲で紹介していますが、実際のWebページではもっと複雑な宣言を組み合わせています。ですが、どんなに複雑になっていても基本は同じ考え方ですので、今回の記事の内容は覚えておくと良いでしょう。