HP制作
- 2024/2/9
- 2023/12/21
【厳選】おすすめの入力フォーム作成ツール10選!無料...
監修者プロフィール
「DTD宣言とはなに?」
「なぜDTD宣言が必要なのか?」
「DTD宣言の記述方法が知りたい」
この記事を読んでいるということは、上記のようなお悩みがあるのではないでしょうか?
DTD宣言は、HTMLの一番初めに記述されている文書ですが、なんとなくコピペで使っている方も多いのではないでしょうか?
DTD宣言を行い正しいタグで記述することはSEO対策にも繋がりますので、本記事でDTD宣言について詳しく学びましょう!
ホームページ開設方法と手順・正しい企業HPの作り方について知りたい方は以下の記事を参照してください。
参考記事:ホームページ開設方法と手順を公開【正しい企業HPの作り方とは】
INDEX
DTD宣言とは、HTMLを記載する際にどのバージョンで記述するかをHTMLファイルの冒頭で宣言することです。
HTMLには下記のようなバージョンがあり、それぞれルールに従ってDTD宣言をする必要があります。
HTML4.01 | 1999年に勧告されたHTML |
XHTML1.0 | 2000年に勧告されたHTML |
HTML5 | 2014年に勧告された現在の最新バージョン |
HTMLのバージョンごとに使用できる要素(タグ)や属性の名前などの情報が定義されており、ルールに従ってDTD宣言を行うことでレイアウトが崩れるリスクを減らすことができます。
HTMLは非営利団体「W3C」が管理をしています。
「W3C」とは、1994年に設立された非営利団体で、WEB技術の標準化を目的としています。
HTMLの他にもXHTML、CSS、DOM(Document Object Model)やXML(Extensible Markup Language)など多くの仕様が公開されています。
仕様が「HTML5」以降のバージョン場合のDTD宣言は下記の通りです。
DTD宣言には、ブラウザ表示モードを切り替える機能もあります。
ブラウザ表示モードには、「完全標準準拠モード」「互換モード」の2種類があり、HTML5以降でDTD宣言を行うと「完全標準準拠モード」にてブラウザの表示が可能となります。
2つの表示モードの違いは下記の通りです。
完全標準準拠モードは新しい仕様に準拠している表示モードです。
仕様書通りに動作します。
完全標準準拠モードは、HTMLにおいて、新しい仕様に準拠しているため異なるブラウザでもレイアウトが統一されることが多くなるモードです。
互換モードとは、古いブラウザと互換をする表示モードです。
言語の解釈が正しくされず、レイアウトが崩れる可能性があります。
HTMLのバージョンがHTML5以前の場合のdtd宣言を紹介します。
現在、HTML5が主流となっているため、昔に作られたホームページの編集をする際に必要となるので理解しておきましょう。
HTML5以前のHTMLには、Strict(厳密)、Transitional(緩め)、Frameset(フレーム設定可能)の3つの種類があり、それぞれDTD宣言の記述が異なります。
Strictは、ルールに厳格なDTDです。
非推奨とされている要素・属性については使用できず、フレーム(1ページに2つ以上のページを同時表示するタグ)も使用することができません。
記載するDTD宣言は下記の通りです。
Transitionalは、Strictよりも緩やかな指定のDTDです。
非推奨とされている要素・属性が利用できますが、フレームに関しては使用することができません。
記載するDTD宣言は下記の通りです。
Framesetは、非推奨とされている要素・属性の仕様に加え、フレームも使用できるDTDです。
記載するDTD宣言は下記の通りです。
HTMLでのホームページ制作に苦戦している方は、HTMLのテンプレートを使うのも有効です。
詳しくは、下記記事を参考にして下さい。
関連記事:ホームページテンプレートサイト11選【HPテンプレートの全てが分かります】
「DTD宣言とは」について紹介しました。
今回のポイントは下記の通りです。
今回紹介したポイントを抑えて、HTMLのバージョンを理解し、正しいDTD宣言を行いましょう。
HTML使ったホームページ制作でお悩みの方は、是非弊社まで一度ご相談下さい。
弊社では、コンセプト設計も兼ねた0からのホームページ制作が可能となっています!
監修者プロフィール
HP制作
【厳選】おすすめの入力フォーム作成ツール10選!無料...
HP制作
ホームページ作成を個人・フリーランスへ依頼した場合の...
HP制作
【塗装会社】集客ができるホームページ制作のコツ!おし...
HP制作
【製造業】集客ができるホームページ制作のポイント!成...
HP制作
ホームページ制作の費用について詳しく説明!相場の紹介...
HP制作
ホームページ作成時の注意点とは?自作する場合におすす...