「HTML」とは？タグの意味とWEBページの構造を理解しよう。

- プログラミング
「HTML」とは？タグの意味とWEBページの構造を理解しよう。
2021年4月12日

HTMLの基本的な書き方を知ろう

本記事ではプログラミングの最初の一歩でもある「HTML」の理解を深めていきます。

1989年にイギリスの計算機科学者「ティム・バーナーズ＝リー」氏によって開発されたこのハイパーなテキスト（HyperText Markup Language）はどのように書くのかを見ていきましょう。

「タグ」で「意味づけ」をするのがHTML

WEBサイトは、人間が見る前にまず「コンピューターが読み取るもの」です。そのコンピューターが読み取れるようにコードを書かないと、正しくWEBサイトは表示されません。

「コンピューター＝パソコンやスマホ」に正確に情報を伝えるため、通常のテキスト文書に意味づけ（＝マークアップ）していく必要があるんです。この意味づけに必要なパーツが「HTML」なんですね。

コンピューターのために「ここはこういう文字の大きさだよ」「ここは改行ね」なんて伝えるため「タグ」を付けてきます。

文章にタグを付けることで、コンピューターは「ここは文字を大きくするんだね」「ここは改行しておくんだね」と理解できるわけです。

HTML文書で使う「タグ」はさまざまな種類があります。

例えば、以下のように<p>〜</p>タグで意味づけ（＝マークアップ）をしていきます。

マークアップの例
```
<p>はじめてのプログラミング</p>
```
上記のpタグは「Paragraph（パラグラフ＝段落）」の略。

<p>〜</p>で囲まれたテキストは「1つの段落だよ」という意味づけであり、それをコンピューターに伝えています。

すぐに作れるHTMLファイル

HTMLを使って書かれた文書は「HTML文書」と呼びます。

ファイルにするときの拡張子は「.html」。

この「.html」ファイルを、自分のパソコンで即席で作って体感したい方は『【5分で演習】HTMLファイルを作ってWEBブラウザで見てみよう。』を参考にちょっとやってみましょう。

タグで意味づけした文章は「.html」という拡張子で保存することで、「WEBブラウザ」で見ることができるようになるんですね。

「WEBのブラウザ」とはみなさんがインターネットをするときに使う上のアイコンのようなchromeやFirefox、safariのことですね。

なお、ブラウザで「インターネットエクスプローラー（通称：IE」を使っている方がいたら、ただちに使用を止めましょう。運営のマイクロソフトも使用を止めるよう促しています。IEのデメリットを知りたい方は『IEはなぜダメなの？なぜ嫌われ、なぜなくならないの？』をチェック。

WEBページの基本タグ

WEBページを構成するためのHTMLの文書の作成には「テンプレート」を使います。

WEBページを制作する際は、必ずこのテンプレートにのっとって書きましょう。

わかりやすく色分けして書くと、テンプレートは以下のようになります。

基本タグの例
```
<!DOCTYPE html>
 <html>
  <head>
  ここにWEBページの付帯情報が入る
  </head>
  <body>
  ここにコンテンツが入る
  </body>
</html>
```
ちょっとこのゴチャつき加減に目がクラクラするかもしれませんが…少しでも読みやすいようにインデント（文章頭に空欄）も入れています。

このインデントもコーディング時のマナーなので覚えておきましょう。

では、各タグの概要を解説していきますね。

①<!DOCTYPE html>タグとは？

この文書が「HTML文書で書かれているよ」こと示す「DOC TYPE宣言」です。この場合は「HTML5」というバージョンであることを伝えています。

②<html></html>タグとは？

このタグで挟まれた記述がHTMLで書かれていることを示しています。

③<head></head>タグとは？

このタグで挟まれた区間は、基本的にはWEBブラウザ上では表示されません。

コードに対して文字コードの指定をしたり、ブラウザの見え方を指示します。検索エンジン読み込ませるか否かなんかも指定可能です。これらを「metaタグ」と呼びます。

また「このページは別に作ったこのファイルと関係があるよ」といったことをコンピューターに伝えるための「linkタグ」も記述可能。

「metaタグ」も「linkタグ」も、WEBを閲覧するユーザーには関係ない、制作者とコンピューター間だけの「内輪のお話」ってことですね。いわゆる「WEBページの付帯情報」といったところです。

詳細は次の段落で解説します。

④<body></body>タグとは？

このタグで挟まれた区間は「WEBブラウザに表示させるもの＝ユーザーが見るもの・読むもの」となります。

テキストや画像、動画に関する記述がされるわけで、最も記述が長くなる箇所とも言えますね。

詳細は次の段落で解説します。

<head>タグの解説

では次に<head>タグの詳細解説に入っていきます。

①<head>タグ内に置くものは？

このタグで挟まれた区間は、基本的にWEBブラウザには表示されない＝ユーザーからは見えないものの「コンピューター」にとっては最も重要な意味を持つ記述でもあります。

<head>タグに書くのは「このHTML文書の関する付帯の情報」であり、コンピューターは<head>タグに書いてある「ルール」を読んでどのようにブラウザに表示をするか決定します。

例えば「どこの国の言語なのか」「レスポンシブ（パソコンやスマホそれぞれの端末で最適に見えるかの指示）の内容」などを記述します。

このような情報に関する記述を「メタ情報」と呼びます。

<head>タグの例
```
<head>
 <meta charset"UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ページのタイトル</title>
  <meta name="description" content="ページの内容を要約して説明する文章">
  <link rel="stylesheet href="CSSファイルのパス">
  <script src="Javascriptファイルのパス"></script>
</head>
```
（上のコードは右にスクロールできます）

ちょっとこのゴチャつき加減に目がクラクラするかもしれませんが、これまで見てきたことを整理しつつ俯瞰すると、暗号めいた上記の記述はそこまで複雑に感じなくなります。

上記コードをそれぞれ、解説していきます。

①<meta charset"UTF-8">

ここは「文字コード」です。メタ情報なので<meta>タグを使用。文書の文字コードを指定する「charset属性」を使用し「UTF-8」という文字のコードを使うよとコンピューターに伝えています。

②<meta name="viewport" content="width=device-width,initial-scale=1">

viewport（ビューポート＝表示領域）つまり「レスポンシブ対応」のための設定です。レスポンシブとは「パソコンやスマホそれぞれの端末で最適な見え方をさせる」こと。このコードでは「name」と「content」という2つの属性を用いて、閲覧する端末の幅に合わせて最適化させることをコンピューターに伝えています。

③<title>ページのタイトル</title>

このページのタイトルを記述します。検索結果にも表示されるページの題名であり、SEO（検索エンジン最適化）＝上位表示対策にも非常に重要なセクション。ここは<head>タグ内ではありますが、ユーザーの目にも触れる箇所ですね。

④<meta name="description" content="ページの内容を要約して説明する文章">

このページの説明を要約して記載する箇所です。前述の②でご説明したビューポートのように「name」と「content」という2つの属性を用いて記述します。なおこのディスクリプションが検索結果に表示されるのは「スマホが50文字程度」「パソコンで120文字程度」となっています。

⑤<link rel="stylesheet href="CSSファイルのパス"> <script src="Javascriptファイルのパス"></script>

外部のファイルを読み込むための記述です。このHTML文書をデザインするために使用するCSSファイル、JavaScriptファイルを読み込みます。CSSファイルは<link>タグ、JavaScriptファイルは<script>タグでコンピューターに読み込ませます。

よく見ると<script>タグにだけは、終了タグ</script>が必要です。忘れないようにしましょう。

<body>タグの構成

<head>タグはWEBページの「付帯情報」を記述する場所でした。

本項での<body>タグでは、実際にブラウザに映るコンテンツを記述していきます。

コンテンツとは、文字や写真のことですね。ここでは入門編として「文字」を取り扱ってみましょう。

別記事『【5分で演習】HTMLファイルを作ってWEBブラウザで見てみよう。』にて、簡易的にHTMLファイルを作り、ブラウザに映してみましょう。このページのやり方であれば、コーディング専門のテキストエディタは必要ありません。

例えば、下記のように記述します。

<body>タグの例
```
<body>
 <h1>はじめてのプログラミング</h1>
  <p>HTMLの基本を学ぼう</p>
</body>
```
実際に打ち込むと、Macであればこのようになります。

そしてブラウザにはこのように表示されます。

<h1>タグというのは、そのページで最も主張したい「見出し（≒記事名、タイトル）」になります。

今回のマークアップでは、コンピューターに<h1>タグで「見出し」であることを伝え、<p>タグで段落のかたまりを伝えています。

なお、今回は使用していませんが<h1>の次に強い見出しが<h2>そして次に<h3>と、数字が増えるたびにその強さは下がっていきます。

WEBページ全体のレイアウト

WEBページの<body>タグの中には、以下の4つのタグが存在します。

① <header>
② <main>
③ <aside>
④ <footer>

①〜④の配置を図にすると、下のようになります。

▶WEBページの構造例

これらは読んで字の如し、といったところで、

① <header>：頭
② <main>：メイン
③ <aside>：余談
④ <footer>：足

となります。それぞれを解説します。

①<header>タグ

ページのヘッド（頭）のエリアです。ロゴやサイト名、グローバルナビゲーションなどが来ます。これらは一般的にどのページを開いても位置が固定されています。

※メタ情報を記述する<head>タグとは異なります。あちらはWEBの付帯情報を記載するメタ情報記述エリア。こちらの<header>タグは<body>タグのなかにあるコンテンツです。

②<main>タグ

そのページのメインとなるコンテンツを示します。<main>タグは各ページに1つしか使えません。

③<aside>タグ

英単語「aside」には「余談」という意味があります。つまり、このページになくても成立はするという補足の情報を掲載するエリア。よくブログでは作者プロフィールの概略や広告バナーなどがありますね。なお<aside>タグのなかに<main>タグを入れることはできません。

<aside>は必ず設置しないといけわけでなく、ページのコンテンツやレイアウト的に必要なければ削ることもできます。

④<footer>タグ

ページ最下部となる<footer>エリアは、一般的なWEBページのサイトでは「会社情報」「プライバシーポリシー」などが設置されています。<header>と同じで、各ページの「共通パーツ」が入ることが多いです。

プログラミングの基礎「マークアップ」

HTMLとは、テキストに「意味づけ（マークアップ）」をするコンピューターのための言語です。

ということは、HTMLを書くということは「マークアップ」であり、厳密にはプログラミングではないことになります。しかし、広義ではプログラミングの一貫でもあります。

マークアップ＝HTMLの歴史については『マークアップの由来と歴史と役割を解説。HTMLの起源を探る。』をご覧ください。

プログラミングの基礎はまずこのマークアップにあり。

HTMLをまずは理解する。そしてCSSを抑える。ここをサラッとやらずに、疑問を全て解決しておくことを目指す。後々の挫折を回避するのに、これはとても大事なこと。CSSについてはまず『CSSとは？「基本の書き方」と「6種のセレクタ」を覚えよう。』をチェックして概要をつかんでみてください。

よくプログラミングを学ぶ際に「わからなくても先に進む」を美徳とするやり方がありますが、その癖がつきすぎると「わからないことは放置」となり、挫折の温床となりますので注意です。

HTMLにおいて言えば、例えば「コンテンツモデル」の概念を軽視し先を急いだ多くの人が、当たり前ながら早々に壁にぶつかったり、あとあとそれが原因でたびたびつまづく例は跡を絶ちません。

もし先を急いでも、急いだ分だけあとから不明な箇所はググる回数が無駄に多くなり、ストレスが積もっていきます。

それならば、最初に基礎をきちんと固めるのが、あとあとの成長が速いのです。

「点」が「線」になるまで粘り強く

プログラミングの基礎を勉強する際、同時に言語のみならず、ドメインやサーバーのこと、そしてコーディング専門のテキストエディタ、さらにWEBフォントなどなども順次抑えていくと、WEBサイトに関する勉強の第一歩が始まります。

当サイトにて全て記事化しているので、ざっとでも目を通してみてくださいね。

もちろんそれらの知識だけでは基礎全般としてはまだ足りないのですが、あせらず、少しづつ理解していくことが大事。学びの「点」が「線」となるように、まずは「点」のひとつひとつを納得いくまで学びましょう。

当サイト「メンタレ」は、プログラミングの基礎を専門的に学ぶオンライン個別指導のサービス。

慎重にプログラミングを始めたい方、ITのことはまだ詳しくなかったり、苦手意識がある方、一度プログラミングを挫折してあきらめてしまった方。

それらは「学び方」で解決できます。

お気軽にご相談ください。