コーディング

本気で学ぶ！HTML入門#04

【HTML入門】meta要素の使い方と文字コードの指定方法

HTML入門#4

「HTML入門」の4回目はHTMLの「meta要素と文字コードの設定」について学習しましょう。

今回の目標は、「meta要素の役割を知る」ことと、「文字コードの設定ができるようになる」ことです。

では早速やっていきましょう

目次

  1. meta要素とは
  2. meta要素の属性と属性値
  3. 文字コード指定をしてみよう！
  4. まとめ

meta要素とは

meta要素は、head要素の内に配置して、このページに関するさまざまな情報を記述する要素です。

meta要素で指定した情報が画面に表示される事は基本的にありませんが、ブラウザや検索エンジン、SNSなどがこれらの情報を活用しています。

具体的には、以下のような情報を設定できます。

  • 文字コード
  • ページの紹介文（概要文）
  • ページに関連するキーワード
  • TwitterやFacebookなどのSNSの情報
  • 作ったソフト
  • 著者

などです。

例えば、HTML5で書かれているページで、このページの文字コード「UTF-8」という文字コードに設定する場合は以下のようになります。 

<meta charset="utf-8">

これをhead要素の中に配置します。

meta要素は前回までに紹介した要素と違って、上記のように設定したい情報を属性で指定し、属性値に記述します。

属性って何？という方は先にこちらを。

HTML入門#2

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

  • date_range

従って、内容を挟む必要がないので、終了タグもありません。

ほとんどのHTMLの要素は「ここからここまで」という様に範囲に意味をつけますが、meta要素のように、「ここにこの情報を配置」という感じで、「ここに」という使い方をする要素がいくつかあります。こういった「ここに」という様な意味の要素には終了タグがありません。

このように、終了タグが無い要素の事を「空要素」とか、「エンプティ要素」など呼びます。

meta要素の属性と属性値

meta要素は以下のように属性を使います。

  1. HTML5で文字コードを指定する場合は、「charset属性」

  2. 文字コード以外を指定する場合は、「name属性」か「http-equiv属性」で情報の種類を記述（情報の種類により「name属性」か「http-equiv属性」のどちらを使うのかが異なる）

  3. name属性」または、「http-equiv属性」の内容は、「content属性」に指定

  4. 1つのmeta要素には「charset属性」か「name属性」か「http-equiv属性」のどれか一つしか指定できない

となります。
とりあえず、今回は「文字コードの指定が出来る事が目標」なので、「charset属性」を知って頂ければOKです。

が、一応主なmeta要素の属性と属性値を紹介します。

主なmeta要素の属性と属性値

charset属性
HTML5において、このHTMLファイルがどの文字コードで保存されているのか指定する属性。これにより文字化けを防ぐ。属性値には文字コードを指定する（大文字と小文字を区別せずに使える）。主な文字コードは以下の通りだが、HTML5では、「UTF-8」が推奨されている。

  • UTF-8：「UTF-8」で保存されたHTMLファイルの場合
  • Shift_JIS：「シフトJIS」で保存されたHTMLファイルの場合
  • EUC-JP：「EUC」で保存されたHTMLファイルの場合
<meta charset="utf-8">
name属性
情報の種類を指定する属性。name属性で指定した情報の内容は「content属性」で記述する。なお、name属性に指定できる主な属性値は以下の通り。

  • description：このページの紹介文
  • keywords：このページに関連するキーワード
<meta name="description" content="大阪府豊中市のおいしい食べ物屋さんをランキング形式紹介するサイトです">
<meta name="keywords" content="豊中,大阪,北摂,グルメ,ランキング">
http-equiv属性
情報の種類を指定する属性。http-equiv属性で指定した情報の内容は「content属性」で記述する。なお、http-equiv属性に指定できる主な属性値は以下の通り。

  • content-type：ファイルの形式（charset属性に未対応のブラウザの為の文字コード指定方法）
  • X-UA-Compatible：Internet Explorerどのバージョンの再現方法で表示するかを指定
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="X-UA-Compatible" content="IE=11">
content属性
「name属性」または「http-equiv属性」で指定した情報の種類の内容を指定する属性。属性値は情報の種類によって異なる。

これらが、主なmeta要素の使い方です。

【演習】文字コードを指定してみよう！

では、実際にmeta要素を使って「文字コードを指定」してみましょう。

index.htmlを開き、meta要素を追記

  1. 前回までのHTMLファイル（index.html）をテキストエディタで開きましょう。

  2. 下記を参考に、4行目に<meta charset="utf-8">を追記してみましょう。

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ここにタイトル</title>
  </head>
  <body>
    <p>ここに本文を入れる</p>
  </body>
</html>
  3. 記述できたら、上書き保存しておきましょう。

  4. ブラウザで確認（index.htmlをダブルクリック）
    (見た目に何も変更はないですが、文字化けがなく表示されているかを確認しておきましょう。)

できましたか？
もし、文字化けをしている場合は、保存したHTMLファイルの文字コードが「UTF-8」では無い可能性が高いので、ファイルの文字コードをUTF-8に変更するか、ファイルの文字コードに合わせて、charset属性の属性値を書き換えて下さい。

ちなみに、Windowsの「メモ帳」は、文字コードが「シフトJIS」になり、変更もできません。「TeraPad」も初期値は「シフトJIS」だったかと思います。「Atom」ならデフォルトで「UTF-8」ですし、変更も容易です。

まとめ

今回は、meta要素の役割と文字コードの設定方法をお伝えしました。meta要素は、このページの情報を記す要素で、head要素内に配置します。

基本的に、全てのHTMLファイルで文字コードの設定は行ないますので、文字コードの設定方法は覚えておきましょう。

というか、基本的に全てのHTMLファイルで、まず上記のindex.htmlの内容を毎回書きますので、まとめておきましょう。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>[ページタイトル]</title>
  </head>
  <body>
    [ページ内容]
  </body>
</html>

上記のDOCTYPE宣言や要素は、テンプレート的に覚えましょう。

さて次回から、「テキスト関連の要素」について学習していきます。まずは、どの要素がどの要素の中に配置できるのかを示す、要素のカテゴリーを学習しましょう。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

  • date_range