Difference in DOCTYPE's - html

I am new to HTML concepts, but I had issue with my web page. It was not able to load properly on IE10 then I googled further and changed the doctype from
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML>
surprisingly it worked
I tried reading regarding this DOCTYPE got to know that the mentioned DTD is used to render the web page. But i was not able to gather much information. can anyone tell me what is actually making the difference there ??

According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.
Doctype you used earlier :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
as you can see belongs to html 4
and doctype you used later
<!DOCTYPE HTML>
is HTML 5. the latest standard for web. That's why it's working in IE10.

The difference is HTML 4.01 and HTML 5. The doctype for HTML 5 is simply:
<!DOCTYPE HTML>
There could be many different reasons for why the rendering is different. For a well formatted HTML 4 document there shouldn't be any difference between HTML 4 and HTML 5. But if you are using HTML 5 features then declare the document as HTML 4 you may be triggering quirks mode.
"Quirks" mode is what browser manufacturers call when they need to emulate features of older versions of the browser engine including bugs (yes, emulate bugs, because some web developers use bugs to trigger features in their code). You can think of quirks mode as HTML version custom-to-this-browser-and-only-this-browser.

Related

DOCTYPE HTML in html file

Why is <!DOCTYPE html ... > used in html file?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The DOCTYPE Declaration (DTD or Document Type Declaration) does a couple of things:
When performing HTML validation testing on a web page it tells the HTML (HyperText Markup Language) validator which version of (X)HTML standard the web page coding is supposed to comply with. When you validate your web page the HTML validator checks the coding against the applicable standard then reports which portions of the coding do not pass HTML validation (are not compliant).
It tells the browser how to render the page in standards compliant mode.
For more information refer to this "<!DOCTYPE html>" What does it mean?
It tells the browser that the following code is to be treated as a particular version of html code.
The browser knows then to look for an open HTML tag <html> and treats everything like html until it reaches the close HTML tag </html>
<!DOCTYPE html> is all that's needed now.
The term DOCTYPE tells the browser which type of HTML is used on a webpage. Here is link of official page which explains your query why and what is
<!DOCTYPE html>
A doctype defines which version of HTML/XHTML your document uses. You would want to use a doctype so that when you run your code through validators, the validators know which version of HTML/XHTML to check against
The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
In HTML 4.01, the declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Tip: Always add the declaration to your HTML documents, so that the browser knows what type of document to expect.
The <!DOCTYPE html> declaration is used to inform a website visitor's browser that the document being rendered is an HTML document. While not actually an HTML element itself, every HTML document should being with a DOCTYPE declaration to be compliant with HTML standards.
For HTML5 documents (which nearly all new web documents should be), the DOCTYPE declaration should be:
<!DOCTYPE html>
Show to the browser than the file is a HTML5.
Is followed by the lenguage etiquete according to HTML5 good practiques.
<!doctype html>
<html lang="es">
In this case the second line indicates to the browsers than the file is in example, spanish in this case <html lang="es">
is important for building an HTML documents it is not just HTML but it is an instruction to the web browser about what version of HTML the page is written in.

Necessary for the URL in html DOCTYPE?

I have a question regarding html doctype, is the url for doctype necessary? I saw it in some production codes that has only
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
without the URL like
"http://www.w3.org/TR/html4/loose.dtd">
I understand that doctype will let browser determine layout mode, either standard or quirk mode, but im uncertain whether do we need the url, does it make difference without the url?
The DOCTYPE header tells your browser what version of html the webpage is written in..Hence the browser will try to interpret the content of the page based on the version...with html4 and below the doctype string is needed.
However With HTML5 there is no need for a reference string..you can simply use
<!doctype html>
short simple and easy
(The DOCTYPE is retained in HTML4 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers)
It is valid HTML 3.2 to omit the URL. Probably not valid HTML 4 however
source
If you have noticed <!doctype html>, that's to indicate HTML5.
Doctype has a public identifier (e.g. -//W3C//...) followed by system identifier (e.g. http://www.w3c...). Notice that HTML2 and HTML3.2 had no system identifier (http://www.w3.org/QA/2002/04/valid-dtd-list.html). Otherwise you have to use a system identifier URL to call the doctype correct.
http://www.w3schools.com/tags/tag_doctype.asp provides some more literature regarding doctypes. Also note an interesting list of doctypes here: https://www.totalvalidator.com/support/doctypes.html. W3C documention is here: http://dev.w3.org/html5/html-author/
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
but add the <!DOCTYPE> declaration to your HTML documents, so that
the browser knows what type of document to expect.
Like as follows :
<!Doctype html>
What you mentioning about is "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

Multiple Doctypes in a single HTML Document

If a HTML document has two doctypes, how will the doctypes affect the rendering of the page and which doctype would the browser pick? Is having two (or more) doctypes in a single document valid or confusing?
Example:
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
</html>
Only a single doctype declaration is permitted. This follows rather directly from the HTML specifications as well the HTML5 drafts, and it can also be checked using a validator.
Thus, there is no specification of what should happen. The natural expectation is that since browsers process the doctype declaration only in “doctype sniffing” when deciding on the browser mode (Quirks Mode vs. Standards Mode), only the first doctype declaration takes effect and the other is ignored.
This can be tested e.g. as follows (using an HTML 3.2 doctype, which triggers Quirks Mode on all doctype-sniffer browsers):
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<title>Testing duplicate doctype effect</title>
<script>
document.write(document.compatMode);
</script>
</html>
This displays “CSS1Compat” (= Standards Mode), whereas swapping the doctype declarations causes “BackCompat” (= Quirks Mode).
I believe the very first DOCTYPE is used by the browser and it's against the specification to have more than one in a document.
I think (not sure) that the only situation when multiple DOCTYPE-s may be valid is when using IE conditional comments. Browsers other than IE won't see those, of course.
I remember reading a blog entry (can't find it now, so I may be wrong in this) but some (most?) browsers even ignore the DOCTYPE if it's not the first thing they encounter. (This may have been a bug that got fixed since.)
Here's W3School's reference page about DOCTYPE:
http://www.w3schools.com/tags/tag_doctype.asp
If you have multiple DOCTYPE-s in your HTML page then browser will consider first one, browser parse the DOM line by line. Once browser get DOCTYPE then it will stop looking for other doctypes and will jump to search for HTML tag.
In the above question HTML-5 DOCTYPE is mentioned first and then
HTML-4, according to this browser will render things as HTML-5 doctype
It is better to try once in http://www.w3schools.com/ ... Try to use 'code' or 'kbd' or 'dfn' or 'samp' or 'strong' tag by mentioning both doctypes by priority.

Which html doc type should I use?

I'm writing a web page. How do I know what doc type to use?:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I believe the rationale behind using Transitional is that if your page uses deprecated html elements, the browsers will try to support them?
Thanks
I'd use <!DOCTYPE html>, it's by far the easiest alternative, and it triggers standards mode in all modern browsers as Anne van Kesteren noted several years ago.
You should prefer strict above transitional/loose/invalid(!). Your first transitional example is invalid. It will let any browser render in non-standards/quirks mode, it won't let IE render in almost-standards mode.
This site contains excellent background information and a compatibilty table. Here's an extract of relevance:
Standards mode, more stable validation target
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This doctype also triggers the standards mode, and the decade-old HTML 4.01 validity definition is stable. Please be sure to test your image alignment in Firefox, Safari, Chrome or Opera 9 or 10. Testing image alignment with Internet Explorer is inadequate however be sure to test in IE8, too.
You’d like to use the Standards mode, but you still want to validate deprecated markup or you use sliced images in table layouts and don’t want to fix them
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This gives you the Almost Standards mode (and the full Standards mode in really old Mozilla releases). Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode).
I'd say, go for HTML5 doctype <!DOCTYPE html>, unless you want a more stable validation target.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4 Strict DTD if you
a) Don't plan on using HTML 5 elements
b) Don't plan on really using xhtml with Content-Type of application/xhtml+xml
In this day and age you really shouldn't be "transitioning" or trying to using old, deprecated non-standard elements. Go standard all the way.
If you do plan on trying out HTML 5, by all means just use <!DOCTYPE HTML> which is the HTML 5 DTD.

Do we use doctype only to render webpages in standard mode with IE6?

Do we use doctype only to render webpages in standard mode with IE6 ? or does doctype do something more than that?
The doctype actually tells ALL browsers the type of content in the page. In many browsers, you'll notice very little difference, but in IE it has two different rendering modes, so you'll see a larger difference.
You should be using a doctype on all of your HTML documents. The idea is that it will be a much simpler doctype in the future - HTML 5 looks like this:
<!DOCTYPE html>
Whereas HTML 4 is like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
And has Transitional or Strict options.
It's not just IE6, it tells all browsers how to attempt to render the page.
Good information here and here.
Doctype could also used to check that your page respects the W3C standard.