開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

HTML5でのタグの書き方、まとめ。

最終更新:2017-06-11 by Joe

HTML5の基本となるHEADタグを解説します。

HEADタグのHTML5での書き方の例

これがあれば公開できる、基本的な要素です。

titleタグ

これはSEO上、すごく重要ですので、ぬかりなくページタイトルを付けて下さい。

一般的には、以下はよく言われています。

  • SEOしたいワードを含める。(できれば冒頭に含める)
  • 記事の内容をよく表す、分かりやすいタイトル
  • 文字の羅列を詰め込まない。自然なタイトル

meta descriptionタグ

こちらも、SEO観点で、検索結果に表示されるために使われます。ただし、必ずしもこのdescriptionが使われるわけではありません。表示される文章は、検索エンジン自身が、検索者のニーズに応じて自動的に変化します。

meta viewportの設定について

書き方

「user-scalable=no」とするかどうかは、状況に応じて決めてください。

Viewportについては、この辺も読んでおいてください。

注意点

CSSに html{-webkit-text-size-adjust: 100%}と必ず書いておいてください。理由はこちらです。

ファビコン

ファビコンはブラウザのタブなどに用事される小さいアイコンです。

HTML5のファビコン

画像の形式はPNGで構いません。殆どのブラウザでサポートされています。歴史的には、.icoと呼ばれるビットマップに近いファイル形式が使われてきました。

icoファイルはオンラインにたくさんのジェネレータがあります。

スタイルシート

こちらもほぼ形式的にこのように書きます。

ファイルの末尾に、「?ver=xxx 」と書くのは、必須ではありません。

あなたが、サーバー上のCSS更新したあと、ユーザのブラウザ上にファイルキャッシュが残ってしまって、表示が乱れるのを防ぐ目的があります。あなたの意図したタイミングでキャッシュを破棄させるには、verのあとの数字を適当に変更して下さい。

スクリプト

必要なjavascriptファイルです。srcにファイルパスを書き込むか、直接script内にスクリプトを書き込みます。

scriptタグは、linkタグと異なり、デフォルトではそのファイルの読み込みと実行が完了するまで、その先のHTMLのロードをブロックします。

通常はさほど気になりませんが、極端に大きな外部ファイルを読み込んでる場合、ユーザの画面にHTMLが表示されまで時間がかかってしまうことがあります。これを避けたい時は、下記のような手段がとれます

  • 方法1:<script>をbodyの閉じタグの直前に書く。
  • 方法2:<script async>、<script deferred>を利用する。

方法1は、非常に簡単で、scriptロードが開始する前にすでにすべてのHTMLの読み込みが終わっています。ブラウザはscriptのロードが開始する前に、HTMLのパースを開始できます。

方法2は、すこし専門的になりますので、初心者の方は使わないほうがいいでしょう。こちらで詳しく解説されています。

極端に大きなスクリプトファイルでなければ、管理上、HEAD内に書いておいたほうがよいでしょう。気になる場合は、Chromeの開発コンソールで、読み込み時間を比べてみて下さい。

Tips:バージョン更新の自動化

CSSとscriptなど外部ファイルのバージョン更新は、自動化することが可能です。

HTMLでは不可能なので、PHPを利用します。ファイルの拡張子が.phpである必要があります。