Lecture-3 : DOCTYPE in HTML

Document types: A DOCTYPE, short for document type definition, defines an HTML or XHTML document’s building blocks and tells the browsers and validators which version of HTML or XHTML your document uses.
The DOCTYPE declaration must appear at the beginning of every web page document, before the HTML element, to ensure that your markup and CSS are standards compliant and that browsers handle the pages based on the appropriate DTDs.

HTML 4.01 has three document types:

1.Strict
2.Transitional
3.Frameset
Both HTML5 and XHTML 1.1 have one document type, but XHTML 1.0, like HTML 4.01, has three.

DOCTYPE STYLES

Only one document type definition (DTD) appears in the HTML document.
Use any one of the following DOCTYPEs that best fits your project needs.



HTML 4.01 Strict DTD:

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

HTML 4.01 Transitional DTD:

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

HTML 4.01 Frameset DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
" http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

HTML5 DTD:

<!DOCTYPE html>

XHTML 1.0 Strict DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD:

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

Basic page with the HTML5 DTD:
Here’s a basic page with the HTML5 DTD and the required head, body, and html elements:

<!DOCTYPE html>
<html>
<head>
<title>DOCTYPE Html</title>
</head>
<body>
<h1>

My first Web Page

</h1>
<p>White spaces, tabs and new lines are ignored by the browsers. For this there are some tags is HTML
</p>
</body>
</html>


Quirks mode

XHTML requires a valid DOCTYPE at the top of the document; otherwise, the pages won’t validate and the browsers will fall back into what is known as quirks mode. Quirks mode occurs when a browser treats a web page as “buggy.” As a result, such pages are treated as though they were written in invalid markup, and therefore will be improperly rendered in modern browsers even if the XHTML and CSS are coded perfectly.
A web page that is without a DOCTYPE, with an older DOCTYPE, or with a typoriddled DOCTYPE triggers quirks mode. So, when coding pages, make sure to check that the DOCTYPE is both added to the page and typed correctly to ensure that browsers do not render pages in quirks mode.

Figures below show how a table contained within a DIV with a width of 100% goes into quirks mode in Internet Explorer 6, and how the page should look in standards mode.


Figure:- HTML page without DOCTYPE



Figure: HTML page with DOCTYPE