投稿日: | 最終更新日:
【HTML】HTML基本テンプレート:DOCTYPE宣言について【文法チェック】
以下がDOCTYPE宣言です。HTMLファイルの文頭に記述します。
<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
DOCTYPE宣言とは、作成したHTML文書が標準に従って正しく作成さていることを宣言するための記述です。
DOCTYPE宣言について
DOCTYPE宣言とは、細かく言えば以下のことを文頭に宣言します。
・文書がHTMLであること。
・HTML文書(HTMLソース)がどのバージョンを利用するか。
・HTML文書がどのDTD(文書型定義)に従って記述されているか。
例文
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
この場合は「HTML 4.01 バージョンを利用」して、「DTDの中のTransitionalに従って記述」するという意味になります。DTDでどのような要素や属性が使えるのかをあらかじめ定義します。そして、作成者はその定義された要素や属性使ってHTML文書を作成します。バージョンが違えば利用できる要素や属性などが異なります。 ブラウザ側は、まずこれを読んで解釈し、宣言に従って表示します。
HTMLの標準規格
「HTML 4.01」仕様では、HTML文書中にDOCTYPE宣言を記述するようにとW3C(World Wide Web Consortium)という団体が記しています。
HTMLのバージョン
HTMLの標準規格は、段階的にバージョンアップされます。「HTML 1」、「HTML 2.0」、「HTML 3.2」、「HTML 4.0」、「HTML 4.01」、「XHTML 1.1」のバージョンがあります。現在は一般的に「HTML4.01」が最も利用されています。「HTML 4.0」からは、それ以前と違い、以下のことを前提とします。
・文書の論理構造(題名、見出し、小見出し、段落、引用)を明確にすること。
・見た目のレイアウトなどはスタイルシートを使うこと。
HTMLがバージョンアップするとどうなるか?
新しくなるにつれ、文書構造の中でデザインのために使っていた要素が非推奨(廃止予定)になります。そのため、デザインの部分はスタイルシートで指定することになります。
DTDの種類
HTML4.01では、DOCTYPE宣言をする場合以下の3種類から選びます。
strict(厳密)型
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
非推奨とされた要素や属性、フレームを使っていない場合の宣言。 デザインのコントロールを指定するような要素や属性はスタイルシートで指定する。HTMLの文書構造だけを記述する宣言。
Transitional(移行)型
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
厳密型DTDのすべての要素・属性に加えて、非推奨要素や属性も使った場合の宣言。デザイン部分はスタイルシートを使うように推奨されています。現在最も一般的に使われているバージョンで、フレームには使用できない。
Frameset(フレーム設定)型
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
移行型DTDのすべての要素、属性にフレーム用の内容を使用した場合の宣言。
標準規格に沿ったページは信頼されやすい
DOCTYPE宣言をしてDTDに従って要素や属性を記述すれば、どんな環境でも表示できます。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
上記のように厳密型DTDを宣言し、その仕様通りにHTML文書を作成すれば以下の点で有利です。
・異なるブラウザでも同じ表示ができる。
・自動音声読み上げ装置、点字ディスプレイでも問題なく内容を伝えられる。
・検索エンジンに反映される。
DOCTYPE宣言を省略すると?
DOCTYPE宣言しなくても各ブラウザの仕様で表示されますので、問題はありません。ただし、HTMLをうまく表示できたとしても、自分が利用しているブラウザだけのことかもしれません。IE以外のブラウザ(テキストベース、点字、音声など)を利用して閲覧する場合、W3Cで定義された標準規格に従ってHTML文書を記述し、DOCTYPE宣言する方が確実です。
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- API 1