Webページを作ろう

Webページとは何か

JavaScriptは、Webページの中で動くプログラムなので、JavaScriptを動かすには、まずはWebページを作る必要があります。

Webページは、HTML(HyperText Markup Language)という言語で書きます。書いたHTMLをHTMLファイルとして保存して(拡張子は.html)、普通はそれをサーバ(server)と呼ばれるコンピュータのストレージに配置します。サーバというのは、パソコンと機能的にそんなに差はないですが、その辺のパソコンよりは性能と信頼性と値段が高いコンピュータです。

サーバはインターネットにつながった状態で24時間稼働していて、その中で、Webサーバというプログラムが稼働しています(まぎらわしいことに、「サーバ」という言葉が、コンピュータのハードウェアと、Webサーバというソフトウェアの両方で使われているので混乱しないようにしてください)。私たちが使うパソコンやスマホのWebブラウザからWebページを見ようとすると、まずWebブラウザから「このページのHTMLをよこせ」というリクエストが送られ、それに対する応答(レスポンス)としてWebサーバがHTMLを返します。ブラウザは、それを元にWebページを表示します。

図1: WebサーバでWebページを世界に公開する

こうやってWebページを世界に公開するには、どこか、インターネットにつながったところ(データセンターとか※1)にサーバを用意しなければいけません(私は、このページを公開するために、お金を払ってレンタルサーバを借りています)。しかし、JavaScriptを勉強するためだけであれば、わざわざサーバを借りる必要はなく、自分のパソコンのフォルダにHTMLファイルを置いて、それをブラウザで表示することもできます。なお、ここで、自分のパソコンのフォルダのことを、手元の環境という意味で、ローカル(local)と呼ぶことがあります。逆に、遠くにあるのはリモート(remote)です。

図2: ローカルのHTMLファイルを表示する

ここでは、そうやってローカルに作ったWebページを表示することにします。

HTMLファイルを作る

前のページでは、テキストファイル(拡張子は.txt)を作成しました。

HTMLファイルもテキストファイルです。しかし、拡張子は.htmlです。ここでは、まず.txtファイルとしてHTMLを書いてから、その拡張子を変えることで.htmlファイルを作りましょう。

前のページでC:\jslesson\lesson01フォルダを作り、その中にlesson01.txtファイルを作ったのと同じ要領で、C:\jslesson\lesson02フォルダを作り、その中にlesson02_1.txtファイルを作ります(lesson02_1のように_1をつけているのは、このページではもうひとつファイルを作るつもりだからです)。

これをダブルクリックしてメモ帳を開き、以下のように入力します。

図3: はじめてのWebページのHTML

いきなり謎の記号がたくさん出てきて面食らったかもしれませんが、これがHTMLです。なお、最後の、</html>の下に見えている縦線はカーソルなので入力の必要はありません。

上のHTMLをメモ帳に入力する場合、以下のようなことに気を付けてください。

  1. 日本語以外の部分、つまり「<」と「>」およびそれで囲まれた部分はすべて半角文字で入力してください。「半角文字って何?」という人はこちらへどうぞ。
  2. 半角の記号は、キーボードの各キーの、上の部分に印刷されていると思います。日本語キーボードならたとえば「<」はMのキーの右横ののキーの上に印刷されているはずです。これを入力するには、IMEの日本語入力をOFFにした状態で(タスクバーの右端にあるIMEバーに「あ」ではなく「A」と表示されている状態で)Shiftキーを押しながらのキーを押してください。同様に、「!」は「1」のキーの上、「"」は「2」のキーの上にあります。

入力し終わったら、前章と同じように保存してください。

さて、このHTMLについての細かい説明はちょっと先にするとして、これをブラウザで表示するため、拡張子を.htmlに変更します。

Windowsでは、ユーザがうっかり拡張子を変えてしまわないよう、ファイル名を1回クリックするだけでは「lesson02_1」部分しか選択状態になりませんが、今回はわざと拡張子を変えようとしているので、カーソルキーでカーソルを移動させて拡張子を変えてください。

そしてEnterキーを押すと、Windowsは、ユーザがうっかり拡張子を変えてしまわないようこんなポップアップを出します。

ここもダンコ「はい」をクリックすると、拡張子を変更することができます。

拡張子を変更したことで、ファイルの種類が変わったため、アイコンも変わります。下の、赤矢印のところのアイコンが何になっているかを見てください。

こちらのページの表1に、Windowsで使われている主要なブラウザのアイコンの一覧があります。見比べると、上のアイコンは、Edgeのアイコンであることがわかります。よって、このファイルをダブルクリックすると、Edgeが起動して、上で作ったHTMLのWebページが表示されます。

あなたの環境で、アイコンがChromeだったりFirefoxだったり、あるいはIEだったりした場合でも、ダブルクリックすれば似たような画面が表示されたと思います。

前述の通り、この入門では、Edgeをベースに説明します。あなたの環境で、.htmlがChromeやFirefoxに対応付けられている場合は、細かい違いは適当に読み替えていただくとしてそのまま進めても構いませんし、.htmlの対応付けをEdgeに変更するのもよいでしょう(やり方は後述します)。IEだった場合は、この後で説明するJavaScriptが動かない可能性があります。よって対応付けを変更するべきかと思いますが(いまどきIE?とも思いますし)、いまどきIEを.htmlに対応付けているからには何かそれなりの理由があるのかもしれません。そういう場合は、右クリックして「プログラムから開く」からEdgeを起動する、という方法もあります。これもやり方は後述します。

テキストファイルとは何か

上で、ファイルの拡張子を.txtから.htmlに変更しました。しかし、拡張子は、普通にファイル名をクリックしただけでは選択されず、カーソルを動かしたりして無理やり変えようとすると、上のように「拡張子を変更すると、ファイルが使えなくなる可能性があります。」と警告を出します。それ以前にそもそもWindowsは、デフォルトではファイル名を見えないようにしています。Windowsがそこまでして隠そうとしているものを、無理やり変えてしまって大丈夫でしょうか。

まあ、普通は大丈夫ではないからWindowsは警告を出すわけですが、今回、拡張子を変えても大丈夫なのは、ファイルがテキストファイル(text file)であることがわかっているからです。

テキストファイルとは、文字だけが入ったファイルです(改行やタブも文字と考えます)。ファイルの中に文字をどのように格納するかについてはこちらのページで説明したエンコーディングに従います。今時は、普通はエンコーディングにはUTF-8を使用します。

テキストファイルには文字しか格納できないので、もちろん画像を貼ったりできませんし、たとえばこんなふうに文字を太字にしたり、 色を付けたりすることもできません。ワープロ等で作る文書とは、そこが違うところです。ここでは、HTMLで太字にしたり色を付けたりしていますが、これは以下で説明するようにタグによるマークアップ(markup)を行っているからできることであって、HTMLファイルの中身はあくまで文字だけです。

テキストファイルを編集するプログラムのことを、テキストエディタ(text editor)、または単にエディタと呼びます。メモ帳は最も基本的なテキストエディタです。この入門では、エディタとしては最後までメモ帳を使う想定ですが、そのうちにもっと多機能なエディタを使いたくなることでしょう(特に、メモ帳は、アンドゥ(直前に行った修正を元に戻すこと)が1回しか効かないのが致命的です)。そういう時、「Vimがー!」とか「Emacsがー!!」とか言い出す人とはちょっと距離を置いた方がよいかと思います。VimもEmacsもよいエディタなのかもしれませんが、少なくともWindowsを使っている初心者向けではありません。私のお勧めは、Visual Studio Codeあたりでしょうか※2。

さておき、テキストファイルに対し、たとえば.exeファイルとか、画像ファイル(拡張子は.jpgとか.png)とか、あるいはマイクロソフトオフィスのワードで作ったファイル(拡張子は.docx)やエクセルで作ったファイル(拡張子は.xlsx)は※3、バイナリファイル(binary file)と呼びます。バイナリ(binary)とは2進数という意味で、つまりこのページで説明した2進数のデータがぎっちりはいったファイルです。バイナリファイルは、それぞれ独自形式でデータを格納しているので、それ専用のプログラムでなければ開くことはできません。Windowsでは、ファイルのアイコンをダブルクリックした時に動くプログラムを、拡張子ごとに対応付けているので、拡張子を勝手に変えると、ダブルクリックでファイルが開けなくなってしまいます。これが、Windowsが拡張子を変えさせたがらない理由です。

そういえば、大学とかで、「レポートはPDFで提出してください」と指示すると、ワードで書いた.docxファイルの拡張子だけを.pdfに変えて提出する学生がいるそうですが、拡張子だけ変えても、ファイル内部の形式がワードとPDFでは全然違うので、もちろん開けません。そういう場合は、ワードの機能でPDFファイルを出力するとか、印刷機能で出力先のプリンタに「Microsoft Print to PDF」を選ぶとかして、PDF形式のファイルを生成する必要があります。

HTMLについて

さて、図3のHTMLについて、順に説明していきましょう。下のリスト1に再掲します。左端の行番号は説明用に付けたもので、HTMLの一部ではありません。

リスト1: lesson02_1.html
  1: <!DOCTYPE html>
  2: <html lang="ja">
  3: <head>
  4: <meta charset="UTF-8">
  5: <title>はじめてのWebページ</title>
  6: </head>
  7: <body>
  8: <h1>はじめてのWebページ</h1>
  9: <p>これは私のはじめてのWebページです。</p>
 10: <p>なんとかかんとか。</p>
 11: </body>
 12: </html>

1行目の「<!DOCTYPE html>」は、DOCTYPE宣言または文書型宣言といって、この文書の「文書型」を示すためのものです。HTMLは、およそWebというものが始まったころから存在し(最初のバージョンは1993年です)、何度もバージョンアップしていますから、この文書がどのバージョンのHTMLであるかをブラウザに対して示す必要があるのです。現在の最新は1997年のHTML5.3ですが、HTML5以降では、このように「<!DOCTYPE html>」という文書型宣言を行います。

「ちょっと待て、文書型宣言がこの文書のHTMLのバージョンを示すなら、文書型宣言の中に少なくとも5とか5.3とかのバージョン番号が出てこなければおかしいだろう。だいたいHTML5以降は全部同じ文書型宣言とはどういう意味だ」というツッコミが聞こえてきそうです。これはもっともな疑問で、実際、たとえばHTML4.1の頃は以下のような文書型宣言を書いていました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これを見ると、「HTML 4.01」と書いてあります。これがバージョンを表している、というのはよくわかります。

ではなぜHTML5からは、文書型宣言の中にバージョン番号を書かなくなったのかといえば、端的に言えば「HTML5からはここでバージョンを宣言するのをやめた」からです。では文書型宣言などいらないのでは、と言いたくなりますが、インターネット上には、HTML4以前に書かれた古いHTML文書で文書型宣言を書いてない(行儀の悪い)ものが山のようにありますから、そういうものと区別をつけるために「<!DOCTYPE html>」とだけ書く必要があるのです。

2行目からは、<html lang="ja">とか、<head>とか、「<」と「>」で囲まれたものが登場しています。これをタグ(tag)と呼びます。タグには開始タグと終了タグがあり、たとえば2行目の「<html lang="ja">」が開始タグ、12行目の「</html>」のように「</」で始まるものが終了タグです。開始タグと終了タグは通常組になっており、開始タグと終了タグで囲まれた中身のことをコンテンツ(content※4)、開始タグと終了タグを含む全体を要素(element)と呼びます。ただし、4行目の「<meta charset="UTF-8">」という要素のように、コンテンツがない(そのため、終了タグもない)ケースもあります。

5行目のtitle要素を例にすると、以下のようになっています。

図4: HTMLの要素

そして、たとえばhtml要素の開始タグの中には、「lang="ja"」というものが書いてあります。これは属性(attribute)といって、要素に対して何らかの付属情報を与えるものです。

図5: 属性

たとえばhtml要素におけるlang属性はこのHTMLの言語を表しており、想像できるでしょうが、「"ja"」というのは日本語を表します。属性の値は、通常、"(ダブルクォーテーション)または'(シングルクォーテーション)で囲んで表記します(省略できる場合もありますが、常に囲んでおくのが無難でしょう)。

こうして見ていくと、2行目からhtml要素が始まり、12行目で終わっています。3行目からhead要素が始まり、6行目で終わっています。4行目には1行だけのmeta要素があり、5行目にはtitle要素があります。つまり、meta要素やtitle要素はhead要素に含まれており、そのhead要素はhtml要素に含まれています。図にすると、このような構造になっていることがわかります。

図6: HTMLの構造

html要素やhead要素は、コンテンツとして他の要素を持ちますが、title要素、h1要素、p要素は、コンテンツとして文字列(文字の並び)を持っています。これらの文字列は、ブラウザの画面上に図7のように表示されています。

図7: HTMLのブラウザへの表示

このHTMLに登場したすべての要素について、以下に説明します。なお、文書型宣言の「<!DOCTYPE html>」はタグでも要素でもありません。

リスト1: lesson02_1.html(再掲)
  1: <!DOCTYPE html>
  2: <html lang="ja">
  3: <head>
  4: <meta charset="UTF-8">
  5: <title>はじめてのWebページ</title>
  6: </head>
  7: <body>
  8: <h1>はじめてのWebページ</h1>
  9: <p>これは私のはじめてのWebページです。</p>
 10: <p>なんとかかんとか。</p>
 11: </body>
 12: </html>
html

HTML文書全体を意味します。HTMLでは、すべての要素は、html要素に含みます。

html要素の中には、head要素とbody要素を書きます。

リスト1では、html要素にlang属性を付けていて、その値は「ja」です。これはこの文書が日本語であることを示しています。これを書いておくことで、ブラウザの翻訳機能が元言語を把握しやすくなったりする、といったケースがあるかもしれません。

head

この文書自体に関する情報(メタ情報)を含める要素です。ここでは、meta要素とtitle要素を含んでいます。

head要素というのはおそらく当初は「header」(ヘッダ。先頭の見出しデータ、というような意味がある)の略だったのだろうと思いますが、HTML5からは、これとは別のheader要素ができたので、まぎらわしいことになっています……

meta

meta要素は、文書に対するいろいろな情報を書くための要素です(metaというのは、メタ情報を意味します)。ここでは、このファイルの文字エンコーディングがUTF-8であるということを示しています。文字エンコーディングって何? UTF-8って何? という人はこちらへ。

これを書かなくても、ブラウザはまあだいたいはエンコーディングを推測してくれるものですが、間違って意図しないエンコーディングで保存してしまったファイルをうっかりWebで公開しないためにも、meta要素でエンコーディングを指定しておくべきでしょう(そうしておけば、ブラウザで表示したとき文字化けするので、間違いに気づける)。

現在のWebではHTMLのエンコーディングにはUTF-8を使うのが常識というか、推奨されています。そして、いまどきメモ帳もデフォルトでUTF-8ですし(昔はシフトJISでした。これがUTF-8になったのは割と最近で、Windows10の2019年5月のアップデートからです)、そうそう間違えることもないかもしれませんが。

title

文書のタイトルを指定します。このタイトルは、図7にあるとおり、現在はたいていはブラウザのタブに表示されます。

このタイトルは、ブラウザのお気に入り(ブックマーク)に入れたときのタイトルとか、検索エンジンで一覧表示するときのタイトルにも使われることが多いです。

body

body(ボディ)要素は、ブラウザのウインドウの中に表示される、文章の本体を格納する要素です。ここでは、内部にh1要素とp要素を含んでいます。

h1

h1要素は、最上位のheading(見出し)を意味します。h1は最上位で、この下に、h2, h3, h4, h5, h6まであります。分厚い本などだと、まず第1部、第2部、…とあって、「部」の中に第1章、第2章、…とあって、さらに章の中には節があり、節の中には項がある、というような構造でそれぞれに見出しがついていたりしますが、その見出しを意味するのがこれらの要素です。

h1は最上位の見出しなので、かなり大きな文字で表示されているのがわかります。

最近の流儀としては、h1要素はひとつのHTMLファイルにひとつだけ書いて、文書全体のタイトルを書く、というようにすることが多いようです。そうすると、結局title要素と似たようなことを書くことになりますね。

p

p要素のpというのはparagraph(パラグラフ)の略で、「段落」を意味します。

この例では、ふたつの段落を書いています。改行が入って、行間が少し空いていることがわかります。逆に言えば、p要素で囲まない限り、HTMLファイル内で改行しても、ブラウザ上では改行されません(半角スペース1個分の隙間が空きます)。

その他、HTMLを書く上での注意点をいくつか挙げておきます。

  1. タグ名や属性名は、大文字で書いても小文字で書いても構いません。つまり、<p>と書いても<P>と書いても構いません。ただし、最近は小文字で書くのが主流です(20年くらい前は大文字が主流でしたが……)。
  2. p要素の説明のところでも少し書きましたが、改行や、連続した半角スペースは、HTMLの中では半角スペース1個分の意味しか持ちません。たとえば上のlesson02_1.htmlを以下のように変えたとして、 
    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのWebページ</title>
</head>
<body>
<h1>はじめての           Webページ</h1>
<p>これは
私の
はじめての



Webページです。</p>
<p>なんとかかんとか。</p>
</body>
</html>
    表示はこうなります。

    「これは」と「私の」の間とか、「私の」と「はじめての」の間に、ちょっと隙間が開いているのがわかるでしょうか。
    HTMLもアメリカで開発されたものなので、英文を書くならこれが都合がよいのでしょう。適当に単語単位で改行しても、そこには半角スペースが入るのが自然だからです。日本語の場合、変な隙間を入れたくなければ、HTMLファイルでは、段落の最初から最後まで改行なしで書くことになると思います(まあ、句読点の後とか、目立たないところで改行するという手もありますが)。HTMLで長文を書くなら、それが可能なエディタを使いましょう。メモ帳の場合、「書式」メニューの下の「右端で折り返す」にチェックを入れると、画面におさまらない長い行を折り返してくれます。
  3. 人によっては、要素の階層構造がわかりやすくなるように、以下のように字下げ(インデント(indent)といいます)をする人もいます。
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>これは私のはじめてのWebページです。</p>
    <p>なんとかかんとか。</p>
  </body>
</html>
  4. 「<」とか「>」とかの文字はタグを表すために使いますが、普通にこの文字を書きたい、というケースもあるかと思います。そのような場合は、文字参照という表記法を使います。
    よく使う文字参照
    文字文字参照備考
    <&lt;ltは、less than(より小さい)の略
    >&gt;gtは、greater than(より大きい)の略
    "&quot;quotationの略
    '&#39;quotのようなものが割り当てられていないので、#の後に文字コードを指定する。
    &&amp;&は文字参照に使うので、&の文字参照も必要。

ここはプログラミング(JavaScript)の入門なので、あまりHTMLの説明を続けるのも何ですが、せっかくのWebページなので、画像とリンクぐらいは貼ってみましょうか。

図8: 画像とリンクを貼ってみる

パンケーキの写真が貼ってあります。また、下の「ここをクリックすると、google.comに移動します」とあるところの青い文字「ここ」をクリックすると、google.comに移動(画面遷移)します。

さて、このHTMLを作るため、前回作ったlesson02_1.htmlを同じフォルダでコピーします。ファイルをコピーするやり方はいくつかあるのですが、ここでは、マウスの右ボタンによるドラッグ(右ドラッグ)を使用します(そもそもドラッグって何? という人は、たとえばこのページを参照してください。)。

lesson02_1.htmlにカーソルを合わせてマウスの右ボタンを押し、押したままマウスをちょっと動かして、右ボタンを離します。そうすると、こんなポップアップメニューが出ます。

ここで「ここにコピー」を選ぶと、ファイルのコピーが作られます。

名前は「lesson2_1 - コピー.html」のようになっているので、適当に変えてください。ここでは「lesson2_2.html」に変更します。

さて、拡張子が.txtだった時は、ダブルクリックすればメモ帳が起動しました。今は拡張子が.htmlなので、ここで「lesson02_2.html」をダブルクリックしても、起動するのはブラウザです。どうやって編集すればよいでしょうか。

やり方はいくつかあって、ひとつ目の方法は、メモ帳の画面にlesson02_2.htmlをドラッグ&ドロップすることです。これを行うには、先にメモ帳を起動しておかなければいけませんが、スタートボタンから「W」のところの「Windows アクセサリ」を開くとその下にメモ帳がいます。ここからメモ帳を起動しておいて、その画面上までlesson02_2.htmlを左ボタンでドラッグすれば、メモ帳でlesson02_2.htmlを開くことができます。

ふたつ目の方法は、メモ帳を起動したら、「ファイル」メニューの「開く(O)...」を選択し、そこで開くファイル選択ダイアログで、lesson02_2.htmlを選ぶことです。

3つめの方法は、lesson02_2.htmlを右クリックして、「プログラムから開く」を選択する方法です。「プログラムから開く」を選んだ時に展開されるメニューに「メモ帳」がいれば(このケースでは、いました)、ここでメモ帳を選ぶことで、メモ帳でこのファイルを開くことができます。

もしメモ帳がここにいなければ、「別のプログラムを選択」を選びます。すると以下のようなポップアップが開くので、ここでメモ帳を選んでください。また、現在.htmlが紐づけられているブラウザが気に入らない場合は、ここで「常にこのアプリを使って.htmlファイルを開く」にチェックを入れることで、.htmlに対応付けられたプログラムを変更することができます。

もしここにもいない場合は、一番下の「その他のアプリ」を選ぶと、いくつかアプリが増えます。

そこにもいなければ、その時には一番下には「このPC で別のアプリを探す」が表示されていますから、

これをクリックして表示されるファイル選択ダイアログで、これを開くプログラム(メモ帳なら、notepad.exe)を選択します。一度そうやって起動すれば、以後は、最初の「プログラムから開く」の選択肢の中にメモ帳が入ってくるはずです。

さて、こうしてメモ帳が起動できたら、lesson02_2.htmlを以下のように修正します。

リスト2: lesson02_2.html
  1: <!DOCTYPE html>
  2: <html lang="ja">
  3: <head>
  4: <meta charset="UTF-8">
  5: <title>はじめてのWebページ</title>
  6: </head>
  7: <body>
  8: <h1>はじめてのWebページ</h1>
  9: <p>これは私のはじめてのWebページです。</p>
 10: <p>これはとある喫茶店のパンケーキの写真です。</p>
 11: <p><img src="./pancake.jpg"></p>
 12: <p><a href="https://www.google.com/">ここ</a>をクリックすると、google.comに移動します。</p>
 13: </body>
 14: </html>

11行目にimgという要素が増えています。img要素のsrc属性に、「./pancake.jpg」というファイルが指定されています。この「./」のピリオドは、「現在のフォルダ」を意味し、つまり「pancake.jpg」というファイルがlesson02_2.htmlと同じフォルダにあり、img(imageの略。画像のこと)要素でそれを表示する、ということを意味しています。よって、何か適当な画像ファイルをlesson02_2.htmlと同じフォルダに置いて、img要素のsrc属性を、それに合わせて変えてください。なお、適当な画像といっても、拡張子は.jpg(または.jpeg)、.png、.gifのいずれかでなければなりません(デジカメで撮った画像なら、たいてい.jpgでしょう)。また「./」の「/」の方は、UNIXにおけるパスの区切り文字です。こちらで説明したように、WebではこれをUNIXから引き継ぎました。

12行目にはaという要素があります(anchor(アンカー。船を留めるイカリのことです)の略です)。a要素のhref(hypertext referenceの略のようです)にリンク先のURL(アドレスのこと)を指定することで、aタグに囲まれた部分がそのページへのリンクになります。

――確かに画像も貼れたけど、見出しの文字は大きすぎるし段落の隙間は空きすぎだし背景は真っ白だし、もっとかっこいいページにしたい、と思うかもしれません。そういうことをしたければ、CSS(Cascading Style Sheets)というものを使う必要があります。

「なんでそんなに面倒くさいんだ! p要素なんて使わずに普通に改行しただけで改行表示すればいいし、h1なんて書かなくてもワープロみたいに太字にできればいいだろう!」と思う人がいるかもしれません。しかし、HTMLで書いたWebページはいろいろなデバイスで表示されます。パソコンとスマホを比べればわかるでしょうが、画面の横幅も様々なので、改行位置を手で指定するよりは、HTMLでは「段落」という意味だけを表現して、実際の改行はブラウザに任せる方がよい、というのがHTMLの考え方です。同様に、h1も、太字で表示すべきかどうかはブラウザに任せます(ガラケーとかなら、思った通りの太字は出ないかもしれません)。また、h1要素で「(かなり重要な)見出し」であるという「意味」を表現することで、たとえばGoogleなどの検索エンジンの検索結果に影響が出るかもしれませんし、ブログサービスなどでは見出し要素を元に目次を自動生成する機能があったりします。

DOM

ところで、lesson02_1.htmlのHTMLは、見方を変えれば、以下のような木構造ととらえることもできます(こちらの図2では、木の根元が上にありましたが、ここではHTMLのイメージと合わせるため根を左に持っていきました)。

図9: DOM

この、木構造で表現されるデータモデルのことを、DOM(ドム/Document Object Model)と呼びます。今のところは「そういうものがある」ぐらいに覚えておいてください。

公開日: 2021/06/20

前のページ | 次のページ | ひとつ上のページに戻る | トップページに戻る