Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●HTMLのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №07 > №00 > END

№1.詳細説明HTML、ページ基本構造

№1.詳細説明HTML、ページ基本構造

01HTML

HTMLとは「Hyper Text Markup Language」の略で、W3C(World Wide Web Consortium)が作成している規格です。 Webページを記述するマークアップ言語のことをいいます。W3Cとは、世界のホームページの規格を策定している機関です。 W3CはHTMLの規格を共通化するためHTML4.0/4.0以降、HTMLの構造の書式と装飾の書式を分離するよう勧告していますが、 急に対応させることは困難と予想し、HTML 4.01以降、規制のレベルによって「Strict」「Transitional」「Frameset」の 3つのタイプを用意し、HTMLを使い分けられるようにしました。 この3つのタイプの定義をDTD(Document Type Definition)と呼びます。

02DTD(Document Type Definition)

DTDとは、「Document Type Definition」の略で、HTML4.01の規制レベルによって「Strict」「Transitional」「Frameset」の3つのタイプの定義を使い分けられるようにしました。 「Strict DTD」は、構造のみの書式(HTML)と装飾の書式(CSS)を分けて記述します。この宣言を行うと、HTML4.01で非推奨とされている要素や属性等を使用することができませんのでご注意下さい。 「Transitional DTD」は、文字書式等、構造の書式(HTML)上に設定することができます。ただし、Transitional DTDで使えてStrict DTDで使えない要素はW3Cでは非推奨としており、バージョンアップに伴い将来使えなくなるおそれがあります。 「Frameset DTD」は、フレームを使ったページの作成で使用します。この宣言を行ったHTMLには<body>要素の変わりに<frameset>要素を使用します。 さらに、ブラウザには「標準モード」と「互換モード」という表示モードが備わっており、DOCTYPE宣言文にURIを記述するかしないかによって表示するモードが切り替わる仕組みになっています。 DOCTYPE宣言文にURIを記述する(標準モード)は、文法を正しく解釈する表示モードです。文法ミスは無視されてブラウザに表示します。 DOCTYPE宣言文にURIを記述しない(互換モード)は、過去のHTMLのバージョンと互換性のある表示モードです。文法ミスはブラウザがカバーして表示します。 *Strictでは、URIが無くても標準モードになります。

03非推奨

W3CではHTML4.0以降、HTML文書では文字情報や構造の設定を行い、見栄え等の設定はCSS文書で設定するという方向付けをしました。 そのため、HTML3.2以前で使用されていた見栄えを定義する要素や属性をHTML文書で定義することは、 4.0以降の方向性に反するとしてW3Cでは現在、非推奨としています。今後、HTMLのバージョンアップに伴い使用できなくなる可能性があります。 (W3CではHTML4.0の不具合を修正したバージョンとしてHTML4.01を使用するよう奨めています。)

04XHTMLを宣言した場合

DOCTYPE宣言文で、HTMLを宣言した場合は、空要素に終了タグは必要ありませんでした。また、属性の値の設定が省略可能な属性もありました。 しかし、XHTMLを宣言した場合は、終了タグが必要となります。<br />のように、「<」「要素名」の後に「スペース」と「/」を記述し「>」で閉じます。 また、属性の値を省略することもできませんので、disabled="disabled"のように値を設定しなくてはなりません。

05ブロック要素とインライン要素

ブロック要素とは、段落や表、見出し等のように、文章の構成をするための要素です。 また、ブロック要素には、インライン要素や他のブロック要素等を含めることができます。 インライン要素とは、リンクや文字の強調、文字の装飾等をするための要素です。 また、インライン要素には、他のインライン要素を含めることはできますが、ブロック要素を含めることはできません。

06<html>要素は、HTML文書であることを定義する要素です。

<html>要素は、HTML文書であることを定義する要素です。 文書の最初と最後に記述しますが、<!DOCTYPE>は<html>要素の前に記述します。 他の要素(<head>、<body>等)は<html>~</html>の間に記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id(xhtml 1.0、xhtml basicのみ)、lang、dir、xml:lang


<html>~</html>
属性
属性名 解説
lang ja 日本語を使用言語に指定
en 英語を使用言語に指定
en-us アメリカ英語を使用言語に指定
en-gb イギリス英語を使用言語に指定
zh 中国語を使用言語に指定
ko 韓国語を使用言語に指定
de ドイツ語を使用言語に指定
fr フランス語を使用言語に指定
it イタリア語を使用言語に指定
nl オランダ語を使用言語に指定
pt ポルトガル語を使用言語に指定
es スペイン語を使用言語に指定
pl ポーランド語を使用言語に指定
el ギリシャ語を使用言語に指定
ru ロシア語を使用言語に指定
he ヘブライ語を使用言語に指定
hi ヒンディー語を使用言語に指定
ar アラビア語を使用言語に指定
la ラテン語を使用言語に指定
sw スワヒリ語を使用言語に指定
<html lang="ja">
dir ltr 文書の方向を左から右へ指定(日本語等)
rtl 文書の方向を右から左へ指定(アラビア語等)
<html dir="ltr">
xmlns http://www.w3.org/1999/xhtml ネームスペースの指定
*xhtmlのみで使用します
<html xmlns="http://www.w3.org/1999/xhtml">
※HTML

サンプルコード

<html> <head>ヘッダ</head> <body>本文></body> </html
※★sample
★①061サンプル

07<head>要素は、ページのヘッダを定義する要素です。

<head>要素は、ページのヘッダを定義する要素です。 文書全体に関する情報(<meta>、<title>等)を記述します。 タイトル以外のほとんどの内容はブラウザ上には表示されません。 <head>~</head>は、<body>~</body> もしくは<frameset>~</frameset>の前に記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id(xhtml 1.0、xhtml basicのみ)、lang、dir、xml:lang

※HTML

<head>~</head>
サンプルコード

<html> <head> <title>ページタイトル</title> </head> <body>本文</body> </html>
※★sample
★①071サンプル

08<title>要素は、ページにタイトルを付けるための要素です。

<title>要素は、ページにタイトルを付けるための要素です。 <title>要素で設定したタイトルは、ブラウザのタイトルバー、 検索エンジンの検索結果、ブックマーク・お気に入りのタイトル等として表示されます。 そのため、そのページのトピックが何であるかをわかりやすく記述することが重要です。 また、SEO対策としてもサイト内のページには個々のタイトルを付けることが理想的です。 <title>要素は、<head>~</head>の中に記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id(xhtml 1.0、xhtml basicのみ)、lang、dir、xml:lang

※HTML

<title>~</title>
サンプルコード

<html> <head> <title>HTMLリファレンス- 60プラスワン</title> </head> <body>本文</body> </html>
※★sample
★①081サンプル

09<body>要素は、ページの内容を記述します。

<body>要素は、ページの内容を記述します。 <body>要素には、ページの基本的な配色(背景色、文字色、リンク色)も設定することができますが、 これらの属性はHTML4.01では非推奨とされていますので、CSSスタイルシート内で定義することをおすすめします。 <body>~</body>は、<head>~</head>の後に記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

※HTML

<body>~</body>
サンプルコード

<html> <head>ヘッダ</head> <body>本文</body> </html>
※★sample
★①091サンプル

10<link>要素は、関連する別ページとの関係を示す要素です。

<link>要素は、関連する別ページとの関係を示す要素です。(終了タグがない空要素です。) <link>要素は、<head>~</head>の中に記述します。 XHTMLを宣言した場合の注意点

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang


<link>
属性
属性名 解説
href url 関連する文書のurlを指定
<link rel="index" href="exlink.html" />
type mineタイプ 関連する文書のタイプを指定
<link rel="stylesheet" href="exlink.css" type="text/css" />
target フレーム名 関連する文書を表示させるフレーム名を指定
<link href="exlink.html" target="exflame" />
hreflang 言語コード 関連する文書の言語コードを指定
<link href="exlink.html" hreflang="ja" />
charset 文字コード 関連する文書の文字コードを指定
<link href="exlink.html" charset="shift_jis" />
media メディアタイプ 関連する文書が出力するメディアタイプを指定
<link href="exlink.html" media="print" />
rel リンクタイプ 参照先の文書との関係を指定
<link rel="help" href="exhelp.html" />
rev リンクタイプ 参照先の文書から見た関係を指定
<link rel="prev" href="exindex.html" />
rel、rev属性の値(リンクタイプ)
説明
alternate 代替として使用するページ(オルタネイト)
appendix 付録のページ(ぁペンディクス)
bookmark ブックマーク
chapter 章()
contents 目次
copyright 著作権
glossary 用語解説(グラサり)
help ヘルプ
index 索引
next 次ページ
prev 前ページ
section
start 最初のページ
stylesheet スタイルシート
subsection
shortcut icon お気に入りやブラウザのアドレスバーにアイコンを表示
※relのみ対応
※HTML

サンプルコード

<html> <head> <title>ページタイトル</title> <link rel="contents" href="example.html" /> <link rel="shortcut icon" href="favicon.ico" type= "image/vnd.microsoft.icon" /> </head> <body>本文</body> </html>
※★sample
★①101サンプル

11<hr>要素は、HTML内に水平線を表示する要素です。

<hr>要素は、HTML内に水平線を表示する要素です。(終了タグがない空要素です。) <hr>要素では、罫線の色や太さを設定することができますが、 これらの属性はHTML4.01では非推奨とされていますので、CSS内で定義することをおすすめします。 XHTMLを宣言した場合の注意点

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

※HTML

<hr>
サンプルコード

<html> <head>ヘッダ</head> <body> <hr /> </body> </html>
※★sample
★①111サンプル

12<!-- ~ -->は、HTML文書内にコメントを記述します。

<!-- ~ -->は、HTML文書内にコメントを記述します。 ブラウザ上に表示させたくないコードやコメントを「<!--」「-->」で囲みコメントとします。

※HTML

<!-- ~ -->
サンプルコード

<html> <head>ヘッダ</head> <body> 本文 <!-- コメント --> </body> </html>
※★sample
★①121サンプル

13xxxxxxx

13xxxxxxx

解説
○○○ ○○○○○○○○○
※HTML

★CSS
※省略