01.基本構造
<html>
HTML5からはDOCTYPEや言語指定など、とてもシンプルになりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
コンテンツ
</body>
</html>
HTML5で追加された属性もあります。
■HTML5で追加された属性
・manifest
manifestファイルのURIを指定
「キャッシュ・マニフェスト」で、ブラウザのキャッシュをコントロールするものです。
・インターネット上のデータ（ファイル）の転送量を減らしたい
・オフラインでも動作させたい
転送量を減らすことで
・表示速度の向上
・サーバー負荷軽減
が見込まれます。
キャッシュ・マニフェスト
キャッシュ・マニフェストで出来ることは
・キャッシュさせたいファイルの指定
・キャッシュさせたくないファイルの指定
・キャッシュファイルが読み込めなかった時の代替ファイルの指定
になります。
■『CACHE:』セクション
CACHE:
xxx.html
yyy.png
zzz.css
「xxx.html」「yyy.png」「zzz.css」がキャッシュの対象となります。
■『NETWORK:』セクション
NETWORK:
xxx.cgi
yyy.php
zzz.js
「xxx.cgi」「yyy.php」「zzz.js」が常にサーバー(オンライン）から読み込まれます。
■『FALLBACK:』セクション
FALLBACK:
cache_error.html
キャッシュの読み込みに失敗した場合は「cache_error.html」を表示します。
キャッシュ・マニフェストは、まず１行目に
CACHE MANIFEST
と描かなければなりません。
そして、慣例として２行目に
# ver 1.00 2017/06/01
の様に、バージョンや日付を入れておくことが多いです。
（後々わからなくならないように）
文頭の「#」はその１行をコメント扱いするという意味になり、キャッシュ・マニフェストの動作には影響を与えません。
キャッシュ・マニフェストのファイル名は
拡張子を 「.appcache」 とすることを推奨
されています。
今、下記のキャッシュ・マニフェスト
CACHE MANIFEST
# ver 1.00 2017/06/01
CACHE:
xxx.html
yyy.png
zzz.css
NETWORK:
xxx.cgi
yyy.php
zzz.js
FALLBACK:
cache_error.html
を「cacheManifest.appcache」というファイル名で保存したとすれば、<html>の記述は
<html manifext="cacheManifext.appcache">
・・・・・
</html>
となります。
<link>
■スタイルシート
正式な書式は
<link rel="stylesheet" href="style.css" type="text/css" />
ですが・・
↓
HTML5では「type="text/css"」は必須ではない
・・・なので
<link rel="stylesheet" href="style.css" />
と簡略化可能です。
同様に<script>タグもHTML5から変更になりました。
■HTML5での変更点
HTML4 は「type」が必須
HTML5 は「type」は省略可
初期値が type="text/javascript" となっていて JavaScript の時は省略してもよい
■他言語サイトやスマホサイト
他言語のページやスマホ用のページが用意されている場合です。
■PCサイトに
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.hogehoge.com/sp/" />
■スマホサイトに
<link rel="canonical" href="http://www.hogehoge.com/" />
このような記述をすることで多言語サイトやスマホサイトを検索エンジンに伝えることができSEO対策になります。
■アイコン
ブラウザに表示される「ファビコン」や、スマホのアイコンとして表示させたい画像の指定です。
<link rel="icon" href="favicon.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="icon.png" />
