皆さんこんばんにちは、ユウです。
今回は前回の記事から引き続き、HTMLのタグについて紹介していきたいと思います。
今回も文書情報・構造について紹介していこうと思いますが、今回は meta タグをメインにして紹介していこうと思います。
Web制作を始めたばかりの方なんかは、 meta タグっていったい何なの？と思う人もいらっしゃるかと思います。
今回解説するのは以下の通りです。
- <meta>
- name属性
- http-equiv
- charset
そのような方に向けて、今回も簡単に書いていくので最後までお付き合い下さい。
今回の記事を読むメリット
・metaタグを理解できる
<meta> その文書に関する情報（メタデータ）を指定する
meta とは Metainformation の略で、 meta というのを簡単に訳すと超認知という感じになります。
メタデータとは情報に関する情報という意味です。
ですから、HTML内では、そのWebサイトに関わる様々な情報を意味する事になります。
メタデータを指定するのに、HTMLでは
- <title>
- <base>
- <link>
- <style>
- <script>
を使います。
ですが、これらのタグで表現できないことを meta タグで表わしていく事になります。
meta タグは基本 head タグ内に置きます。
meta タグを使用する際には
- name
- http-equiv
- charset 属性
のうち少なくとも一つは指定して使う必要があります。
それではこれらの属性の使い方を説明していきたいと思います。
name 属性
name属性には4つあります。
・keywords
・author
・generator
・application-name
keywords
これは、そのWebサイトでどのような内容を書いているのかキーワードで指定することが出来ます。
複数のキーワードで指定する場合には、半角カンマ（,）区切りで指定します。
この属性を入れておくことで、検索したときのキーワードによっては検索の上位に来ます。
author
これは、Webサイトの著作者の名前を記述するのに使用します。
generator
これは、Web制作を自動生成した際に使用したツールやソフトウェアを記載するものです。
人の手によって記述されたWebサイトであればこれは書く必要ありません。
下の content の中身はフィクションです。
application-name
WebページがWebアプリケーションを利用している場合に、そのアプリ名を指定します。
Webアプリケーションを使用していない場合は、記述しなくて大丈夫です。
この属性は一つのWebページに一つだけの属性となります。
name 属性の大まかな機能は以上になります。
今回は難しくなるので robots や viewport 属性は説明していません。
しかし、興味がある方は便利な機能なんかもあるので調べてみてはいかがでしょうか！
http-equiv
これは「エイチティーティーピー イクイヴァレント」と読みます。
属性を指定することで、Webページの処理方法や扱いを指定することが出来ます。
content-language
これはWebページ全体の言語を指定します。
言語はコンテンツ属性で指定しています。
言語の表記方法は content の中身を
・日本語なら” ja ”
・英語なら”en”
・中国語なら”zh”
・韓国なら”ko”
・ドイツ語なら”de”
・フランス語なら”fr”
となります。
このほかにも様々な言語が指定できます。
default-style
これは、優先すべきスタイルシートを指定する際に使います。
デフォルトとなるスタイルシートを指定することにより、複数あるスタイルシートの中でも優先してブラウザに読み込ませることが出来ます。
これ以外にも refresh 属性があるのですが、これは Googleが非推奨としているため、あまりおすすめできないので今回は紹介していません。
charset
head に記述し、文字コードを指定します。
これを指定する理由としては、日本語で作成したWebページに英語版のブラウザで表示させた場合、文字化けが起こる場合があります。
ですから charset はできるだけ書いておいた方が良いです。
指定する値としては、”utf-8” , “shift-jis” , “euc-jp” などがあります。
charset については以上になります。
これについては、言語設定と覚えてもらえれば大丈夫です。
metaタグのまとめ
- <meta>は、サイトの情報に関する情報を記述する
- name属性は、著作者などの情報を記述する
- http-equivは、Webページの処理方法や扱いを指定する
- charsetは、使う言語のようなものを指定する
最後に
今回は meta タグについて紹介してきました。
meta タグはどのWebページでも使う大切なタグなので、皆さんもぜひ覚えてみて下さい。
簡単な説明になってしまいましたが meta タグについては以上になります。
最後まで読んでいただきありがとうございます。
