We often see <!DOCTYPE ...> as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
What's the functionality of !DOCTYPE?
The most significant use of DOCTYPE is to switch a browser between Quirks Mode and Standards Mode rendering.
This functionality came about because of the "broken" rendering in old versions of IE. It was realised that if Microsoft just "fixed" the IE rendering engine lots of existing sites would not render properly. So the way it works is if you put any valid DOCTYPE declaration at all in your page the assumption is that you know what you're doing and your browser will render in a standards compliant way, and if you don't put one in it will render in the old "wrong" way.
This was originally done in IE for the Mac, but this behaviour is the same in all versions of IE since IE5, and Firefox, Chrome, Safari and Opera.
What the DOCTYPE is supposed to be is a Document Type Definition. HTML is subset of SGML (as is XML). The DTD tells a parser which syntax you are using. So in a webpage your DOCTYPE should match the version of HTML you are using.
It tells to the validator which version of HTML do are you using. A browser use this information to render the page correctly.
Here are correct version of DOCTYPE:
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5
<!DOCTYPE html>
Mainly for compatibility.
Modern browsers don't need it anymore. See this HTML file that does not have a !DOCTYPE:
<p>hello</p>
The browser automatically inserts the !DOCTYPE.
But that's only in modern browsers.
In IE8, some css properties only have functionality when the doctype is stated.
So, if you don't need to support ancient relic browsers, you don't need it. But it has become a programmer custom!
———
Update:
The doctype used to require a DTD URL. The DTD defines all the elements in the document. If you are using the HTML 4.01 DTD, HTML 5 elements will not work.
But it is not all sunshine and butterflies.
Some features will break. Without a DOCTYPE, the green square fills up 50% of the width:
div {
width:50%;
background-color:#00ff00;
}
<div>div</div>
But with one:
div {
width:50%;
background-color:#00ff00;
}
<!DOCTYPE html>
<div></div>
However, stack snippets automatically adds a !DOCTYPE, so you can't see it here.
It tells your browser which version of HTML it is loading making the load time a bit quicker as the browser know what to expect.
The doctype is a standard defined by the w3c - when you hear about standards based web development this is what they are talking about. The idea of using the doctype is you create valid HTML that follows the doctype.
If you are clever you can actually write your own doctype.
The main (practical) purpose of DOCTYPEs is to force IE from "quirks mode" to "standards-compliant mode", both euphemisms for "horribly broken mode" and "slightly broken mode" (respectively).
In other browsers, the page responds normally without the !DOCTYPE, with these exceptions:
try using the z-index CSS property in Internet Explorer. In quirks mode, it does not work. You need to be in standards-compliant mode for it to work. The easiest way to do this, of course, is with a DOCTYPE.
Browsers behave differently with and without a !DOCTYPE. Here's the code:
<div>some text</div>
<style type="text/css">
div {
background-color:#00ffff;
height:10%;
width:10%;
}
</style>
This web page renders differently when it has a !DOCTYPE and when it does not.
Without a DOCTYPE:
With a DOCTYPE:
Without a !DOCTYPE, the element is sized according to CSS. But with the !DOCTYPE, it is sized according to the element.
The !doctype was not that simple back then. You had to specify a DTD URL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The DTD looks something like this:
<!ENTITY % HTML.Version "-//W3C//DTD HTML YOURVERSION Transitional//EN"
-- this is a comment.
-->
<!ENTITY % HTML.Frameset "IGNORE">
<!ENTITY % ContentType "CDATA"
-- media type, as per [RFC2045]
-->
<!ENTITY % ContentTypes "CDATA"
-- comma-separated list of media types, as per [RFC2045]
-->
<!ENTITY % Charset "CDATA"
-- a character encoding, as per [RFC2045]
-->
<!ENTITY % Charsets "CDATA"
-- a space-separated list of character encodings, as per [RFC2045]
-->
<!ENTITY % LanguageCode "NAME"
-- a language code, as per [RFC1766]
-->
<!ENTITY % Character "CDATA"
-- a single character from [ISO10646]
-->
<!ENTITY % LinkTypes "CDATA"
-- space-separated list of link types
-->
<!ENTITY % MediaDesc "CDATA"
-- single or comma-separated list of media descriptors
-->
<!ENTITY % URI "CDATA"
-- a Uniform Resource Identifier,
see [URI]
-->
<!ENTITY % Datetime "CDATA" -- date and time information. ISO date format -->
<!ENTITY % Script "CDATA" -- script expression -->
and so on an so forth.
Related
So, I wanted to be strict on me and took one of HTML5 pages and validated it as XHTML Strict -- all the way.
Fixed every error reading the very helpful error messages. Now the entire page is fully XHTML compliant. But the page shows only the DIVS containing the ads. The main DIV containing the page matter is gone, haha!
Here's the page for your enjoyment:
http://mypollingcenter.com/charts1.htm
Well, I apologize. The problem was that in my over-zealousness, I changed
this line:
<script src="../avazyabadu/kramaanukrama.js" type="text/javascript"></script>
to this:
<script src="../avazyabadu/kramaanukrama.js" type="text/javascript"/>
Empty tag/element rule, you know.
So, the validator took the whole thing as JavaScript, maybe?
Lessons I learned:
That JavaScript external file reference is an exception to the XHTML/XML rule. Keep the closing tag.
The “space before slash” rule is no more with XHTML.
Mark up fully compliant with strict XHTML validate as HTML5, provided you switch headings as below.
XHTML does not need character set declaration if your page is in UTF-8
Use this Validator (Not this one)
XHTML top lines:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
HTML top lines:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
I keep reading everywhere that CSS is not case sensitive, but I have this selector
.holiday-type.Selfcatering
which when I use in my HTML, like this, gets picked up
<div class="holiday-type Selfcatering">
If I change the above selector like this
.holiday-type.SelfCatering
Then the style does not get picked up.
Someone is telling lies.
CSS selectors are generally case-insensitive; this includes class and ID selectors.
But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.1
This is because the case-sensitivity of selectors is dependent on what the document language says:
All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language.
So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not.2
If the document type defined class names as case-insensitive, then you would have a match regardless.
1 In quirks mode for all browsers, classes and IDs are case-insensitive. This means case-mismatching selectors will always match. This behavior is consistent across all browsers for legacy reasons, and is mentioned in this article.
2 For what it's worth, Selectors level 4 contains a proposed syntax for forcing a case-insensitive search on attribute values using [class~="Selfcatering" i] or [class~="SelfCatering" i]. Both selectors will match an HTML or XHTML element with either a Selfcatering class or a SelfCatering class (or, of course, both). However there is no such syntax for class or ID selectors (yet?), presumably because they carry different semantics from regular attribute selectors (which have no semantics associated with them), or because it's difficult to come up with a usable syntax.
Perhaps not a lie, but need for clarification.
The actual CSS itself is not case sensitive.
For example
wiDth:100%;
but the names must be case sensitive to be unique identifiers.
In quirks mode all browsers behave like case-insensitive when using CSS class and id names.
In quirks mode CSS class and id names are case insensitive. In
standards mode they are case sensitive. (This also applies to
getElementsByClassName.) Read more.
Sometimes when you have wrong doctypes like bellow, your browser goes in quirks mode.
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
you should use standard doctype
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.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">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
if your CSS class or id names behaves case insensitive please check your doctype.
CSS is case insensitive.
But in HTML5 the class and ID are case sensitive
So, CSS properties, values, pseudo class names, pseudo element names, element names are case insensitive
And CSS class, id , urls, font-families are case sensitive.
note : in html quirks mode the css is case insensitive even for ID and class (if you remove doctype declaration)
Example on CodePen : https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup
<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>
P#id
{color:RED;}
p#ID
{font-size:30PX;}
#iD
{BORDER:4px solid blue;}
.class
{text-decoration:underLine;}
.CLASS
{background-color:graY;}
.Class
{font-weight:900;}
#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}
.class:hoVeR
{background-color:lightblue;}
</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>
I know this is a really basic question...
Are these the same for close -
<iframe src="includes/captcha/captcha.php"></iframe>
<iframe src="includes/captcha/captcha.php"/>
And
<div id="container_join_messages" class="shadow"></div>
<div id="container_join_messages" class="shadow"/>
Just wanting to see if I can drop the extra tag at the end and still validate.
Using this doc type
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
According to What are all the valid self-closing elements in XHTML (as implemented by the major browsers)? XHTML capable browsers support self-closing on every element. I've never tried validating such a document myself though.
I am working on this personal project and the sign-in screen of the website goes completely haywire in IE-9
Can someone please suggest me how can I fix it? The webpage is at
http://www.ayeboss.com/users/login
Try opening it in FF and IE and you will see the difference.
Any inputs will be highly appreciated
Your page is being displayed in Quirks Mode, because you don't have a doctype.
Add this, the HTML5 doctype, as the very first line to resolve the problem:
<!DOCTYPE html>
You should always add a doctype to trigger Standards Mode.
well some problems with your html and some with CSS. you are trying to use CSS3 but not completly..
1st mention DOCTYPE
2nd margin and paddings are bugy in IE.. in IE the become double to normal value.
(i.e like if you set margin for Fireforx but they appear double in IE most likly.)
3rd you have use CSS3 properties ..
-moz-border-radius (it only works in FF) so if you want to see this property in action in IE .. try -webkit-border-radius. and read this article border-radius
for gradient gradient
replace your html tag with this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
If you are using html transitional use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you are using XHTML 1.0 transitional go for this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
If you never want your browser to behave as an old version. Then add this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Where can I find sample XHTML 5 pages? I mainly want to know if it is possible to mix and match XHTML 5 with other XML languages just like XHTML 1 or not. For example is something like this valid in XHTML 5?
<!DOCTYPE html PUBLIC "WHAT SHOULD BE HERE?"
"WHAT SHOULD BE HERE?">
<html xmlns="WHAT SHOULD BE HERE?"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Default title</ui:insert></title>
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="left">
<ui:insert name="navigation" >
<ui:include src="navigation.xhtml"/>
</ui:insert>
</div>
<div id="center">
<br />
<span class="titleText"> <ui:insert name="title" /> </span>
<hr />
<ui:insert name="content">
<div>
<ui:include src="content.xhtml"/>
</div>
</ui:insert>
</div>
<div id="right">
<ui:insert name="news">
<ui:include src="news.xhtml"/>
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
Thanks in advance.
You don't need a doctype at all. They are not designed to cope with namespaces and don't serve any useful purpose in XML. (In HTML, they are necessary to get into standards mode.) If you really insist on having one, for whatever reason, use simply <!DOCTYPE html>.
As for the namespace:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
as you are already using, I assume.
As you see, there is no information about the version you're using. That's because you don't need it. For validation, you can pick your target in the UI, and browsers have never looked at versions. That is, in browsers, there is no such thing as HTML3.2 or HTML4.01 or HTML5, just "HTML", and no XHTML1.0, XHTML1.1 or XHTML5, only "XHTML". Today, those consist mainly of HTML4.01/XHTML1.0 and some parts of HTML5, as well as some proprietary parts (though HTML5 has specified most of these).
This is a very good question, covering outstanding issues the W3C is still working on as of late 2012:
Concerning the DOCTYPE question, there could be new developments on the DOCTYPE matter: as of Nov. 12th, 2012, the HTML5 Latest Editor's Draft states, concerning the HTML syntax, in section "8.1.1 The DOCTYPE", that:
"A DOCTYPE is a required preamble [...]" => <!DOCTYPE html>
"For the purposes of HTML generators that cannot output HTML markup with [that] short DOCTYPE, a DOCTYPE legacy string may be inserted [...]" => <!DOCTYPE html SYSTEM "about:legacy-compat"> can be used if absolutely required (e.g. by an XML generator)
"To help authors transition from HTML4 and XHTML1, an obsolete permitted DOCTYPE string can be inserted [...]" => e.g. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (or any of 5 others, see below)
To my understanding:
all 3 forms hold exactly the same meaning : "this doc is HTML5", no matter what the specific, legal, legacy PUBLIC doctype being used for backward-compatibility reasons
and using one of them is required (i.e. use the first one, unless you have really good reasons not to)
Unless last-minute edits occurs, this should make it into the HTML5 W3C Candidate Recommendation 08 November 2012.
The XHTML syntax remains unchanged on that matter: "XML documents may contain a DOCTYPE if desired, but this is not required to conform to this specification."
To sum it up, starting Nov. 8th, 2012, any of the following would be valid:
<!DOCTYPE html>
<!DOCTYPE html SYSTEM "about:legacy-compat">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
And:
any other doctype invalid,
no doctype at all, invalid HTML
and no doctype still an option for XML...
Your best bet is probably the HTML5 specification's section on XHTML, which mostly calls out to the XML 1.0 5th edition spec and the namespaces spec. As it says there, there's no defined DOCTYPE for HTML5 in XML, which is the answer to the DOCTYPE part of your question. It does specifically mention intermixing HTML5 with other content in XML documents, so that should be the answer to that part of your question.
For example is something like this valid in XHTML 5?
No, and you couldn't do it with XHTML 1 either. Once you start doing FOO + BAR documents, they are not valid FOO or valid BAR, just some combination of the two (which may conform to a DTD and thus be valid FOO + BAR)
<!DOCTYPE html PUBLIC "WHAT SHOULD BE HERE?"
"WHAT SHOULD BE HERE?">
A custom DTD that describes the combination of markup languages you are using.
When mixing namespaces you are usually better off forgetting about DTDs. It isn't going to be HTML compatible anyway, so text/html is out of the question
<html xmlns="WHAT SHOULD BE HERE?"
xmlns:ui="http://java.sun.com/jsf/facelets">
The XHTML namespace has not changed. This is the same as every other version of XHTML.
I'm afraid there is no such thing as XHTML5.
You can have either real XHTML, with one of the classic XHTML DOCTYPEs (see other answers), or you can put in the <!DOCTYPE html> one, and then it mostly validates, but then it's no longer fully XHTML. It will only work if you treat it as HTML.
For instance, this file
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title></head>
<body><p> </p></body>
</html>
will only work if you give it a .html extension. With .xhtml, no way.
You may think that saving as .html is no big deal, but then it's HTML, regardless of what the contents of the file say. Then you can just as well throw away the XML declaration and the xmlns attribute and all other XHTML features.