Webページの基本、HTMLのドキュメントについてです。
HTMLのドキュメントとは、ウェブブラウザで表示される文書のことです。HTMLは、文書の構造や意味を定義するマークアップ言語です。
HTMLのドキュメントは、HTML要素と呼ばれる部品で構成されます。
HTMLのバージョンを記述する
HTMLのドキュメントは、<html>で始まり、</html>で終わりますが、その前にHTMLのバージョンをDOCTYPE宣言で記述します。
<!DOCTYPE html PUBLIC “公開識別子” “システム識別子”>
「DOCTYPE宣言」DTD（Document Type Definition）は、HTMLやXHTMLの文書の先頭の行に書く必要があります。DOCTYPE宣言によって、文書がどのバージョンのHTMLに従っているかをブラウザに伝えます。
例えば、HTML5の文書であれば、以下のように記述します。
<!DOCTYPE html>
<html>
</html>HTML5でのDOCTYPE宣言は、すごくシンプルな記述です。<!DOCTYPE html>の部分はブラウザには表示されません。
DTD（Document Type Definition）は、HTMLのバージョン毎に、使用できる要素や属性が定義されたファイルです。
例えば、HTML4.01 Strict DTD（厳密型DTD）なら次のようなDOCTYPE宣言です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">互換モードとは
DOCTYPEは省略可能ですが、省略した場合、多くのブラウザでは、互換モードで表示されます。その場合、レイアウト崩れなどが発生したりするので、必ず先頭に記述する必要があります。
ほとんどのブラウザには、「標準モード」と「互換モード」の2つの表示モードがあります。
「標準モード」は、HTMLやCSSの標準仕様に準拠して表示するモードです。
「互換モード」は、古いバージョンで作成されたHTMLを、過去のブラウザと同じように表示するモードです。
「標準モード」と「互換モード」の切り替えは、HTMLのDOCTYPE宣言によって切り替えの判定が自動的に行われます。
HTML文書を記述する <html>～</html>
では、HTMLで文書を構成する基本的なタグを順番に覚えていきます。
HTML文書は、DOCTYPE宣言の次に記述します。
<!DOCTYPE html>を除くすべての文書やタグを<html>～</html>の中に記述することで、この中の記述がHTML文書であることを示します。<html>は、HTML文書の最も外側のタグです。
<html>～</html>の間には、ページの情報を記述する<head>～</head>や、ページの内容を記述する<body>～</body>などが含まれます。
lang属性で使用言語を指定する
また、lang属性で使用する言語を指定しておくと、検索エンジンや音声読み上げソフトなどが文書の言語を正しく認識できるようになります。lang属性は、以下のように記述します。
<html lang="ja">この例では、タグにlang属性で日本語（”ja-jp”でも同じ）をアルファベットで指定しています。
多言語の例は次のとおりです。
| en | 英語 | fr | フランス語 | de | ドイツ語 | it | イタリア語 |
| es | スペイン語 | zh | 中国語 | ko | 韓国語 | ja | 日本語 |
ここまでのタグ設置は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
</html>ページの基本情報を記述する <head>～</head>
<head>～</head>タグでHTML文書のヘッダーを定義します。ページの基本情報を記述する部分にあたります。文書のメタデータやスタイルシートなどを記述する場所です。
<head>～</head>内に記述する基本的なタグについては以下の段落で解説します。
<meta>ページの基本情報や詳細を記述する
<meta>タグは、HTML文書のヘッダー内に記述するタグで、文書のメタデータを定義するために使われます。<meta>タグは、閉じタグ</meta>は記述しません。
次の例は、文字コードを “UTF-8” に指定しています。
<meta charset="UTF-8">この他、name属性にキーワード（keywords）や説明文（description）などページに関すること全般をいろいろ定義することができます。
<meta name="keywords" content="キーワード">
<meta name="description" content="このWebページの説明は....">検索エンジンへの情報提供、検索の禁止設定などもここで指定します。
<meta name="robots" content="index,nofollow">上の例は、このページを検索対象とするが、ページ内のリンクをたどるのは許可しない設定です。
<title>～</title>ページのタイトルを指定する
<title>は、HTML文書のタイトルを定義するタグです。ここに定義したタイトルがブラウザのタブや履歴に表示されます。
<title>このWebページのタイトル</title><link>ページの関係を設定する
<link>は、ページのドキュメントが他のページとどのような関係にあるかを定義します。
<link rel="キーワード" href="リンク先のURL">例えば、CSSファイルなどの外部ファイルを読み込むために使われます。
<link rel="stylesheet" href="style.css">ここまでのタグの設置は、以下のように入れ子にして配置します。
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="キーワード">
<meta name="description" content="このWebページの説明は....">
<title>このWebページのタイトルを定義</title>
<link rel="キーワード" href="リンク先のURL">
<link rel="stylesheet" href="style.css">
</head>
</html>ページの詳細を記述する<body>～</body>
<body>は、HTML文書のメインコンテンツを定義するタグです。<body>～</body>の間にテキストや画像やリンクなどを記述します。
<!DOCTYPE html>
<html>
<head>
<!-- <title>や<meta>や<link>タグを設定する -->
</head>
<body>
<!-- メインコンテンツに設定するコード -->
</body>
</html><header>～</header>ヘッダーを定義する
<header>は、<h1>ページのタイトルやロゴ、ナビゲーションバーや検索フォームなどを含めた、ヘッダー部分のコンテンツを定義するために使われます。タグは、<body>タグの最初に記述する必要があります。以下は、<header>タグ部分の例です。
<body>
<header>
<h1>ページのタイトル</h1>
</header>
</body><section>～</section>コンテンツを分割する
<section>は、HTML文書のメインコンテンツを分割するために使われるタグです。記事やブログなどの長い文書を複数のセクションに分割することができます。分割した各セクションには、見出し<h2>～<h6>や段落<p>などの要素を記述します。以下は、<section>タグでメインコンテンツを2つに分割し見出しと段落を設定する例です。
<body>
<header>
<h1>ページのタイトル</h1>
</header>
<section>
<h2>見出し1</h2>
<p>段落1</p>
</section>
<section>
<h2>見出し2</h2>
<p>段落2</p>
</section>
<!-- メインコンテンツに関するコード -->
</body><footer>～</footer>フッターを定義する
<footer>は、HTML文書のフッターを定義するタグです。文書の著作権情報や問い合わせ先情報、サイトマップなどを含めた、フッター部分のコンテンツを定義するために使われます。<footer>タグは、</body>閉じタグより前に記述する必要があります。以下は、<footer>タグの例です。
<body>
<!-- メインコンテンツに関するコード -->
<footer>
<p>著作権情報</p>
<p>問い合わせ先情報</p>
<a href="sitemap.html">サイトマップ</a>
</footer>
</body>コメントにする<!– コメント –>
<!– コメント –>は、HTML文書内にコメントを記述するための方法です。
非表示に（コメント化）したい部分を <!– と –>で囲みます。
コメントは、ブラウザには表示されません。ソースコード内に<!– コメント –>を使うことで、文書の構造や設定の意味や理由などを説明することができます。
<!-- コメントを記入する -->
<!-- コメントは
行をまたいでも
OKです -->まとめ（おわりに）
今回は、Webページ「HTML」の基本構造で使用するタグについて勉強しました。
次回以降、具体的な個別の項目についてさらに勉強をすすめていきます。
Webページ「HTML」の基本構造
今回学んだタグを全部つなげると「HTML」の基本構造的な感じになるのかな(^^;
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="キーワード">
<meta name="description" content="このWebページの説明は....">
<title>このWebページのタイトルを定義</title>
<link rel="キーワード" href="リンク先のURL">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ページのタイトル</h1>
</header>
<section>
<h2>見出し1</h2>
<p>段落1</p>
</section>
<section>
<h2>見出し2</h2>
<p>段落2</p>
</section>
<footer>
<p>著作権情報</p>
<p>問い合わせ先情報</p>
<a href="sitemap.html">サイトマップ</a>
</footer>
</body>
</html>
当サイト内で使用したVBAなどのサンプルはDLできます
ダウンロードページへトップリンクは下のカードクリックでジャンプできます。
よろしければご利用ください！
