The HTML DOCTYPE declaration is a key part of a web development project. You might have seen DOCTYPE written at the top of every HTML document page in your web development project. While there is much confusion related to the HTML doctype and its usage, this must be cleared.
Here, let us know how to conduct an HTML DOCTYPE declaration and its importance in web development.
What Is an HTML DOCTYPE Declaration?
The HTML Doctype declaration is an instruction displayed at the top of an HTML document that tells the web browser about the version of HTML used to write the elements inside the page. This makes sure that the elements inside the page are rendered and displayed properly on the live results.
| <! DOCTYPE html > |
This is the HTML DOCTYPE declaration you might have seen at the top of any HTML document page.
What Is HTML DOCTYPE?
The HTML DOCTYPE declaration appears at the beginning of the HTML document. It tells about the version of HTML in which the page is written. This makes sure the web browser renders properly on the live page.
The HTML Doctype declaration makes sure that the browser is not switched into quirk mode during rendering. It makes sure that rendering by browsers is done with all relevant specifications supported by its elements.
Major Facts About DOCTYPE In HTML
Let us check some of the major facts regarding the HTML Doctype element in web pages.
- Doctype HTML appears at the beginning of HTML document pages in HTML or XHTML pages. It is placed just before the opening <html> tag.
- The main purpose of the HTML Doctype declaration is to indicate the version of HTML in which the page is written. This makes sure the web browser renders properly on the live page and is parsed the same way on different browsers.
- Always place the HTML Doctype at the top of the HTML file.
- The HTML Doctype declaration is not case sensitive. Hence, <!DOCTYPE html>, <!doctype html>, <!Doctype html> all are the same and valid.
- The most frequent format of writing the Doctype declaration is <!DOCTYPE html>
- The HTML DOCTYPE is not an HTML tag. It is just a way of informing the browser about the version of HTML used.
- In the latest HTML5, the HTML Doctype declaration is way simpler than previous HTML versions.
How to Specify the DOCTYPE HTML In a Web Page?
Follow these simple steps given below for the HTML DOCTYPE declaration for a web page.
- Step 1: Build your project file with all major dependencies inside.
- Step 2: Define the “index.html” page for your web project.
- Step 3: In the HTML page, start your HTML document with the <!DOCTYPE html> expression just before the <html> opening tag.
- Step 4: Make sure to save the HTML document after defining all major elements inside i,e. <head>, <body>, <script> and more.
The following HTML DOCTYPE declaration will help you communicate the web browsers and let them know what version of HTML is used inside and parse the content or elements accordingly.
Read More: A HTML Tag: Example, Tag List, Tag Within Page, Table Tag
HTML DOCTYPE Declaration In HTML5
The declaration of HTML Doctype in HTML5 version i,e. The latest version of HTML pages is currently available and is simple and clean. There is no requirement for any additional references, such as strict, frameset, or transitional DTDs.
| <!DOCTYPE html> |
This is all that you need to type or include before the <html> tag in an HTML document page to get started. The earlier versions used to be lengthy and not much user user-friendly like the current one.
History of HTML DOCTYPE
During the early days of the Web, there were no universal web standards being followed. The features used to roll out independently made so many distinctions and differences on different browsers. As a result, today’s developers need to optimise elements for a single browser.
But as soon as W3C (World Wide Consortium) came into effect in 1994, it created common web standards with an objective to ensure that HTML and CSS worked consistently across all major browsers, giving a wider user friendly experience. HTML specifications began to roll out, and different rendering modes were introduced to handle new as well as old sites.
Here came the DOCTYPE declaration in practice, which helped browsers to understand which mode they should use i,e. Either full standard mode or quirk mode. The <!DOCTYPE html> is kept at the top of HTML pages to tell the browser which rendering mode they should go with.
Check a simple example of the HTML 4.0 Strict below.
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> |
These long HTML DOCTYPE declarations pointed to DTDs describing the valid HTML structure.
Example of HTML DOCTYPE Declaration
Let us check a simple example of an HTML doctype to understand it much better.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>PW Skills – Learn, Upskill, and Grow</title> <style> body { font-family: Arial, sans-serif; background-color: #f7f9fc; color: #333; margin: 0; padding: 0; } header { background-color: #0077ff; color: white; text-align: center; padding: 20px 0; } main { text-align: center; padding: 40px; } a { color: #0077ff; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } </style> </head> <body> <header> <h1>Welcome to PW Skills</h1> <p>Empowering Learners Across India 🌏</p> </header> <main> <h2>Explore Our Courses</h2> <p>From <strong>Data Science</strong> to <strong>Web Development</strong>, we’ve got you covered!</p> <a href=”https://pwskills.com” target=”_blank”>Visit PW Skills Website</a> </main> </body> </html> |
Output
 |
In the following example, you can see the <!DOCTYPE html> declaration right at the top of the page.
Master HTML and Web Development With PW Skills
Learn all about HTML, CSS, Javascript, and all major aspects of web development with PW Skills Full Stack Web Development course. Get interactive coursework and real world projects to strengthen your understanding of the complete development.
Gain hands on the fundamentals of HTML, important tags, and the best ways to use them in your project. Get 24×7 doubt support, practice exercises, real world projects, assignments, and more.
After completion, you will get an industry recognised certification by PW Skills to level up your game in web development and gain exposure.
HTML Doctype Declaration FAQs
Q1. What is an HTML DOCTYPE Declaration?
Ans: The HTML Doctype declaration is an expression embedded at the top of an HTML document page to tell the browser about the HTML version and parse the elements accordingly.
Q2. How to declare DOCTYPE in HTML5?
Ans: You only have to type the following simple expression to embed DOCTYPE in your web-based project i,e.
Q3. How to make the doctype declaration in HTML?
Ans: You can make the DOCTYPE declaration by typing in the first line of the HTML document, just before the opening tag.
Q4. Is the DOCTYPE case sensitive?
Ans: No, DOCTYPE html declaration is case insensitive and hence you can either write , , or . All are valid.
