HTMLとは?初心者向けプログラミング入門、ウェブカツ体験記

HTMLとは? HTML&CSS入門編

Webプログラミングの学習をスタートさせた初心者が、必ず学ばなければならない「HTML」。まずは、この謎の言葉「HTML」とはいったい何なのか?という疑問に対する答えをイメージできるようにしよう。

なお、記事の最後に内容の「まとめ」を設けてある。そこで知識を整理してほしい。

ウェブカツ動画:Lesson 01「HTMLとは?」を視聴

この記事は、私がプログラミング学習スクール「ウェブカツ!!」の動画を視聴した後、その復習と自習を兼ねて記述している。(ウェブカツでは、ブログやツイッターを書くことを推奨している)

だからといって、動画の内容を文章にしているのではないことに注意してほしい。(そんなことをしたら、著作権の問題が生じてしまう!)

この記事の内容は私のオリジナルだ。動画の内容と全然違う!と言われても困る。また、この記事が持っている情報の誤りは、全て私が訂正すべきものであり、ウェブカツとは関係ないことを注意しておく。

さて、本題に入ろう。

ウェブカツの動画:Lesson 01「HTMLとは?」では、1分21秒の動画で「HTML」とは何かについて説明しているが、内容はかなりあっさりしたものだ。動画で教える内容を、本当に必要と思われる最小限の事柄だけに絞ったのだろう。

この記事では、動画で学習した内容を補足するため、ウェブカツの動画では触れていない事柄を中心に書いていく。

なお、ウェブカツでは「HTML・CSS部 入門」の動画を、Lesson 01 から Lesson 15 まで無料で公開している。興味があるなら視聴してみるとよいだろう。

>>「ウェブカツ!!」トップページ

HTMLはコンピュータのための言語のひとつ

HTMLの正式名称は「HyperText Markup Language」。「HTML」はその略称だ。

Language(言語)というと、日本語や英語などを思い浮かべることだろう。しかし、これらの言語とは大きな違いがある。

日本語や英語は、人間同士がお互いにコミュニケーションを行うために使用する。例えば、あなたが日本語で文書を記述した場合、その文書を読み理解する相手はやはり人間だろう。

日本語の文書を理解できるのは人間だけ

しかしHTMLの場合、あなたがHTMLで記述した文書(ソースコードとかコードと呼ぶ)を読み込み理解するのはコンピュータだ。

HTMLで記述した文書を読み込み理解するのはコンピュータ

読み手がコンピュータである言葉を「言語」と呼ぶことに、最初は違和感を感じるかもしれない。しかしすぐに慣れるだろう。 私たちは今後、いくつものコンピュータが相手となる言語を学習し、悪戦苦闘することになる。HTML、CSS、JavaScript、PHP、...

その時期を乗り越えた後は、違和感を感じていたことすら忘れてしまうかもしれない。

HTMLはウェブページを記述するための言語

HTMLがコンピュータを相手とする言語であることを既に述べた。しかし、コンピュータを相手に何でも記述できるわけではない。 HTMLで記述できるのは、ウェブページ(Web page)の内容だけだ。

ウェブページとは何か?

あなたが今読んでいるこのページが、まさにウェブページだ。あなたはきっとパソコンで「Google Chrome」「Microsoft Edge」「Internet Explorer」などのウェブブラウザを利用していることだろう。あるいはスマートフォンで「Safari」「Google Chrome」などのウェブブラウザを使用して読んでくれているのかもしれない。

各種ウェブブラウザ

これらウェブブラウザ(web browser)を使用して閲覧することができる文書の各ページのことを、ウェブページと呼んでいる。

そしてこのウェブページを記述するための言語こそがHTMLなのだ。

HTMLはウェブブラウザ専用の文書を作成する言語である、と言ってもいいだろう。

ブロガーはHTMLの達人?

HTMLはウェブページを記述するための言語であることを説明した。しかし、ブログを書いたことがある人などは、次のような疑問を持つかもしれない。

「ブログの記事だって読者にとってはウェブページの一つだ。でも、自分は記事を作成するためにHTMLを記述したことなんか一度もないぞ? 世の中のブロガーはウェブページを記述するためにHTMLを使用しているのだろうか?」

下の画像を見てほしい。これは、この記事を作成している私のパソコン画面のスクリーンショットだ。記事の作成は基本的に日本語の文章を入力する作業だ...HTMLなんて使ってないぞ?

記事の作成は日本語の文章を入力する作業だ

何だか、あなたをひどく混乱させることを述べていると思う。説明させてほしい。

あなたの見ているページがHTMLで記述されているのは間違いない

私は日本語のみで記事を作成しているが、あなたはHTMLで記述された記事を読んでいる

私はこの記事を日本語だけを使って書いている。記事を書くことだけに集中していて、HTMLのことなんか全く意識していない。それは世の中のブロガーだって同じことだ。

この様なことが可能なのは、ブロガーがブログ作成用のソフトウェアや、企業が提供するブログサービスを使用しているからだ。

私の場合は、「WordPress」という有名なソフトウェアを使用してこのブログを作成している。WordPressは、ブログなどのウェブサイトを簡単に作成できる便利なソフトウェアだ。HTMLの知識が無くても問題なく使用できる。

WordPressのロゴ

繰り返すが、私が「WordPressを使用して、日本語だけで記事を作成している」ということ、これは事実だ。

その一方で、私が書いた記事をあなたはウェブブラウザを使用して読んでいる。こちらの事実は、あなたが読んでいる記事、つまりこのウェブページが「HTMLで記述されている」ということを示している。

HTMLで記述されていることをデベロッパーツールで証明する

下の画像を見てほしい。

パソコンのウェブブラウザでデベロッパーツールを使用してHTMLを表示させる

この画像は私のパソコン画面のスクリーンショットだ。ウェブブラウザ(Google Chrome)を使用して、このブログの記事の一つを開いている。

画像の上半分には記事が表示されている。一方、下半分には怪しげな暗号の様なものが並んでいる。一番上の行をよく見てほしい。

一番上の行を拡大
<!doctype html>

と表示されていることが確認できる。つまり、この下半分の怪しげなものこそ、HTMLだ!

ウェブブラウザの下半分に表示されているウィンドウは、「デベロッパーツール」とか「開発者ツール」などと呼ばれるもので、ウェブブラウザに搭載されている機能の一つだ。

デベロッパーツールを使用すれば、ウェブブラウザで開いているページのHTMLを見ることができる。

したがって、ウェブブラウザに表示された私の記事には、HTMLで記述されたコードが存在していることになる。

デベロッパーツールを表示させる方法

せっかくの機会なので、パソコンのウェブブラウザでデベロッパーツールを表示させる方法を知っておこう。次の手順を実行してほしい。

デベロッパーツールを表示させる手順
  1. ウェブブラウザのウィンドウをアクティブにする。つまりマウスポインタをウェブブラウザのウィンドウ上に持ってきてクリックし、ウェブブラウザのウィンドウが一番前面に表示されるようにする。
  2. Windowsの場合は、F12キーを押す。Macの場合は、CommandOptionIキーを押す。

どうだろう? ブラウザー搭載のデベロッパーツールを表示できただろうか?

もし表示できなかったのなら、インターネットで「デベロッパーツール」や「開発者ツール」をキーワードにして検索してほしい。きっとあなたのパソコンに合った表示方法の答えが見つかるだろう。

このデベロッパーツールは、HTMLでウェブページの作成を実際に行うステップまで進めば、頻繁に使用することになる。詳細を知るのはそのときでいいだろう。

今知っておいてほしいことは、デベロッパーツールを使用すれば、あなたがウェブブラウザで開いているページのHTMLを見ることができるということだ。

ブログソフトやブログサービスは、記事からHTMLを生成する仕組みを持っている

さて、繰り返すことになるが、ここまでの話の要点は次の通りだ。

  • 私はWordPressを使用して、日本語だけで記事を作成している。
  • あなたはウェブブラウザを使用して、HTMLで記述された記事(ウェブページ)を読んでいる。

このことは、日本語入力作業により作成した記事からHTMLを生成する仕組みを、WordPressが持っていることを示唆している。

WordPressは記事からHTMLを生成する仕組みを持っている

どんなソフトやサービスを使用してウェブページを作成しても、その背後では、HTMLで記述されたページが生成されている、ということを知っておいてほしい。

この記事のまとめ

最後に、この記事の内容を整理しておこう。

  • HTMLの正式名称は「HyperText Markup Language」。「HTML」はその略称。
  • HTMLはコンピュータのための言語のひとつであり、ウェブページを記述するために使用する。
  • HTMLで記述されたウェブページは、ウェブブラウザ(web browser)を使用してディスプレイに表示させる。
  • どんなソフトやサービスを使用してウェブページを作成しても、その背後では、HTMLで記述されたウェブページが生成されている。
  • ウェブブラウザに搭載されているデベロッパーツール(開発者ツール)を使用すれば、開いているページのHTMLを見ることができる。
  • デベロッパーツールを表示させるには、ウェブブラウザのウィンドウをアクティブにして、Windowsの場合はF12キーを押す。Macの場合はCommandOptionIキーを押す。

この記事の内容は以上だ。今回は「HTML」とは何かについて、大雑把に説明した。次回以降で少しずつ具体的に、HTMLについて紹介していくことにしよう。

タイトルとURLをコピーしました