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」を表示します。


キャッシュ・マニフェストは、まず1行目に



 CACHE MANIFEST



と描かなければなりません。
そして、慣例として2行目に



 # ver 1.00 2017/06/01



の様に、バージョンや日付を入れておくことが多いです。
(後々わからなくならないように)


文頭の「#」はその1行をコメント扱いするという意味になり、キャッシュ・マニフェストの動作には影響を与えません。


キャッシュ・マニフェストのファイル名は



 拡張子を 「.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" />