DOCTYPE element in HTML - html

Dear all
how can i set the DOCTYPE element in HTML to be dynamic depending on the browser being used?

Why do you want to do this? It's best if you solve the root problem. HTML is meant to be served as static data which means that if you add caching at some point then the whole "content negotiation" trick will fail. Also note that browser user agent sniffing is hard to do 100% correct and you'll need to keep updating your logic as time goes by (and new browsers and versions are released).

Guess you had some troubles on page display, so you decide to change to doctype potentially to quirks mode or html4 standard? If this is the case, I'd still recommend you spend your time on tweak styles better than changing the whole page doctype.

You don't. You just use <!doctype html>. Doctypes are only used to determine whether to use standards mode; changing them is just a waste of resources.

It's not possible using only client side code.
If you don't have server side language at your disposal, build several "versions" of each page, each with different doctype then redirect using JavaScript to proper page according to browser. If you choose this path let me know and I can come with sample code.

Best solution is to use <!doctype html> it is a standards doctype and is now supported in all browsers since HTML5 is backwards-compatible
Plus with more and more HTML5 support being added by the browsers, it's time to prepare for the change.

Related

Technical reasons for using HTML5 doctype, instead of 4.01 strict

I'm working on a new website, and I want to support as many old browsers and operating systems as possible, as easily as possible. From what I've been reading, I know I'm better off avoiding quirks mode, so I need to decide on the best doctype. And everyone seems to be recommending the HTML5 version:
<!DOCTYPE html>
But according to this website, that also recommends the HTML5 version:
https://hsivonen.fi/doctype/, that doctype will trigger quirks mode in Netscape 6, and maybe in Konqueror 3.2. But this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
won't trigger quirks mode in any browser listed on that website.
So my question is, is there any reason why I shouldn't use the 2nd doctype? I know those are really old browsers I'm concerned about, but I've seen recent statistics saying Netscape 6 is still in use, at least in Russia. And where I live, I still see a lot of people using Windows XP. So while I don't want to spend a lot of time supporting obsolete browsers, I'm wondering if there are any disadvantages to using the 2nd one, other than it's longer and looks complicated.
edit: All the answers and comments posted so far, have been really helpful. Now I'm starting to see that it's a tradeoff between:
1) being semantically correct, and
2) putting more of the very old browsers into standards mode, instead of quirks mode
In most cases #1 is probably more important, since not many people use those really old browsers. And if they do, they're probably used to things looking a little off. But if you're more concerned about things looking better in really old browsers, then #2 could be a better choice.
Anyway, I'll wait a while to see if anyone adds any more answers or comments. Thanks!
edit 2: All 3 answers were helpful. And 2 of them helped me understand specifically what I needed, so I selected one of those. But I would have selected both, if I could have.
The only reason I can think of is that if you want or need to use HTML 5 in the future you'll be able to with more ease already doing everything in HTML 5.
And browsers should have no problem dealing with the fact that it's strict 4.01 and will display it just as if it didn't have the doctype anyways.
Basically from a "what the page looks like" point of view your strict 4.01 will look the same in a html 5 doctype as it will in a strict.
Having said that, it does depend on your HTML there are certain times that you'll need to do it but chances are it shouldn't matter
Really good link for further info on doctype declarations:
http://www.htmlgoodies.com/html5/markup/the-doctype-tag-and-its-effect-on-page-rendering.html#fbid=JCm-bKCUNc6
There are several reasons:
Old browsers(those that doesnt support html5) wont be forever, one day the will be gone but those browsers that can support html5 will take long time in order to be a "old browser". So try to take advantages of all those new html5 feactures.
HTML5 has some new tags that are better for S.E.O
HTML5 Introduced new video codecs that will improve the audio and video experience.
HTML5 introduced a really drag and drop feature!
So what I suggest you is to use html5 and try do your best to make "old browsers" run your html5 website.
I would just use the , but not use any HTML 5 specific features, I think that would work nicely. Older browsers try to render the page as good as they can. In any case, if you DO want to use HTML 5 features, you can always see if they are available in your javascript code or use a framework such as modernizr.
According to me main reason is that :
<!DOCTYPE html>
Html5 : Supports header, footer and section tag. And this tags are easily readable to google for "Search Engine Optimization". So, google takes it as important content on our page.
And for "4.01 strict" :
These header, footer and section tags are not supported.

HTML5 doctype is giving me a headache

I've been working on a site. Now that it's almost finished, w3c tells me that I misspelled the doctype. I had <!DOCTYPE html /> instead of <!DOCTYPE html>.
Now my layout changes as you can see in these pictures below.
How I created it:
How it looks with the new instead of
What would be the most likely cause?
The <!doctype> element is used by browser to identify the correct interpretation of HTML. Your intention is to request an HTML5 interpretation, but if you mis-spell the <!doctype> the browser may misinterpret your request, or ignore the request altogether.
Depending on your browser the default operating mode might be some flavour of HTML4, or possible 'quirks mode' where known browser inconsistencies are maintained for the sake of backward compatibility.
Either of these operating modes carry some differences in interpretation from that applied to HTML5, so you see some formatting differences. I'm not going to be specific because you haven't posted the affected HTML, but you get the idea.
Note that an HTML5 doctype won't be recognised by earlier browsers, so you might have to be creative for browsers like IE6, or simply choose not to support them at all.

The HTML5 doctype isn't magic, right?

We have some contractors working on a mobile project and they kept insisting that we had to use the HTML5 doctype to use any HTML5 features, like the doctype was a great big boolean switch. I had to keep telling them that doctype really didn't matter that much. You could use HTML5 input types and touch events on an application/xhtml+xml page with a XHTML 1.1 Strict doctype, and the browser could care less. Likewise, you could use the <center> tag with the HTML5 doctype and the text will be centered.
Obviously there are caveats about lower versions of IE going into quirks mode, but that's not an issue in our scope. I personally didn't care what doctype they used but was bothered by their complete lack of understanding on this. At least, until I saw the jQuery Mobile page setup documentation:
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
Are there any features of HTML5 that require the new doctype? This documentation is just wrong, right?
Browsers do not do anything magic with the <!DOCTYPE html> beyond putting the page into standards mode, and so it is equivalent to any other doctype that does the same thing.
However, it is a testable object in JavaScript, so it is conceivable that a piece of JS could do something stupid like switch its behaviour depending on the presence or not of a given doctype. Without going through the code line by line it's impossible to know whether the statement in the jQuery Mobile page setup documentation is specifically true, or just general advice that if followed will result in the desired outcome.
As far as the common Web browsers running on desktops and laptops are concerned: The browser doesn't care very much about the doctype - it will use new features even if your doctype says they aren't allowed. The doctype is really for the validator; your page won't validate unless the features you're using are allowed by the doctype you're using.
I can't actually speak for mobile devices, since I have next to no experience with them, but it seems like they would work similarly, since they're using the same browser rendering engines and attempting to access the same Internet.

How to handle the browsers who don't support HTML5/CSS3

I have been looking into HTML5 and CSS3 and have been liking it quite a lot.
Got around the modernizr API, but am stuck at one point, and that leads to further confusions:
How will I write a code that caters to the situation of non-compatibility between browsers ?
This leads to the following confusions:
if I write the doctype as <!DOCTYPE HTML> and my page is accessed in IE6, then ho IE6 will handle the page?
If I try to include <video> tag and the page is again accessed by IE6/IE7IE8 (which don't support this tag), Then how am I supposed to be rolling back to flash for them? Should I use some JS to show/hide the content appropriately?
I would love to hear some thoughts of you guys.
If needed, please mark this post as a community wiki.
Thanks!
To answer your question directly,
You have to realize that the new <!DOCTYPE HTML> doctype is only used to trigger standard compliant mode in browsers. Traditionally, this (known as doctype switching) is the only thing the doctype is used for from the browser's perspective. So in short, nothing will happen change with respect to IE6 if you are using a doctype that already trigger standard mode.
You can use a script like Modernizr to do feature detection. This will allow you to use Flash as a fallback only in cases when its needed, as well as serve up the correct type of movie to browsers that support them. Even if you do not use the script, you can still look at its source to learn how this is done.
Alternatively, the <video> and <audio> tag specifically allow for fallback content to be embedded within them. This will means that you can simply wrap your Flash content with <video> tags, and if the browser does not support them it will simply use the fallback content.
Three things you need:
1. Check the list of supported features.
2. Detect HTML5 features
3. Use Graceful Degradation

If I use HTML 5's doctype, what will happen?

I have recently been learning about doctypes, and was I wondering what the differences between <!DOCTYPE html> and some of the others were.
I know <!DOCTYPE html> is the HTML5 doctype and it is experimental, but I was wondering what would happen if I used it instead of the other doctypes?
Thanks in advance!!!!
Basically what will happen is that you'll get your page rendered in a "standards mode".
The only reason why you probably shouldn't use the new DOCTYPE is if you want to use XHTML 1.0 markup and conform to XHTML 1.0.
The downside to using HTML5 now is that the spec can change. This makes it important for you to keep up with the spec as it actively changes.
With that being said, I've already started using the new syntax in my pages. Also it guarantees that your page will last for a very, very, long time.
So go ahead, use it (and learn to love how simple it is).
The HTML5 doctype isn’t experimental. Ian Hickson tested a bunch of browsers, and found that <!DOCTYPE html> worked the same in them as the HTML 4 and XHTML 1 doctypes (i.e. it triggered standards mode).
However, if you use it, then validators will (by default) validate your page as if it’s HTML5, which may not be what you want if you’re actually writing HTML 4. (For example, some elements are getting dropped in HTML5. Using them would show up as an error if you validated your page as HTML5.)
Lucas nailed the most important aspect. Let me explain this in a slightly different way:
In the browser the doctype serves exactly one purpose, to set the rendering mode: Quirks, almost standards and full standards mode. This used to be simple until MSIE 8 introduced a second switch, "compatibility mode" = MSIE7 bugs and limitations are preserved on purpose.
An HTML5 doctype will (usually) override that setting, and is thus somewhat more powerful than XHTML 1.x or HTML 4.01 doctypes. (MSIE may override it sometimes, though.)
The definitive guide to doctype switching and layout mode is at: http://hsivonen.iki.fi/doctype/
The second thing that will happen is that you get your pages validated according to the HTML5 rules. Some elements and attributes that were allowed in HTML 4 are gone and a bunch of new ones have come.
Edit: Removing example. Mixing what used to be known as inline and block elements is now OK. (In the original proposal it was not.)
The semantics and syntax for HTML5 is mostly like the one in HTML 4, so most well written HTML 4 sites will continue to validate. The main difference is that you mat start to use the new stuff and still be valid.
There's nothing illegal about
<div>
<p>foo</p>
<span>bar</span>
</div>
(The terms 'block level' and 'inline' elements are obsolete in HTML5.)