<!DOCTYPE> / <html>
| Since: | HTML 4（1997） |
|---|
<!DOCTYPE> is the document type declaration for HTML, which tells the browser "this is an HTML5 document." The <html> element is the root element (the top-level element) of an HTML document, and wraps all other HTML elements.
Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Document metadata -->
</head>
<body>
<!-- Document body -->
</body>
</html>
Attributes (html element)
| Attribute | Description |
|---|---|
| lang | Specifies the language of the document. Use lang="en" for English, lang="en" for Japanese. |
| dir | Specifies the text direction. Use ltr for left-to-right, or rtl for right-to-left. |
| xmlns | Specifies the XML namespace. Use this when XHTML compatibility is required. Not needed in standard HTML. |
Sample Code
sample_doctype_html.html
<!-- Basic English page --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello!</h1> <p>This is an HTML5 document.</p> </body> </html> <!-- Japanese page (lang="ja") --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプルページ</title> </head> <body> <h1>こんにちは！</h1> <p>These is an HTML5 document.</p> </body> </html> <!-- Right-to-left language (e.g. Arabic) --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>صفحة عربية</title> </head> <body> <p>مرحباً بالعالم</p> </body> </html>
Output
The browser interprets the code above as HTML5 and renders a heading that reads "Hello!" and a paragraph that reads "This is an HTML5 document."
Notes
<!DOCTYPE html> must always appear at the very beginning of an HTML file. Without it, the browser operates in "Quirks Mode," which can cause layouts to render incorrectly. Always place it on the first line of your HTML file.
In versions prior to HTML5 (HTML 4.01, XHTML), the document type declaration was a long string. In HTML5, it is simplified to just <!DOCTYPE html>.
It is strongly recommended to specify the page language using the lang attribute on the <html> element. This helps screen readers announce content in the correct language and allows search engines to correctly identify the language.
The <head> and <body> elements are explained in detail on the head and body pages respectively.
Browser Support
Chrome
1 and later ○
Firefox
1 and later ○
Safari
1 and later ○
Edge12 and later ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera
12.1 and later ○11.1 and earlier ×
iOS Safari1 and later ○
Android Browser4.4 and later ○4 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○* Version data based on MDN.
History and Role of the DOCTYPE Declaration
Before HTML5, DOCTYPE declarations required long URLs (DTDs). HTML5 simplified this to just <!DOCTYPE html>.
| Version | DOCTYPE Declaration |
|---|---|
| HTML5 | <!DOCTYPE html> |
| HTML4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
One of the most important roles of the DOCTYPE declaration is switching the browser's rendering mode. When a valid DOCTYPE is present, the browser renders in "Standards Mode." Without it or with an invalid one, the browser falls back to "Quirks Mode," which mimics old browser behavior and can cause CSS calculations (such as the box model) to behave differently from current standards.
Practical Use of the lang Attribute
The lang attribute on <html> specifies the language of the entire page. When part of a page is in a different language, that element can have its own lang attribute.
<!-- Entire page is in English -->
<html lang="en">
<body>
<p>This is English text.</p>
<!-- A French quote gets its own lang attribute -->
<blockquote lang="fr">
<p>Je pense, donc je suis.</p>
</blockquote>
<!-- Japanese proper noun -->
<p>Author: <span lang="ja">夏目漱石</span></p>
</body>
</html>
The lang attribute also affects SEO — search engines use it to determine the page's language and display it in relevant regional results. Screen readers switch to the correct voice synthesis engine based on lang, making it important for accessibility as well.
If you find any errors or copyright issues, please contact us.
シェアする