"

headを知る!使用できるタグとmeta要素 ‐ HTML5で使用するタグの一覧とざっくり説明その1 ‐

以前の記事でhtmlファイルはheadとbodyの部分の2つでできているとかきましたが(書いてなかったらすいません)今回はこのサイトを参考にして、head部分(表示されない設定の部分)をざっくりまとめてみます。

MISSION:head部分の内容を3つにまとめて整理すること

今回は、1.ページに必要になる最低限のタグと2.メタ情報(meta要素)と言われる設定系タグと3.それ以外の特殊なタグの3つに分けてまとめてみます。

ページに必要になる最低限のタグ

ドックタイプ宣言 htmlファイルのバージョンを最初に宣言する決まりになってます。

 <!DOCTYPE html>(和訳:このファイルはHTML5で書かれてますよー)

<html></html> ここからHTMLがはじまりますよってタグ。HTML5ではlang属性をつけて2行目に書くのが一般的

<html lang="ja">(和訳:このhtmlファイルは日本語のファイルですよー)

<head></head> ここから設定系ですよってタグ

以下のタグはすべてこのタグの中に書きます。

<title> ページ自体のタイトルを入力するタグ

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

ブックマークするときに表示されたり、タブの中に表示されているものです。長すぎるものは好まれません。

<link> CSSなどの外部ファイルのURLを入力して、このhtmlと指定したファイルがつながっていますよってタグ

<link rel='stylesheet' href="CSSのURL" type='text/css' media='all'>
和訳:このページはすべてのブラウザや印刷のときなど「CSSのURL」にあるCSSファイルとリンクされてデザインを表示してますよ。

 <meta> メタ情報と言われるいろいろな設定を書くタグで、中身がいろいろあります。

charset 文字エンコードを指定する。 HTML5では

<meta charset="UTF-8">
和訳:このファイルの文字コードは「UTF-8」ですよー
(※最近は日本語の扱いなどもすべてUTF-8が主流です)

ちなみに<http-equiv="content-type" content="text/html; charset=utf-8">と同じですので、二重に書かないようにしましょう。

keywords そのページの重要ワードを指定できます。

<meta name="keywords" content="HTML5,head,タグ,ざっくり">
 という感じです。グーグルさんはページによって内容が違うのだから、別のページで全く同じにはならないと言ってますので、全部のページをコピペで作らないように注意です。

description そのページの概要です。

keywordsを含んだ日本語の文章にするのが一般的でkeywordsと同じく全ページ個別の内容になるのが望ましいです。また、検索結果に表示される文章になることもあります。

<meta name="description" content="html5のhead内のタグをざっくり説明" >

robots 検索エンジンのデータ収集ロボット「クローラー」に指示を出します。

値はindex/noindexとfollow/nofollowの2項目×2パターンになります。普通は検索結果に出したいので

<meta name="robots" content="index,follow">になります。

default-style 優先するスタイルシートを指定できます。

<meta http-equiv="default-style" content="style_main.css">
和訳:「style_main.css」というスタイルシートを優先して読み込んでください

まぁ、あまり使わないですね

refresh 再読み込みを指定するもの

<meta http-equiv="refresh" content="○秒" URL="飛ばしたいURL">
和訳:○秒後にURLにジャンプしてください

ただし、ブラウザによって対応していなかったり、怪しい挙動としてジャンプを止められたり、警告が出たりと中々安心して使えない気がします。

<head>でも<body>でも使える特殊なタグ

<style> headやbodyの中に直接CSSを書くときに使うタグ。

できれば<link>を使って外部のファイルにしたいので使いたくない。

<script> headやbodyの中に主にJavaScriptを書くときに使うタグ。

<style>と同じく外部ファイルにしたいところだが、直接入れないと使うのが難しくなるようなものもあるので、仕方なくそのまま使う。

<noscript> JavaScriptが見れない(使えない)環境のときに表示するコンテンツのタグ。

最近はjavascriptが見れない環境自体はかなり減ってきているし、今後もへっていくと思われるので使用しなくても別にいいのかなーと思います。