When I put <!doctype html> does it have to be at the top of my html and in that exact format?
However, in an assignment I'm doing I am required to use and not change html code, and I can only add css files, etc. In this html code, the structure is unique to anything I've ever seen where it looks something like this:
<html>
<head>
</head>
<body>
<doctype html>
<link rel="stylesheet" ...>
<h1>...</h1>
...
</body>
</html>
I understand what a doctype is and does and I always put them, but I'm wondering if that code is even valid or if the browser is ignoring the problems and just rendering it.
Html declarations should go at the top of the file as it directs the web browser
that my HTML document is using which version.
HTML Tags depends on the web browser and the HTML version we are using.
The doctype string needs to be at the start to have any effect. Its only effect on browsers is to affect the choice of browser mode, namely “standards”, “almost standards”, or “quirks” mode. When there is no doctype string at the start, quirks mode is selected. This has considerable implications on the use of CSS. So if this is an assignment, they are either playing tricks on you, or incompetent.
It is irrelevant what the specifications say (and this is covered in answers to older questions at SO). If you are required to use HTML as in the question, the code is invalid anyway on several grounds (lack of doctype string, lack of title element, invalid <doctype html> tag, and link element placed inside body). Yet, the code works, for some values of “work”, but in quirks mode.
That DOCTYPE declaration isn't properly written or in the correct location valid per this informative but dated article. It's actually an HTML comment, not a tag.
The <DOCTYPE> declaration must be the very first thing in your
document, before the <html> tag.
It should be <!DOCTYPE html> at the top of the file above the html tag.
As far as how it's handled,
Modern browsers have a quirks-mode, where they attempt to interpret improperly written HTML. I'm not exactly sure how each browser would handle that tag, but it is definitely cause for concern:
The tag isn't closed. So it's likely going to wrap all the content inside of the body, which would lead to some unexpected CSS issues.
Or the doctype tag would be ignored completely (this is probably just wishful thinking)
A quick test, shows that the tag is handled in a weird way. It's wrapping the other content.. kind of? Eh. Weird:
http://jsfiddle.net/CoryDanielson/6d12grLg/
HTML <!DOCTYPE> Declaration
Definition and Usage
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.
The <!DOCTYPE> 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 <!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.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
Source:
http://www.w3schools.com/tags/tag_doctype.asp
W3C:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://www.w3.org/QA/Tips/Doctype
That doctype declaration is invalid and will cause at least some browsers to go into weird compatibility modes.
W3c (at w3.org), on a page called html5/syntax.html, says "a DOCTYPE is a required preamble" which I interpret to mean it is required and that it must come first.
It also says it must consist of the following components in this order:
A string that is an ASCII case-insensitive match for the string <!DOCTYPE.
One or more space characters.
A string that is an ASCII case-insensitive match for the string html.
Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string.
Zero or more space characters.
A > (U+003E) character.
Related
Why do we need to add the <html> tag if we have already defined that this document is html using <!DOCTYPE html> tag?
Is there any other tag that can be added instead of ?
If not, why do we need it?
On the semantic level...
<!DOCTYPE html> and <html>, despite both containing < angle brackets >, are fundamentally different things:
<!DOCTYPE html> declares the document type and is not parsed to any DOM elements. To quote MDN's Doctype article, "Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document".
<html>, however, does parse to a DOM element. You can attach attributes to it or manipulate it with JavaScript. For example, try pasting this in your browser console: document.querySelector('html').style.opacity = '0.5'. You can do that with <html>, but not with DOCTYPE.
On the spec level...
Why have any standards at all? Standards are necessary so that implementers (e.g. browser vendors) know what they need to build, and developers know what they're developing against. Without common standards, it'd be impossible to ever build interoperable software.
You can certainly question the logic of why standards were set the way they were set, and the answer almost ends up at "because history" (and sometimes "because politics"). If those historical decisions were changed now, it'd break the Web.
On the markup level...
It's best practice to always set a lang attribute on the HTML element, for accessibility and SEO reasons, and you need to include it in order to do that:
Always use a language attribute on the html tag to declare the default language of the text in the page.
It's also a general best practice when writing code or markup to be explicit with what you intend, to help others reading your work. For that reason alone, it's clearer to add a surrounding HTML tag.
On the DOM level...
If you don't include any attributes on the HTML element, it doesn't actually matter what you write in terms of how it's parsed, because HTML is quite forgiving) (credit #Run_Script for the link). It'll get parsed out to the relevant DOM nodes anyway, so document.body.parentElement instanceof HTMLHtmlElement will always be true.
Still, for the reasons laid out above, I'd recommend always including it.
!DOCTYPE html tag make sure that HTML or XHTML document will be parsed in the same way in different browsers. This declaration is an instruction to the web browser about what version of HTML the page is written in. The presence of this tag assures that document author has followed the html standard. Historically,the Doctype declaration was used in HTML when it was defined as a language based on SGML, and later, on XML.
html tag indicates that everything between and is code that conforms to the standards of the type of HTML dictated by the doctype declaration. In simple words, it is the root of an html document.
Actually, you don't need html tags at all in a valid HTML document. The following is a minimal HTML document:
<!DOCTYPE html SYSTEM "html5.dtd">
<title>The title</title>
<p>Some text</p>
That's because HTML is based on SGML, and SGML can infer omitted tags. In the example, SGML
infers the document element (the root element), knowing that it must be html since the DOCTYPE declaration says so
infers a head element, because the content model of html requires it at the start
infers the </head> end-element tag, because the p element can't occur within head's content model
infers the <body> start-tag element, since it is required to follow the head element
accepts the paragraph element and text content, and
closes the body and html elements at the end of the document.
So this is the fully-tagged document that SGML arrives at:
<html>
<head>
<title>The title</title>
</head>
<body>
<p>Some text</p>
</body>
</html>
SGML knows this because it has been given a html5.dtd file containing these and other grammar rules for HTML. Now HTML5 doesn't anymore use DTDs but has these rules hard-coded (actually, browsers had these rules always hard-coded), but the SGML rules for tag omission, as well as other rules such as for empty elements and attribute short-form syntax still apply. If you want to see a complete DTD for (the various versions of) HTML5, you can take a look at my site sgmljs.net W3C HTML 5.2, along with a comprehensive explanation.
So, to answer your question, the idea of SGML is that you can use many different types of documents, each with their own element vocabulary, and not just HTML. However, HTML became the dominant application for SGML. Also, browsers in the past misused DOCTYPE declarations for switching their parsing and rendering behaviour.
I was just reading somebody's HTML who never closed meta and link tags in the HTML head section. The code worked fine; is closing these tags optional?
I thought it would be malformed if a tag was not closed.
A tag must always be closed by the tag close symbol > (if we ignore certain SGML rules that nominally apply in non-XHTML HTML but were never implemented in browsers).
What you mean to ask is whether the elements need to be closed by end tags. The answer is that non-XHTML HTML (including HTML5 in HTML serialization), no end tag is required or allowed for meta and link elements. In practice, however, browsers just ignore explicit end tags for them, as well as the cargo-cult / before >, if you use them. And HTML5 makes this permissiveness a rule by even formally allowing the / in HTML serialization, too.
In XHTML, XML rules apply, so every element, without exception, must have both a start tag and an end tag, but the same tag may be used for both roles if the element content is empty, e.g. <meta name="foo" content="bar"/> as short for <meta name="foo" content="bar"></meta>. If you violate this when serving a document with an XML (XHTML) content type to a conforming browser, then your document is not displayed at all; an error message is shown instead.
When using an XHTML server with the HTML content type (Content-Type: text/html), as XHTML documents almost always are on the web, then browsers will actually apply the non-XHTML HTML rules.
To summarize:
normally, use just <meta ...> with no /
if you are really using XHTML in a context where XHTML parsing is actually applied, play by XML rules (and make sure you know them)
if your boss tells you to write <meta ... />, do so; it’s not useful, but it causes no harm (except if you try to validate e.g. against the HTML 4.01 doctype).
It depends on the doctype. HTML5 doesn't need the closing. XHTML does.
In HTML5, so-called void elements (elements that can't have content) don't need the closing, as they are self-closing. But it is still valid if you close them..
Read more about it here: void-elements
Meta tags are normally closed wi this ending tag > in stead of />
such as
From what I've read, the correct way to start an HTML5 page is:
<!DOCTYPE html>
<html>
With nothing more in those lines. Is this true? (I'm asking because Visual Studio has more than that.)
(Also, I'm wondering if HTML5 is really the current standard or should I be using XHTML5 or some other version.)
According to the HTML living standard and the W3C spec, the doctype is the required preamble but required for legacy reasons. I quote:
A string that is an ASCII case-insensitive match for the string
"<!DOCTYPE".
One or more space characters.
A string that is an ASCII case-insensitive match for the string
"html".
Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE
string (defined below).
Zero or more space characters.
A U+003E GREATER-THAN SIGN character (>).
In other words, <!DOCTYPE html>, case-insensitively.
And <html></html> for a valid document
(Also, I'm wondering if HTML5 is really the current standard or should
I be using XHTML5 or some other version.)
It is not the current standard IMHO because it is not finished yet. But this article explains very well 10 reasons for using it now.
Mostly yes. But the HTML5 spec for the <html> element says
Authors are encouraged to specify a lang attribute on the root html
element, giving the document's language. This aids speech synthesis
tools to determine what pronunciations to use, translation tools to
determine what rules to use, and so forth.
so better, for a page whose content is in American English, would be
<!DOCTYPE html>
<html lang="en-us">
Also if you are using XHTML5 served as application/xhtml+xml you will need to add the namespace, and also the XML equivalent of the lang attribute making it:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
Yes it's true. No more complicated doctypes in HTML5. The new standard is simplified and there's only the one you said.
According to the HTML5 drafts, “A DOCTYPE is a required preamble”. The preamble <!DOCTYPE html> is recommended, but legacy doctypes are allowed as an alternative, though they “should not be used unless the document is generated from a system that cannot output the shorter string”. The only part that is required in addition to it is the title element, and even it may be omitted under certain conditions. The <html> tag is not required.
HTML5 is not a standard. It is not even a W3C recommendation (yet). What you should use depends on what you are doing. It does not really matter which version of HTML you think you are using. What matters is the markup you have and how browsers (and search engines etc.) process it.
Yes, that's correct as far as I know.
When writing the HTML5 doctype what is the correct method?
<!DOCTYPE html>
or
<!doctype html>
In HTML, the DOCTYPE is case insensitive. The following DOCTYPEs are all valid:
<!doctype html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!DoCtYpE hTmL>
In XML serializations (i.e. XHTML) the DOCTYPE is not required, but if you use it, DOCTYPE should be uppercase:
<!DOCTYPE html>
See The XML serialization of HTML5, aka ‘XHTML5’:
Note that if you don’t uppercase DOCTYPE in an XHTML document, the XML parser will return a syntax error.
The second part can be written in lowercase (html), uppercase (HTML) or even mixed case (hTmL) — it will still work. However, to conform to the Polyglot Markup Guidelines for HTML-Compatible XHTML Documents, it should be written in lowercase.
If anyone is still wondering in 2014, please consult this:
HTML5
W3 HTML5 Spec - Doctype
A DOCTYPE must consist of the following components, in this order:
A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
...
Note: Despite being displayed in all caps, the spec states it is insensitive.
XHTML5
W3 HTML5 - XHTML
This specification does not define any syntax-level requirements beyond those defined for XML proper.
XML documents may contain a DOCTYPE if desired, but this is not required to conform to this specification. This specification does not define a public or system identifier, nor provide a formal DTD.
Looking at the XML spec, it lists DOCTYPE in caps, but I can't find anything that states that 'all caps' is required (for comparison, in the HTML5 spec listed above, it is displayed in the example in all caps, but the spec explicitly states that is is case-insensitive).
Polyglot Markup
W3 Polyglot Markup - Intro
It is sometimes valuable to be able to serve HTML5 documents that are also well formed XML documents.
W3 Polyglot Markup - Doctype
Polyglot markup uses a document type declaration (DOCTYPE) specified by section 8.1.1 of [HTML5]. In addition, the DOCTYPE conforms to the following rules:
The string DOCTYPE is in uppercase letters.
...
So, note that Polyglot Markup uses a regular HTML5 doctype, but with additions/changes. For our discussion, most notably that DOCTYPE is declared in all caps.
Summary
View the W3's HTML vs. XHTML section.
[Opinion] I wouldn't worry too much about satisfying XML compliance unless you are specifically trying to make considerations for it. For most client and JS-based server development, JSON has replaced XML.
Therefore, I can only see this really applying if you are trying to update an existing, XHTML/XML-based legacy system to co-exist with new, HTML5 functionality. If this is the case then look into the polyglot markup spec.
According to the latest spec, you should use something that is a case-insensitive match for <!DOCTYPE html>. So while browsers are required to support whatever case you prefer, it's reasonable to infer from this that <!DOCTYPE html> is the canonical case.
Either upper or lower case is "correct". However if you use web fonts and care about IE7, I'd recommend using <!DOCTYPE html> because of a bug in IE7 where web fonts sometimes fail if using <!doctype html> (e.g. in this answer).
This is why I always upper-case the doctype.
The standard for HTML5 is that tags are case insensitive.
http://www.w3schools.com/html5/tag_doctype.asp
More Technically: (http://www.w3.org/TR/html5/syntax.html)
A DOCTYPE must consist of the following components, in this order:
A string that is an ASCII case-insensitive match for the string <!DOCTYPE.
The question sort of implies there's only one correct answer, supplies a multiple choice of two, and asks us to pick one. I would suggest that for HTML5 both <!DOCTYPE html> and <!doctype html> are valid.
So a HTML5-capable browser would accept the lowercase one and process the html properly.
Browsers previous and oblivious to HTML5, I've heard, even without a doctype, will attempt to process the html as best they can. And if they don't recognize the lowercase doctype will do the same. So there's no point in making it uppercase since those browsers won't be able to fully implement any HTML5 declarations anyway.
The doctype declaration is case insensitive, and any string of ASCII that matches
Html5 standard
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's up, Doctype?
When create a new file in Netbeans IDE I get <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> at the beginning of the file.
I delete it and my html still works. I wonder what that is and is it neccessary?
Thank you.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
take a look here: http://www.w3schools.com/tags/tag_doctype.asp
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML).
http://en.wikipedia.org/wiki/Document_Type_Declaration
Also, from W3C:
There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. All these types of HTML are defined in their respective W3C specifications, but they are also defined in a machine-readable language specifying the legal structure, elements and attributes of a type of HTML.
http://www.w3.org/QA/Tips/Doctype
I believe that if you don't specify a doctype, the browser will add a default one, that's why it works. Adding that line overrides the default to specify that you want that particular markup language.
There are many variations of HTML with various names; XHTML, DHTML etc... Your browser will do its best to work out which variation your document is written in but may not always get it right. Particularly in IE it will default to "quirks mode" if you do not declare a doctype which frequently causes most of your layout to break.
Declaring the doctype means the browser doesn't have to make this best guess and instead, it renders your page according to the specification related to the doctype you have declared.
Here are some interesting articles on the differences between some of the DTDs:
Strict vs. Transitional
HTML vs. XHTML
To make it clear: unless we care about validation, the only reason why to use doctype is to trigger standards mode (see other comments). Browsers do not differentiate between versions of HTML. This is why it is recommended to choose as simple doctype as possible:
<!doctype html>
The Doctype tells the browser what version of HTML or XHTML are you writing, so it can treat it as it is supposed to.
WIth no Doctype it will work, but the browser wont know exactly what version is it.