タグをよく見て、どのように使うかを定義したことがありますか？
2022-01-28 14:51:16
プリアンブル
今日は "あなたは今まで <!DOCTYPE> タグを注意深く理解しましたか" と聞かれました。W3cschool の冒頭で XHTML Transitional DTD の使用を推奨し、その後素直に Dreamweaver の HTML 文書タイプを XHTML 1.0 Transitional に初期設定したので固まったんです。大人になればなるほど怠惰になり、いろいろなことが無意識のうちに当たり前になってしまう。と聞かれたので、情報を探してきてまとめてみましたので、メモとして残しておきます。
DOCTYPE>の定義。 :
DOCTYPE>宣言は、文書の一番上、<html>タグの前にあります。このタグは、文書がどの HTML または XHTML 仕様を使用しているかをブラウザに知らせます。
このタグは3種類のDTDを宣言することができ、Strict、Transitional、Framework-basedの3種類のHTMLを表します。(文書内のマークアップが doctype 宣言で指定された DTD に従っていない場合、その文書はブラウザで正しく表示されないだけでなく、コード検証にも失敗する可能性があります)。
DOCTYPE>の使用法。
<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">parsing : 上記の宣言では、文書のルート要素がhtmlであり、それは"-/W3C/DTD XHTML 1.0 Strict//EN" と定義された公開識別子をもつDTDに定義されていると宣言されているのです。ブラウザは、この公開識別子と一致するDTDを見つける方法を理解し、見つからない場合は、公開識別子に続くURLをDTDを見つける場所として使用します。
- インターネット技術タスクフォース（IETF）およびワールドワイドウェブコンソーシアム（W3C）は、ISOに登録されていない組織です。
+ はデフォルトで、組織名が登録されていることを示します。
DTD : 公開テキストクラス、すなわち参照するオブジェクトの種類を指定します。デフォルトはDTDです。
HTML : 公開テキストの記述、すなわち参照される公開テキストに対する一意の記述名を指定する。その後にバージョン番号が続くこともあります。デフォルトは HTML です。
URL : 参照されるオブジェクトの位置を指定する。
Strict : W3Cの専門家が段階的に廃止したいと考えている代表的な属性や要素をすべて除外します。
3つのHTMLドキュメントタイプ。
HTML4.01では3つの文書型が規定されています。Strict、Transitional、Framesetの3つの文書型を規定しています。
a ) プレゼンテーション層の乱雑さを排除したクリーンなマークアップが必要な場合は、HTML Strict DTD タイプを使用します。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
b ) Transitional DTDには、W3Cがスタイルシートに移行させることを期待しているレンダリング属性や要素が含まれている場合があります。ユーザーがカスケーディング・スタイル・シート（CSS）をサポートしていないブラウザを使用していて、HTMLのレンダリング機能を使用しなければならない場合、Transitional DTDタイプを使用します。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
c ) Frameset DTDは、フレームを使用する文書に使用される。Frameset DTDは、frameset要素がbody要素に取って代わることを除いて、Transitional DTDと同等である。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
3つのXML文書タイプ :
XHTML 1.0では、3つのXML文書型が規定されています。Strict、Transitional、Frameset の 3 種類の XML 文書型が規定されています。
a ) プレゼンテーション層の乱雑さを排除したクリーンなマークアップが必要な場合は、XHTML Strict DTD タイプを使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b ) Transitional DTDには、W3Cがスタイルシートに移行させることを期待しているレンダリング属性や要素が含まれている場合があります。ユーザーがカスケーディング・スタイル・シート（CSS）をサポートしていないブラウザを使用していて、HTMLのレンダリング機能を使用しなければならない場合、Transitional DTDタイプを使用します。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">.XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd。
c ) Frameset DTDは、framesetを用いた文書に使用される。Frameset DTDは、frameset要素がbody要素に置き換わる以外は、Transitional DTDと同等である。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"& gt;
正しいdoctypeを選択する :
正しいdoctype宣言を得るためには、ドキュメントが準拠している規格に対応するdtdを取得することがポイントになります。
例えば、文書がxhtml 1.0 strict規格に準拠していると仮定すると、文書のdoctype宣言は対応するdtdを参照する必要があります。
一方、doctype宣言でxhtml dtdを指定しているのに、文書に旧来のhtmlマークアップが含まれている場合は不適切であり、同様にdoctype宣言でhtml dtdを指定しているのに、文書にxhtml 1.0 strictマークアップが含まれている場合は、やはり不適切であると言えます。
有効なdoctype宣言が指定されていない場合、ほとんどのブラウザは組み込みのデフォルトdtdを使用します。この場合、ブラウザは組み込みのdtdを使用して、指定したマークアップを表示しようとします（ただし、これはページの書き方が悪い場合に起こることです）。
Jingdong、Taobao、Bloglandを見た後、すべてこれを使用しています（私もいつも使っています）。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
しかし、BaiduやGoogleでは "<!doctype html>" を使っていることがわかったので、さらによく調べてみると、HTML5もこれをそのまま使っているが、HTML5はSGMLベースではないので、DTDは不要であることがわかった
を参照していますが、doctypeはブラウザの動作を規制するために（ブラウザにあるべき動作をさせるために）必要です。
今後、"<!doctype html>"を直接使用することをお勧めします。<！doctype html>を使用すると、ブラウザの標準互換モードがオンになり、他のバージョン（IE6以前、それを無視するだけ）との互換性は保証されていませんが、互換性を保つために、文書の描画動作がInternet Explorerの将来とは異なる場合があります、それを使用するにはお気軽に〜〜...。
ヒント
XHTML 1は、前方互換性のないフォーマットであるHTML 4.01をXML化したものです。
HTML 4.01のdoctypeは、HTML 4.01がSGMLをベースにしているため、DTDを参照する必要があります。
SGMLは、文書に記述用のタグを埋め込むための標準形式と、文書の構造を記述するための標準的な方法を規定しており、現在WEB上で使われているHTMLの形式は、固定されたタグ群を使ったSGML文書である。
今日は "あなたは今まで <!DOCTYPE> タグを注意深く理解しましたか" と聞かれました。W3cschool の冒頭で XHTML Transitional DTD の使用を推奨し、その後素直に Dreamweaver の HTML 文書タイプを XHTML 1.0 Transitional に初期設定したので固まったんです。大人になればなるほど怠惰になり、いろいろなことが無意識のうちに当たり前になってしまう。と聞かれたので、情報を探してきてまとめてみましたので、メモとして残しておきます。
DOCTYPE>の定義。 :
DOCTYPE>宣言は、文書の一番上、<html>タグの前にあります。このタグは、文書がどの HTML または XHTML 仕様を使用しているかをブラウザに知らせます。
このタグは3種類のDTDを宣言することができ、Strict、Transitional、Framework-basedの3種類のHTMLを表します。(文書内のマークアップが doctype 宣言で指定された DTD に従っていない場合、その文書はブラウザで正しく表示されないだけでなく、コード検証にも失敗する可能性があります)。
DOCTYPE>の使用法。
<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">parsing : 上記の宣言では、文書のルート要素がhtmlであり、それは"-/W3C/DTD XHTML 1.0 Strict//EN" と定義された公開識別子をもつDTDに定義されていると宣言されているのです。ブラウザは、この公開識別子と一致するDTDを見つける方法を理解し、見つからない場合は、公開識別子に続くURLをDTDを見つける場所として使用します。
- インターネット技術タスクフォース（IETF）およびワールドワイドウェブコンソーシアム（W3C）は、ISOに登録されていない組織です。
+ はデフォルトで、組織名が登録されていることを示します。
DTD : 公開テキストクラス、すなわち参照するオブジェクトの種類を指定します。デフォルトはDTDです。
HTML : 公開テキストの記述、すなわち参照される公開テキストに対する一意の記述名を指定する。その後にバージョン番号が続くこともあります。デフォルトは HTML です。
URL : 参照されるオブジェクトの位置を指定する。
Strict : W3Cの専門家が段階的に廃止したいと考えている代表的な属性や要素をすべて除外します。
3つのHTMLドキュメントタイプ。
HTML4.01では3つの文書型が規定されています。Strict、Transitional、Framesetの3つの文書型を規定しています。
a ) プレゼンテーション層の乱雑さを排除したクリーンなマークアップが必要な場合は、HTML Strict DTD タイプを使用します。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
b ) Transitional DTDには、W3Cがスタイルシートに移行させることを期待しているレンダリング属性や要素が含まれている場合があります。ユーザーがカスケーディング・スタイル・シート（CSS）をサポートしていないブラウザを使用していて、HTMLのレンダリング機能を使用しなければならない場合、Transitional DTDタイプを使用します。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
c ) Frameset DTDは、フレームを使用する文書に使用される。Frameset DTDは、frameset要素がbody要素に取って代わることを除いて、Transitional DTDと同等である。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
3つのXML文書タイプ :
XHTML 1.0では、3つのXML文書型が規定されています。Strict、Transitional、Frameset の 3 種類の XML 文書型が規定されています。
a ) プレゼンテーション層の乱雑さを排除したクリーンなマークアップが必要な場合は、XHTML Strict DTD タイプを使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b ) Transitional DTDには、W3Cがスタイルシートに移行させることを期待しているレンダリング属性や要素が含まれている場合があります。ユーザーがカスケーディング・スタイル・シート（CSS）をサポートしていないブラウザを使用していて、HTMLのレンダリング機能を使用しなければならない場合、Transitional DTDタイプを使用します。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">.XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd。
c ) Frameset DTDは、framesetを用いた文書に使用される。Frameset DTDは、frameset要素がbody要素に置き換わる以外は、Transitional DTDと同等である。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"& gt;
正しいdoctypeを選択する :
正しいdoctype宣言を得るためには、ドキュメントが準拠している規格に対応するdtdを取得することがポイントになります。
例えば、文書がxhtml 1.0 strict規格に準拠していると仮定すると、文書のdoctype宣言は対応するdtdを参照する必要があります。
一方、doctype宣言でxhtml dtdを指定しているのに、文書に旧来のhtmlマークアップが含まれている場合は不適切であり、同様にdoctype宣言でhtml dtdを指定しているのに、文書にxhtml 1.0 strictマークアップが含まれている場合は、やはり不適切であると言えます。
有効なdoctype宣言が指定されていない場合、ほとんどのブラウザは組み込みのデフォルトdtdを使用します。この場合、ブラウザは組み込みのdtdを使用して、指定したマークアップを表示しようとします（ただし、これはページの書き方が悪い場合に起こることです）。
Jingdong、Taobao、Bloglandを見た後、すべてこれを使用しています（私もいつも使っています）。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
しかし、BaiduやGoogleでは "<!doctype html>" を使っていることがわかったので、さらによく調べてみると、HTML5もこれをそのまま使っているが、HTML5はSGMLベースではないので、DTDは不要であることがわかった
を参照していますが、doctypeはブラウザの動作を規制するために（ブラウザにあるべき動作をさせるために）必要です。
今後、"<!doctype html>"を直接使用することをお勧めします。<！doctype html>を使用すると、ブラウザの標準互換モードがオンになり、他のバージョン（IE6以前、それを無視するだけ）との互換性は保証されていませんが、互換性を保つために、文書の描画動作がInternet Explorerの将来とは異なる場合があります、それを使用するにはお気軽に〜〜...。
ヒント
XHTML 1は、前方互換性のないフォーマットであるHTML 4.01をXML化したものです。
HTML 4.01のdoctypeは、HTML 4.01がSGMLをベースにしているため、DTDを参照する必要があります。
SGMLは、文書に記述用のタグを埋め込むための標準形式と、文書の構造を記述するための標準的な方法を規定しており、現在WEB上で使われているHTMLの形式は、固定されたタグ群を使ったSGML文書である。
関連
-
ハートビート・エフェクトのためのHTML+CSS
-
HTML+cssのボックスモデル例（円、半円など）「border-radius」使いやすい
-
html to pdf スクリーンショット保存機能実装
-
HTMLの3つのボーダー設定方法を説明する
-
html-webpack-plugin' を使用して html ページをインメモリで生成するプラグインです。
-
入力ボックススタイル変更概要のtype="file "について
-
htmlのテキスト回り込みの例（html mixed text)
-
htmlで冗長なテキストを省略記号に変換する方法
-
ウェブデザインにおけるラウンドエレメントの使用例25選
-
HTML 特殊な分割線エフェクトをいくつか紹介します。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
html+css レスポンシブカードホバー効果用
-
html フォーム入力で無効化されたソリューションを使用した後、フォームの値を取得することができない
-
ダブル11クーポンのHTML実装（クーポンページを開くまでの時間設定）
-
overflow: hiddenを使用して、ページのスクロールバーを無効にします。
-
iframe を使用せずに html を入れ子にした div
-
htmlのテーブルの行と列を結合する問題を解決する。
-
画像ボタンをリセットフォームボタンとして使用する方法
-
IEとFFでスペースの幅を同じにするには？
-
親ディレクトリ、子ディレクトリのHTML相対パス指定
-
ウェブサイトにファビコンを追加するためのヒント ウェブサイトの前に小さなアイコンを設置する