基本編 【HTML5入門】

hyper neet

前提

HTMLでは大文字と小文字を区別しない．

DOCTYPE宣言

HTML5で作ったドキュメントであることを宣言する文である．
HTMLドキュメントの最初に記述する．すなわち，html要素より前に記述する．

<!doctype html>

コメント

動作に関係のないコメント文は，<!-- と --> の間に記述する．複数行に渡るコメントも同様にして記述することができる．

<!-- This is comment block -->

<!--
    The first line
    The second line
    The third line
-->

セクション

HTML5では，ドキュメントをセクションによって区分けする．
各セクションは，関連する見出しを１つだけ持つことができる．
各セクションは，複数のセクションを内包することができる．

区分け方法としては，セクショニング コンテンツ要素で明示的に区分けする方法と，見出し要素(h1からh6)で暗黙的に区分けする方法がある．HTML5では，明示的にセクションを区分けすることが推奨されている．

セクショニング コンテンツ要素は新たなセクションを明示的に区分けする要素である．これらは，潜在的に見出しと階層構造を持つことになる．

セクショニング コンテンツ要素には次がある．

・section要素 (一般的なセクション)
・article要素 (自己完結する記事のセクション)
・aside要素 (メインコンテンツを補足するセクション)
・nav要素 (ナビゲーションであることを示すセクション)

(セクショニング．コンテンツ要素で)明示的に区分けした例

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8" />
   </head>
   <body>
       <h1>1階層目</h1>
       <p>bodyセクション</p>
       <article>
           <h2>2階層目</h2>
           <p>記事セクション</p>
           <section>
               <h3>3階層目の1つ目のセクション</h3>
               <p>section要素内のp要素</p>
               <p>...</p>
           </section>
           <section>
               <h3>3階層目の2つ目のセクション</h3>
               <p>section要素内のp要素</p>
               <p>...</p>
           </section>
       </article>
   </body>
</html>

(見出し要素 h1からh6で)暗黙的に区分けした例

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8" />
   </head>
   <body>
       <h1>1階層目</h1>
       <p>bodyセクション</p>
           <h2>2階層目</h2>
           <p>記事セクション</p>
               <h3>3階層目の1つ目のセクション</h3>
               <p>section要素内のp要素</p>
               <p>...</p>
               <h3>3階層目の2つ目のセクション</h3>
               <p>section要素内のp要素</p>
               <p>...</p>
   </body>
</html>

アウトライン

アウトラインとは，ネストされたセクションの階層構造のこと．

セクショニング・ルートとなる要素から始まり，セクショニング・コンテンツ要素などで明示的に区分けしたセクションや，見出し要素で暗示的に区画したセクションをネストすることで構成される．

セクショニング ルート

セクショニング・コンテンツ要素と違い，ドキュメント全体のアウトライン(階層構造とは別の，独自のアウトラインを持つ．

セクショニング ルートとなる要素には次がある．

・blockquote要素
・body要素
・details要素
・dialog要素
・fieldset要素
・figure要素
・td要素

次に例を示す．blockquote要素内で，h1要素を使っていることに注目．

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8" />
   </head>
   <body>
       <h1>h1 element</h1>
       <section>
           <h2>h2 element</h2>
           <p>p element in section element</p>
           <p>...</p>
           <blockquote>
               <h1>h1 element</h1>
               <p>quote</p>
               <h2>h2 elemnt</h2>
               <p>quote</p>
               <p>...</p>
           </blockquote>
       </section>
   </body>
</html>

キャッシュ マニフェスト(HTML5．1で既に廃止)

ファイル転送量を減らしたい場合や，オフラインで動作するウェブアプリを作る場合に，ブラウザのキャッシュをコントロールするための宣言文である．

HTML5では，キャッシュ マニフェストを記述するファイルの拡張子は".appcache"とすることが推奨されている．ファイルのURLはhtml要素のmanifest属性に指定する．

<html manifest="cacheManifestFileName.appcache"> </html>

キャッシュ マニフェストファイルを更新しない限り，ブラウザをリロードしても，ブラウザはキャッシュを更新しない．ファイルを更新してリロードすると，ブラウザはキャッシュを更新する．ただし，表示内容の更新は2回目のリロード時である．

キャッシュ マニフェストファイルの1行目には"CHACHE MANIFEST"と記述する．2行目には，"#"から始まるコメント文で，更新日やバージョンを記述すると良いだろう．このコメントを変更することで，キャッシュ マニフェストファイルを更新したことになり，ブラウザはキャッシュを更新する．次の行以降に，キャッシュさせたいファイルのURLを指定する．

次に例を示す．

CACHE MANIFEST
# ver 1.0.0 - 2020/11/08

sample.html
sample.css
sample.png

常にオンライン上から読み込ませたいファイルなど，キャッシュさせたくないファイルなどがある場合は，個別のセクションを記述し，次のように指定することができる．

CACHE MANIFEST
# ver 1.0.0 - 2020/11/08

#キャッシュさせたいファイルを指定するセクション
CACHE:
sample.html
sample.css
sample.png

#キャッシュさせたくないファイルを指定するセクション
NETWORK:
sample.php

#キャッシュ・ファイルが読み込めなかった時の代替ファイルを指定するセクション
FALLBACK:
error.html


この記事が気に入ったらサポートをしてみませんか？