HTML5の基本となるHEADタグを解説します。
目次
HTML5でのHEADタグの書き方の例
これがあれば公開できる、最も基本的な要素です。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>HTML5のHEADの書き方 | HTMLを勉強するブログ</title> <meta name="description" content="HTML5でのHEADの書き方を勉強するお"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="favicon.png"> <link rel="stylesheet" src="style.css"> <script src="main.js"></script> <script> // Your small script snippets </script> </head> <body> <!-- HTML本文 --> </body> </html>
titleタグ
これはSEO上、すごく重要ですので、ぬかりなくページタイトルを付けて下さい。
一般的には、以下はよく言われています。
- SEOしたいワードを含める。（できれば冒頭に含める）
- 記事の内容をよく表す、分かりやすいタイトル
- 文字の羅列を詰め込まない。自然なタイトル
meta descriptionタグ
こちらも、SEO観点で、検索結果に表示されるために使われます。ただし、必ずしもこのdescriptionが使われるわけではありません。表示される文章は、検索エンジン自身が、検索者のニーズに応じて自動的に変化します。
meta viewport の設定
viewport の書き方
ピンチズームをできるかどうかを指定する「user-scalable=no」とするかどうかは、状況に応じて決めてください。ただし、iOSでは、user-scalable=no が動作しなくなっています。この機能を使えなくすることは、ユーザビリティの悪化を招くこともあるから、という考え方だと思われます。
<meta name="viewport" content="width=device-width,initial-scale=1"> <!-- モバイルでピンチズームを許さないときはこちらをuser-scalable=no を追加 --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
Viewportについては、この辺も読んでおいてください。
注意点
CSSに html{-webkit-text-size-adjust: 100%}と必ず書いておいてください。理由はこちらです。
ファビコン
ファビコンはブラウザのタブなどに用事される小さいアイコンです。
画像の形式はPNGで構いません。殆どのブラウザでサポートされています。歴史的には、.icoと呼ばれるビットマップに近いファイル形式が使われてきました。
icoファイルはオンラインにたくさんのジェネレータがあります。
スタイルシートの読み込み
こちらもほぼ形式的にこのように書きます。
<link rel=stylesheet" type="text/css" media="all" "src="style.css?ver=20170912">
ファイルの末尾に、「?ver=xxx 」と書くのは、必須ではありません。
あなたが、サーバー上のCSS更新したあと、ユーザのブラウザ上にファイルキャッシュが残ってしまって、表示が乱れるのを防ぐ目的があります。あなたの意図したタイミングでキャッシュを破棄させるには、verのあとの数字を適当に変更して下さい。
スクリプトファイルの読み込み
必要なjavascriptファイルです。srcにファイルパスを書き込むか、直接script内にスクリプトを書き込みます。
<script src="main.js?ver=20170912"></script> <script> // Your small script snippets </script>
scriptタグは、linkタグと異なり、デフォルトではそのファイルの読み込みと実行が完了するまで、その先のHTMLのロードをブロックします。
通常はさほど気になりませんが、極端に大きな外部ファイルを読み込んでる場合、ユーザの画面にHTMLが表示されまで時間がかかってしまうことがあります。これを避けたい時は、下記のような手段がとれます
- 方法１：<script>をbodyの閉じタグの直前に書く。
- 方法２：<script async>、<script deferred>を利用する。
方法１は、非常に簡単で、scriptロードが開始する前にすでにすべてのHTMLの読み込みが終わっています。ブラウザはscriptのロードが開始する前に、HTMLのパースを開始できます。
方法２は、すこし専門的になりますので、初心者の方は使わないほうがいいでしょう。こちらで詳しく解説されています。
極端に大きなスクリプトファイルでなければ、管理上、HEAD内に書いておいたほうがよいでしょう。気になる場合は、Chromeの開発コンソールで、読み込み時間を比べてみて下さい。
Tips：バージョン更新の自動化による、ブラウザキャッシュの迂回
CSSとscriptファイルの外部ファイルは、ファイルが更新されても、閲覧者のブラウザ側で、古いキャッシュを読み続けてしまうため、不具合につながることがあります。
これを迂回するため、「ファイルのURLにクエリ文字列を含めて、変更してやる」という手段がよく使われます。
<link rel=stylesheet" src="style.css?ver=201805028">
ただし、毎回この数字を書き換えるのはめんどうです。
そんなとき、CSSとscriptなど外部ファイルのバージョン更新は、PHPファイルでは、自動化することが可能です。HTMLでは不可能なので、ファイルの拡張子が.phpである必要があります。
<?php
/**
* PHP：filemtime関数を利用した、CSSバージョンの更新の自動化
*/
?>
<link rel=stylesheet" src="style.css?ver=<?php echo filemtime('sytle.css'); ?>">
filemtime() 関数が、ファイルの更新日付を取得しますので、これをURLにのクエリ文字列として含めることで、ファイルが更新されるたびにURLが変わる→古いファイルのキャッシュを破棄して新しいファイルを読み込む、という動作をブラウザに行わせることができます。
以上です。
