初めまして。この記事が初投稿です。
初回なので、軽くHTML関係のことから。ついつい忘れてしまって、いつもGoogle先生にお世話になってしまうHTMLの基礎についてまとめていこうと思います。 冒頭に書くべきmeta要素とかあの辺の、難しくは無いけどなんだったっけ、ってなるやつ。
HTML5の基本構造とDOCTYPE宣言の書き方
htmlを書くならまずはDOCTYPE宣言という記述が必要です。
HTML5では、宣言がなくても一応htmlは表示できますが、宣言しておかないとブラウザのレンダリングモードが通常の「標準（strict）モード」ではなく「互換モード」になるとか。
「互換モード」の場合、CSSなどが正常に読み取られないらしく、レイアウトが崩れることになりますので、DOCTYPE宣言は現状必須でしょう。
HTML5でのDOCTYPE宣言の書き方
<!DOCTYPE html>このDOCTYPE宣言をしたうえで、HTML5では以下のような構造で書いていきます。
<!DOCTYPE html>
<html>
<head>
<!-- ファイル・スクリプトの読み込みや、様々なメタ情報を記述 -->
</head>
<body>
<!-- サイトで実際に表示される内容 -->
</body>
</html>HTML5でhtmlタグに使える属性について
大枠となる<html></html>自体につけることができる属性について。
- lang属性
- manifest属性
上記の2つを属性として指定することが可能です。
lang属性：言語に関する指定
htmlタグには、lang属性で言語を指定することができます。
例えば、日本語の場合はlang="ja"、英語の場合はlang="en"と指定します。
例：日本語のサイトの場合
<html lang="ja">...</html>では、これは必要な記述なのかというと、「別に書く必要はない」とされています。
というのも、検索エンジン側のGoogleはlang属性のことを全く見ておらず、SEO的にも全く無意味なものだと、公式に発表されているのです。（参考：Google「言語指定にlangは使うな」／公式発言）
書く必要はないものだが、不安なら書いておいても別に損はないので、書くか書かないかは完全に好みですね。
manifest属性：キャッシュマニフェストの指定
HTML5からはlang属性の他に、「manifest属性」というのが追加されました。
簡単に説明すると、manifest属性とは「キャッシュデータを利用してオフラインの場合でも最低限の表示ができるようにするもの」で、表示させたい.appcache 拡張子を持ったファイルを指定します。
公式な説明も一応引用しておきますね。
HTML5 タグリファレンス:manifest 属性 では、以下のように説明されています。
manifest 属性はキャッシュマニフェスト（Cache Manifest） ファイルの URI を指定します。
キャッシュマニフェストファイルは、オフラインでのアクセスに備えてブラウザがあらかじめキャッシュしておく必要がある外部リソースを指定したもので、内容は単純なテキストファイルです。このファイルを、
example.appcache
のように、.appcache 拡張子を持ったファイルとしてサーバに設置し、html 要素に対して付与した manifest 属性で URI を指定することにより、マニュフェストファイルに記載した外部リソースがブラウザによってキャッシュされます。
基本的になくても良いでしょう。
オフラインに対応する必要があれば、manifest属性が使えるんだな〜くらいの知識でいいと思います。
HTML5でhead内に書いておきたい記述
<head>内には結局何を書いておけばいいのか？
今回のメインはここです。個人的に色々調べてみて、必要だと思ったものをまとめておきます。
先にざっと箇条書きにしてみます。
- エンコードの指定
- IEで常に標準モードで表示させる設定
- iOSのSafariで電話番号の自動リンク化を無効にする設定
- viewportの設定
- 検索エンジンのクローラー向けの設定
- サイトのタイトル
- サイトの説明文
- ファビコンの指定
- IE8以下へのhtml5対応（必要なら）
- その他、必要なファイルの読み込み
これらを実際のコードにすると、次のような記述になります。
head内に書いておきたい記述
<head>
<!-- エンコードの指定 -->
<meta charset="utf-8">
<!-- IEで常に標準モードで表示させる -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 電話番号の自動リンク化を無効 -->
<meta name="format-detection" content="telephone=no">
<!-- viewport(レスポンシブ用) -->
<meta name="viewport" content="width=device-width">
<!-- 公開前は検索エンジンにインデックスさせない -->
<meta name="robots" content="noindex, nofollow">
<!-- サイトのタイトル＆説明 -->
<title>WEMO</title>
<meta name="description" content="縄跳び大好きクリエイターの学びの足跡。">
<!-- faviconの指定 -->
<link rel="icon" href="favicon.ico">
<!-- IE8以下でもhtml5に対応させる -->
<!--[if lt IE 9]><script src="./html5shiv.js"></script><![endif]-->
<!-- その他、必要なファイルの読み込みなど -->
</head>これらに加え、そのサイト似合わせてcssやscriptの読み込みを記述しています。
補足：iOSのSafariで電話番号の自動リンク化を無効にする設定について
iOSのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっているのですが、電話番号以外の番号も誤認識されてしまうことがあり、非常にやっかいなものになっています。
この自動リンク機能を無効にする設定が、下記のmetaタグです
<meta name="format-detection" content="telephone=no">電話番号リンク化したい場合は、自分でhref属性にtel:電話番号を記述しましょう。
viewportの設定について
「viewportはどうやって指定するのがいいのか」という議論をよく見かけますが、それらを参考にして私が出した結論が以下。
<meta name="viewport" content="width=device-width">content属性の中身は、"width=device-width"によって、自動的にinitial-scale=1と判断されるため、これだけで良いです。
IE対策関係の設定について
レンダリング方法を「標準モード」に確定させる
IEでは、バージョンによってレンダリング方法が変わったりします。
「互換モード」で表示されると、DOCTYPE宣言の項で述べた通り、表示が崩れてしまうので、常に「標準モード」で表示させるという指定をしています。
それが、以下の記述です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">また、cssやjsファイルなどの外部ファイルが読み込まれるとその時点で表示モードが決定してしまうので、ファイルの読み込みをする前に記述しておく必要があります。
IE8以下をHTML5に対応させる
IE8以下まで対策しないといけないサイトなんてもうなくなってきているかと思いますが、一応触れておきます。
IE8以前では、HTML5に対応していないのですが、html5shiv.jsというスクリプトを使うと、HTML5にも対応させることができます。
このhtml5shiv.jsは2016年1月25日まではGoogleのCDNが使用できていましたが、現在はサービス終了となっているので、以下のGitHubよりファイルをダウンロードし、それを読み込むようにします。
IE8以下で表示されている場合のみ、html5shiv.jsというスクリプトを読み込ませる
<!--[if lt IE 9]><script src="./html5shiv.js"></script><![endif]-->
IEのバージョンを判断しているif文のことを「条件付きコメント」というのですが、この「条件付きコメント」はIE10以降では認識してくれません（普通のコメントアウトとして扱われる）。詳しくはこちらをご覧ください
まとめ
ここまでの内容を踏まえ、個人的にhtml5を書き始める時にとりあえずコピペして使いまわしているのが、以下のコードです。
<!DOCTYPE html>
<html>
<head>
<!-- エンコードの指定 -->
<meta charset="utf-8">
<!-- IEで常に標準モードで表示させる -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 電話番号の自動リンク化を無効 -->
<meta name="format-detection" content="telephone=no">
<!-- viewport(レスポンシブ用) -->
<meta name="viewport" content="width=device-width">
<!-- 公開前は検索エンジンにインデックスさせない -->
<meta name="robots" content="noindex, nofollow">
<!-- サイトのタイトル＆説明 -->
<title>WEMO</title>
<meta name="description" content="縄跳び大好きクリエイターの学びの足跡。">
<!-- faviconの指定 -->
<link rel="icon" href="favicon.ico">
<!-- IE8以下でもhtml5に対応させる -->
<!--[if lt IE 9]><script src="./html5shiv.js"></script><![endif]-->
<!-- その他、必要なファイルの読み込みなど -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- サイトで実際に表示される内容 -->
</body>
</html>
