<!DOCTYPE>

The <!DOCTYPE> declaration defines the document type and version of HTML, ensuring the browser renders the page correctly.

Understanding the `<!DOCTYPE>` Declaration

The <!DOCTYPE> declaration specifies the document type and HTML version being used. It must be the first line in an HTML file. For HTML5, use <!DOCTYPE html> to ensure proper rendering in web browsers.

Syntax

The syntax for the <!DOCTYPE> declaration in HTML is:

index.html

<!DOCTYPE html>

Example

Title of the document The content of the document......

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>
<body>
  The content of the document......
</body>
</html>

Explanation and Purpose

Every HTML document begins with a <!DOCTYPE> declaration.

This declaration is not an HTML element but a directive that tells the browser which version of HTML is being used.

In HTML5, the declaration is simple and straightforward:

index.html

<!DOCTYPE html>

This declaration ensures that the document is interpreted as an HTML5 document and must be placed at the very beginning of the HTML file.

Older HTML Versions

In previous versions of HTML, such as HTML 4 or XHTML, the doctype declaration was more complex as it required referencing a Document Type Definition (DTD).

HTML 4.01

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Tips and Notes

The <!DOCTYPE> declaration is not case-sensitive.

index.html

<!DOCTYPE html>

index.html

<!DocType html>

index.html

<!Doctype html>

index.html

<!doctype html>

Example

Hello World!

index.html

<h1>Hello World!</h1>

In this case, <!DOCTYPE html> indicates that the document follows HTML5 standards.

Key Points

Here are the main aspects of the <!DOCTYPE> declaration in HTML:

Function: Specifies the document type and the HTML version in use.
Format: In HTML5, it is written as <!DOCTYPE html>.
Location: Must be the first line in an HTML document, before the <html> tag.
Rendering: Helps browsers correctly interpret and display the document.
Evolution: Older versions of HTML required different doctype declarations, whereas HTML5 has simplified it to a single universal declaration.

Conclusion

The <!DOCTYPE> declaration is essential for defining the HTML version and ensuring proper rendering in web browsers. In HTML5, it is simplified to <!DOCTYPE html>, placed at the beginning of the document. This helps browsers correctly interpret and display the content. Older versions of HTML required more complex declarations, but HTML5 has streamlined this process for better compatibility.

Metadata

HTML metadata provides information about the web page, such as its title, character encoding, and linked resources, typically within the <head> section.

<meta>

The <meta> element provides metadata such as character encoding, author info, and viewport settings, typically found in the <head> section for document processing and SEO.