HTML Basic - Validation - 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.

Related

Work around for HTML stripping quotes in quirks mode?

when i tried to get as InnerHTML in Javascript, Firefox giving expected results. so that i can manipulate the dom elements, bu when i use the same working code, IE will strip out the quotation marks from the attribute pair. i am wondering is there any work around to solve this problem. and if possible can any body tell me why does it renders, because of quirks mode or what ? as i have iframes in pages.
DocType which i have in my page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Expected :
<span id="someID">Ravi <span class="SomeClass">assignment </span>submission</span>
Output
<span id=someID>Ravi <span class=SomeClass>assignment </span>submission</span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> doesn’t trigger quirks mode, it triggers standards mode just fine.
Why do the missing quotes bother you? If you want to manipulate the DOM elements, you don’t need the innerHTML string.

Is it OK to use a self closing DIV tag? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are self-closing tags valid in HTML5?
For example:
<div id="myDiv" />
Something would then be done to populate this div using Javascript.
Is this valid HTML?
No. HTML 4.x doesn't have any concept of self closing tags.
It is valid in XHTML.
Div's are not valid self closing tags. To have an empty div it would be better to do this:
<div id="myDiv"></div>
According to the XML declaration and the XHTML 1.0 and 1.1 document definitions, this is fine: the null-end tag (>) may be used when immediately following the null-end start tag closer (/), and your code is equivalent to <div id="myDiv"></div>.
It's a different matter entirely whether any particular consumer will be able to process this correctly.
The SGML declaration used by HTML 4.01 allows tag shortening, but it has a different syntax for the null-end tags; there you can write <div id="abc"/this is a non-empty div/. Again, mileage may vary as for browser support. (My money is on "none".)
Future versions of HTML (HTML5? if that name is still alive) are no longer implemented as SGML languages, and therefore they simply allow what they say they do, without recourse to a formal grammar.
I ran these two blocks of code through the W3C validator. Copy and paste the code into the input under the Validate by Direct Input tab to see the results for yourself.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" >
</head>
<body><div id="Mydiv" /></body>
</html>
The code block with Doctype of transitional HTML 4.01 failed the validation process.
<!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" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body><div id="Mydiv" /></body>
</html>
When I added the XHTML 1.0 transitional doctype, changed the meta tag to a self closing tag, and added in the html xmlns line, the validation passed.
So to answer the first half of your question, it is valid HTML under the XHTML 1.0 Transitional doctype. Whether or not you can use javascript to properly populate it, I am not sure.
Self Closing Tags in XHTML as implemented by browsers:
What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
Self Closing tags in html5:
Are (non-void) self-closing tags valid in HTML5?
No, it's valid XML (not HTML), and as far as I know, will only be accepted if the document is send with an application/xml mimetype.
However, it may work with XHTML, and the XHTML Doctype declaration.

Where can I find sample XHTML5 source codes?

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.

What is the functionality of !DOCTYPE?

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.

DOCTYPE tag problem

is it possible to use DOCTYPE tag in line 2 or 3 or ... and css works good ? (not line 1)
tag :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yes. As long as it comes before your <html> tag, you should be fine. This might happen, for instance, if you put an XML declaration above it. The xml declaration, however, must occur at the very beginning of the file.
Example:
<?xml version='1.0' charset='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>This is an example</title>
</head>
<body>
<h1>This is an example</h1>
<p>
You might even put an xml stylesheet declaration up above your
DTD declaration, which would look like this:
<code><?xml-stylesheet type="text/xsl" href="transform.xsl"?></code>
</p>
<p>But you still can't put any HTML above your DOCTYPE. Sorry.</p>
</body>
</html>
Seems like you are very persistent about doing strange things with your doctype. It's best you always use it AND put it on the first line of your document. If you go arround the web you'll find that almost every website has it like that.
Is there a reason why you don't want to do so?
IE6 will fall into quirks mode if you put anything (including an XML declaration) before the Doctype. So - "no".
Most browsers will fall into quirks mode (AFAIK) if any content appears before it. Don't use hosts who prevent you from using valid markup.
by standards, the DOCTYPE should be the first line. why would you not want to put it there anyways?