Webページには、ページに表示されている要素以外にもいろいろな要素が使われています。
Webサイトに使用するhtmlファイルには、基本的な構造があります。Webページを記述する際に使われる定型的な記述、いわゆる空のWebページです。
htmlの言語定義に依存するhtmlファイルの記述があります。これは、変更する部分がありません。そこに、ほとんど変更しない記述を加えて、空のWebページとして使用します。
html5未対応のブラウザに対応している定型的な記述の例
<!DOCTYPE html>
<!-- 使用するhtmlのバーションを示します -->
<html lang="ja">
<!-- html文書であることを示します -->
<head>
<!-- Webブラウザに表示されない内容を指定します -->
</head>
<body>
<!-- Webブラウザで表示される内容を示します -->
</body>
</html>
<!--[if 条件式]>
（中身）
<!--[endif]
<!--[if 7]>
<p>この部分は、Internet Explorer 7だけに認識されます。</p>
<!--[endif]
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ja">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="[サイト運営者の名前、あるいは、組織名]">
<title>Document</title>
<meta name="description" content="ページの内容の概要を記入します。">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<footer>
<p>「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」</p>
<p>ご連絡の際は、お問い合わせページのURLの明記をお願いします。<address>xxxx＠xxxx.com</address></p>
<p>Copyright (C) 2018 [サイト運営者の名前、あるいは、組織名] All Rights Reserved.</p>
</footer>
</body>
</html>Webページの基本構造
どのWebページにも使われてるhtmlを使ったWebページの構造があります。大きくは、以下のようになります。
<!DOCTYPE html>
<!-- 使用するhtmlのバーションを示します -->
<html lang="ja">
<!-- html文書であることを示します -->
<head>
<!-- Webブラウザに表示されない内容を指定します -->
</head>
<body>
<!-- Webブラウザで表示される内容を示します -->
</body>
</html>htmlで記述されたページであることを示す
Webページを記述するためには、htmlを使用します。そのため、まず、最初に、使用するhtmlのバーションを示します。
<!DOCTYPE html><!DOCTYPE html>は、html 5（html 5.1を含む）記述されていることを示します。一番最初に記述します。
htmlタグで囲み、htmlを使ってWebページを記述する
その後のhtmlタグを追加し、その中に、htmlで、Webページの内容を記述します。 lang属性で、Webページ内で記述する言語を指定する場合が多いです。日本語の場合、jaあるいはja-jpを指定します。
htmlタグ内には、headとbodyタグが存在する
htmlタグ内には、Webブラウザに表示するための表示されない内容を記述するheadタグとWebブラウザに表示する内容を記述するbodyタグが存在します。
headタグ内に記述する内容
headタグに記述された内容は、ブラウザには、表示されませんが、Webページを表示するために必要な内容が記述されています。
headタグの内容は、必要最低限のものを記述しておき、後は、必要に応じて追加していけば問題ありません。
使用する文字コード
文字コードは、utf-8です。日本語環境では、html4以前は、shift-jisが使われてきましたが、html5では、utf-8が使われています。
<meta charset="utf-8">ビューポート
Webサイトは、パソコンで閲覧するものでしたが、スマートフォンでも閲覧されるようになってきました。スマートフォンは、画面のサイズが小さいのにもかかわらず、画面の解像度は、パソコンとほとんど変わりません。そのため、パソコンと同じように表示すると文字が小さくて読み取ることができません。そこで、端末を識別して、拡大して表示させる機能があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">この設定を追加することで、小さい画面の端末では、拡大して表示されます。
画面のサイズによって、レイアウトを変更する場合は、レスポンシブWebデザインの導入を考えてください。
X-UA-Compatible
ブラウザに、Internet Explorerを使用する際、どのバージョンのモードでレンダリングを行うか(ドキュメントモード)を指定することができるプラグマです。
指定する必要があるかについても、諸説あります。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">著者名
記事を執筆した人、あるいは、サイト運営者の名前を記述します。
<meta name="author" content="[サイト運営者の名前、あるいは、組織名]">タイトル
Webページのタイトルです。お気にいり、ブックマークのタイトルに使われたり、タブやラベルの名前に使用されます。
概要
Webページの概要を記述します。検索エンジンの検索結果にWebサイトの説明として使用されることが多いです。それぞれのページに異なる概要を記述しましょう。
<meta name="description" content="ページの内容の概要を記入します。">キーワード
以前は、検索エンジン検索項目として使われていたのですが、現在では、検索エンジンには反映されません。そのため、必要性がかなり低下しており、利用しない人も増えています。複数指定する際は、コンマで区切ります。
<meta name="keywords" content="keyword01,keyword02,keyword03,keyword04">使用するスタイルシート(css)
使用するスタイルシートとパスを指定します。パスがきちんと指定されている必要があります。 通常は、ノーマライズcssを指定し、続いて、自分が使用するcssを指定します。
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">html5に対応していないブラウザに対応する方法
html5が登場してから、時間が立っているため、html5に対応していないブラウザに対応する必要性は、低くなっています。
コンディショナル・コメント
コンディショナル・コメントは、条件付きコメントと呼ばれ、Internet Explorerの7-9で使われていました。10では廃止されています。主に、古いブラウザでできるだけ適切にWebページの内容を表示させるために使用します。しかし、Internet Explorer自体、既に開発が終了（Edgeに移行）しているので、コンディショナル・コメントを使用して、古いブラウザに対応する必要は、なくなっています。
コンディショナル・コメント（条件付きコメント）は、Internet Exploer独自の仕様です。コメントに条件を記載することで、囲まれた部分の適用、非適用を選択できます。Internet Exploer10以降では、この機能は廃止されています。
<!--[if 条件式]> 中身 <![endif]-->対象バージョンを指定して、クラスを追加しています。追加したクラスを利用して、cssで別のスタイルを指定します。
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->IE 9以下で、JavaScript「respond.min.js」と「html5shiv.js」を実行する。パスは、ファイルの位置に応じて変更して下さい。
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.js"></script>
<![endif]-->| lt | lte | gt | gte | ! |
|---|---|---|---|---|
| 未満 | 以下 | より以上 | 以上 | 除く |
html5shiv.js
html5shiv.jsは、html5に対応していないブラウザに、html5タグを認識させるためのポリフィルです。
respond.min.js
respond.min.jsは、Internet Exploer8以下に、メディアクエリを対応させるためのポリフィルです。
他に、css3-mediaqueries-jsがあります。
