XHTML チュートリアル: Transitional と Strict の違い

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTYPE の 2 つのタイプ (Frameset DOCTYPE が含まれている場合は 3 つになりますが、これについてはこの記事では説明しません) に分かれています。 HTML 4.01 にも同じドキュメント宣言があります。
今日、Web 標準を推進する人たちは、XHTML は HTML よりも厳格であると言うことがよくあります。もちろん、ある意味ではそうです。たとえば、すべてのタグを閉じ、すべての属性を引用符で囲む必要があります。しかし実際には、XHTML 1.0 は Transitional DOCTYPE と Strict DOCTYPE の 2 つのタイプ (Frameset DOCTYPE が含まれる場合は 3 つ、この記事では説明しません) に分かれています。 HTML 4.01 にも同じドキュメント宣言があります。

意味は文字通りの名前からわかります。Transitional DOCTYPEs は旧時代から新時代への移行のみを対象としており、Strict DOCTYPEs は HTML 4.01 および XHTML 1.0 の構築に適用可能なデフォルトのドキュメント宣言です。
コードには古い記述方法が多すぎるため、一度に Strict DOCTYPE に完全に変換することが難しいため、一般的に Transitional DOCTYPE が使用されます。しかし、厳密な DOCTYPE が目標となるはずです。構造とプレゼンテーションを分離し、プレゼンテーション コードを CSS で記述することが推奨され、場合によっては強制されることもあります。 HTML 4 ドキュメントタイプ定義:

この HTML 4.01 Strict DTD には、プレゼンテーション レイヤーの属性とタグは含まれていません。W3C は、これらの属性とタグを段階的に廃止する予定です。これらを実装するには、スタイル シートを使用できます。 Strict DTD を使用する必要があります。プレゼンテーション属性とタグのサポートを得るには、Transitional DTD を使用します。

Strict DOCTYPE を使用すると、ブラウザにページを最も厳密かつ (ある程度) 最も標準に準拠したモードでレンダリングするように指示できるという追加の利点があります。
Tommy Olsson 氏は、Web Standards Group の Tommy Olsson 氏への 10 の質問で、Strict を使用する利点を詳しく説明しています。

HTML 4.01 Strict であろうと XHTML 1.0 Strict であろうと、Strict DTD を使用することは、HTML を使用するか XHTML を使用するかを議論することよりもはるかに重要だと思います。それは将来のインターネットの品質を表しています。構造とプレゼンテーションを分離することで、サイトのメンテナンスが非常に簡単になります。

Web 標準と適切なセマンティック構造を初めて知る人にとって、Transitional DOCTYPE と Strict DOCTYPE の違いを認識することは重要です。より詳細なリストについては、「XHTML: Strict と Transitional の違い」、「Strict XHTML と Transitional XHTML の比較」、および「DTD による XHTML1.0 要素属性」を参照してください。
Strict に移行する準備ができている人にとって、開発者が間違いを犯す可能性のある 2 つの違いがいくつかあります。これについては次に説明します。 Strict DOCTYPE でサポートされていないタグ center font iframe srike u Strict DOCTYPE でサポートされていない属性 align (table 関連でサポート: col、colgroup、tbody、td、tfoot、th、thead、tr) language background bgcolor border (table でサポート) height (img と object でサポート) hspace name (HTML 4.01 Strict でサポート、XHTML 1.0 Strict の form と img ではサポートされていない) noshade nowrap target text、link、vlink、alink vspace width (img、object、table、col、colgroup でサポート) コンテンツ モデルの相違点 要素タイプのコンテンツ モデルは、その要素タイプのどのようなインスタンスを含めることができるかを説明します。この点において、2 つのドキュメント宣言の最大の違いは、blockquote、body、および form 要素には次のようなブロック レベル要素のみを含めることができることです。テキストと画像は body に直接含めることができず、p や div などのブロック レベル要素によって含める必要があります。入力要素は、form 要素の次のレイヤーに直接含めることはできません。blockquote 要素内のテキストは、p や div などのブロック レベル要素によって含める必要があります。すべてのプレゼンテーションを CSS に任せ、Strict 標準に準拠します。Strict DOCTYPE への移行プロセスでは、各要素がどのように見えるかを知るよりも、各要素が何をするのかを理解する方がはるかに効果的です。
まず構造とセマンティクスについて考え、次にパフォーマンスについて考えます。

<<:  Vueはデジタル千単位区切り形式をグローバルに実装します

>>:  一般的な nginx コマンドをシェル スクリプトに組み込む方法の詳細な説明

推薦する

HTML チュートリアル: 定義リスト

<br />原文: http://andymao.com/andy/post/104.h...

要素 el-button ボタンコンポーネントの使用の詳細な説明

1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...

Centos8 でローカル Web サーバーを構築するための実装手順

1 概要システム Centos8 では、httpd を使用してローカル Web サーバーを構築します...

CSS でテキストシャドウと要素シャドウ効果を使用する

テキストシャドウの紹介CSSでは、 text-shadowプロパティを使用してテキストの影を設定しま...

Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題

目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

HTML の小さなタグの使用に関するヒント

<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

Linux仮想マシンをWiFiに接続する方法

生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...

Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...

MySQLの高可用性アーキテクチャの詳細な説明

目次導入MySQL 高可用性マスター 1 つとバックアップ 1 つ: MySQL マスター スレーブ...

Linux での MySQL データベースのアンインストール

Linux で MySQL データベースをアンインストールするにはどうすればいいですか? 以下では、...