HTMLコーディングをはじめよう〜副業にも!|第2章 文字エンコーディングとHTMLの基本構造

コーディング イメージ

チームで制作することが多いウェブサイトのHTML文書は、誰がみてもわかるように、規則やルールに則ってコーディングすることが大切だ。

なので、今回から、必要に応じGoogle HTML/CSS Style Guideに沿って、案内していこう。

最初は、文字エンコーディングとHTMLの基本構造についてだ。

文字エンコーディングはUTF-8 BOM無しで

普段、「文字エンコーディング」という言葉は意識していなくても、パソコンあるいはスマートフォンで、まれに「文字化け」した画面を見たことがあるだろう。特に、受信メールでありがちだ。

文字化けは、コンピュータ上の文字コードが合っていないために起こる。

では、文字コードとは、そしてエンコーディングとはなにか?

文字コードは、コンピュータ上の各文字に割り当てられるバイト表現のこと。と言われても、なんだかわかりにくいが、

  • Shift_JIS
  • Unicode(UTF-8 / 16 / 32 etc)
  • ISO-2022-JP
  • EUC-JP

といった類なら、みたことはあると思う。Shift_JISは、日本語を含む文字列を表現する文字コードだ。

「バイト表現」という言葉はわからなくても、文字コードを統一することで、「文字化け」していた文章が、自身の環境下(パソコンなど)で読めるようになる。

これはウェブサイトでも同様で、世界的に標準の文字コードを使えば、例え日本語の文章であっても、世界中で制作した文書通りに表示されるということだ。

そして、世界標準の文字コードは、当たり前ではあるがShift_JISではなく、UTF-8だ。

ちなみに、エンコーディングとは、文字コード宣言のこと。文書の冒頭で、

「このHTML文書は、UTF-8で書きますよ〜」

と宣言しておくことで、どのパソコンで読んでも同じように表示されるというわけだ。ウェブサイトのソースコードを見ると、冒頭に必ず、

<meta charset="utf-8">

という表示があるのが、そう。

BOMとは

BOMは、バイトオーダーマーク(byte order mark)のこと。

文字コードのUnicodeには、「BOM付き」と「BOM無し」の2種類がある。

パソコンの文字は、全て数字とアルファベットの組み合わせでできていて、例えば、平仮名の「あ」は「3042」というコードが割り当てられている。そして、その前にUnicodeデータであるかどうかの符号がついていて、その数バイトがBOMだ。

UTF-8の場合、先頭の3バイト<0xEF 0xBB 0xBF>がBOMにあたる。

文字コードについて調べていくと大変長くなるし、趣旨からも外れるので、これくらいにしておく。詳しくは、ウィキペディアでも解説している。

HTML文書では「BOM」は不要のため、UTF-8の文字コードを使用する場合、必ず

「BOM無し」

を選択することが前提となる。

では、書いているHTML文書が「BOM付き」か「BOM無し」かを調べるにはどうしたら良いか?また、新たにファイルを作成するとき、どのように指定すれば良いか?

それは、自身が使用しているテキストエディタで調べられ、または指定で作成できる。

前回紹介したVisual Studio Codeであれば、新規ファイル作成の際、右下の「UTF-8」をクリックすると、ウィンドウ上部で「エンコーディングの選択」ができる。

VSCodeのエンコーディング

また、Mac専用のCodEditorも同様で、右下の「Unicode (UTF-8)」をクリックすると、プルダウンで選択できるようになる。

codeditorのエンコーディング

その他のテキストエディタも、概ね同様だ。

HTML文書のデフォルトは、UTF-8 BOM無し(または「UTF-8N」と表示)と覚えておこう。

HTML文書の基本構造

HTML文書は、最低限以下要素で構成されている。

HTML基本構造

これを、拡張子「.html」で保存すれば、HTML文書だ。

保存したHTML文書を、ブラウザで開くと以下のように表示される。

HTMLサンプルページ

さらに、これをFTPソフトで契約しているサーバーへアップすれば、誰でも閲覧できるWorld Wide Webのページになる。

では、上から順を追って説明していこう。以下小見出しは、必ずこの順で上から書いていくものだ。

ドキュメントタイプ

1行目は、必ずドキュメントタイプを書く。<!doctype html>と書いておくことで、この文書がHTML文書であることを宣言している。

別名は、「DOCTYPE宣言」または「文書型宣言」。

現在はHTML5が標準となるため、このような書き方となり、text/html(HTML4.01の時の書き方)などとは書かない。

<>で囲まれたものを「タグ」といい(「HTMLコーディングをはじめよう〜副業にも!|序章 ウェブサイトとHTML 」参照)、必ず終了タグ</>で閉じられるのが原則。しかし、ドキュメントタイプのように、終了タグが存在しないタグのことを「void要素」という。

改行を示す<br>も同様のvoid要素だ。よく、<br />と書く人がいるが、これは間違い。
Google HTML/CSS Style Guide 3.1.1参照)

htmlタグ

3行目は、htmlタグ。

このタグで囲った箇所がHTML文書であることを示し、さらにlang属性で、「要素の中で使用する言語の種類を明示」している。

早い話、

「このHTML文書は日本語で書かれていますよ〜」

といっている。

これは、ウェブサイトを見る人(人間)に対してだけではなく、検索エンジン(機械)にもわかるように書いてある。また、自動翻訳にも役に立つのだ。

htmlタグは、必ず文末に終了タグがくる。

headタグ

4行目は、headタグ。

HTML文書のヘッダ部分を指定するタグで、ここにtitleタグ、metaタグ、linkタグなど、HTMLに必要な情報を書いておくところ。

実際、ウェブページ上には表示されない。

CSSの外部ファイルも、情報のひとつとして、ここに外部ファイルからのリンクを書くことで読み込ませる。

一方、javascriptの外部ファイルは、headタグ内で読み込ませると、ページ読み込みスピードが遅くなることから、Googleでは推奨していない。そのため、この下に続くbodyタグの最後に記載するのが、一般的である。

5行目、8行目はmetaタグと言って、文書の情報を検索エンジンに伝える情報を記載するもの。必ず、headタグ内に記載する。

5行目は、「charset属性」で、上述の文字エンコーディングをする。

8行目は、「name属性」の”discription”を記載している。「メタ・ディスクリプション」という言葉を聞いたことはないだろうか?

いわゆる、そのページの概要を書いておくところで、検索の上位に表示されるかどうかの大事な要素だ。概要には、ヒットさせたい検索ワードを散りばめておくことが重要になる。

bodyタグ

bodyダグで囲まれた部分は、Webページの本文。ブラウザに表示されるところだ。

bodyタグ内にあるh1, h2といったタグは、見出し(heading)タグのこと。h1〜h6まであり、数字が小さいほど文字フォントが大きくなる。

ここにも検索ワードを入れることが大切で、検索にも重要なタグであることをお忘れなく。

このように、HTML文書は上から、

  1. ドキュメントタイプ
  2. htmlタグ
  3. headタグ
  4. bodyタグ

の4つで、構成されている。

これ以外の多くのタグ・文章・画像などは、上記2〜4のいずれかのタグ内に追加して、記載されている。

CSSとjavascript

HTML文書を、より視覚的に表示するものとして、

  • CSS (Casading Style Sheets)
  • javascript

がある。

CSSは、その名の通り「スタイルシート」で、ウェブページの装飾の役目を果たすコード。HTMLと同じ仲間と言ってもいい。

一方、javascriptは、ウェブページをよりダイナミックに動かすためのプログラミング言語だ。こちらは、別の専門知識が必要となる。

javascriptは、上述の通りプログラミング言語なので、HTMLコーディングの習得には必須ではない。

ここでいう「HTMLコーディング」は、HTML+CSSのことである。

それぞれについては、後日別ページで詳しく解説するが、HTMLの基本構造(上述)の通り、この2つについてはHTML文書内に書かず、必ず別ファイルを用意して、HTML文書内にリンクして作用させるのが標準だ。

このことを「関心の分離」という。
Google HTML/CSS Style Guide 3.1.5参照)

しかしながら、これにも例外があり、ページ読み込みスピードアップのため、短いCSSはHTML文書内に含んで書くことがある。javascriptも同様だ。

とはいっても例外は例外なので、必ずコーディングの基本に戻り、可能な限りCSSとjavascriptは外部ファイルを用意することが望ましい。

この章のまとめ

今回は、

  1. HTML文書は、必ずUTF-8 BOM無し(UTF-8N)で書く
  2. HTML文書の基本構造は、4つのタグでできている
  3. CSSとjavascriptは、必ず外部ファイルから読み込ませる

について解説した。

次回は、いよいよHTMLコーディングの基本について書く予定だ。

コメント