I have following code in the page head:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/html401-rdfa-1.dtd">
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">
If I try to validate this page with Validator.w3.org and do it with automatic doctype detecting, I get 174 errors and the doctype is shown as -//W3C//DTD HTML 4.01+RDFa 1.0//EN. Here is the validation result.
Then if setting the doctype manually to HTML 4.01+RDFa 1.1 and revalidate the page, the doctype is shown as HTML 4.01 Transitional, there are 2 errors and 2 warnings: Unable to Determine Parse Mode and DOCTYPE Override in effect! The validator seems not to understand my doctype and writes:
The detected DOCTYPE Declaration >!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.0//EN" "hxxp://www.w3.org/MarkUp/DTD/html401-rdfa-1.dtd"< has been suppressed and the DOCTYPE for "HTML 4.01 + RDFa 1.1" inserted instead...
If setting the validator up to show the source code, so i see, that the validator has a little bit another code, as the the page has. The validator changes the first line of the code to
<!DOCTYPE ><!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/html401-rdfa-1.dtd"> -->
and comments my right doctype out...`
Would somebody point me to the right doctype (or right syntax/workaround)?
Is there any reason why you are not using a more mainstream RDFa doctype such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
or even the more simple HTML5 doctype:
<!DOCTYPE html>
Do HTML 5 tags appearing in HTML 4 Transitional cause a performance issue? Will it validate?
Current doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 tags used:
<section> <header> <nav>
Do HTML 5 tags appearing in HTML 4 Transitional cause a performance issue?
No more so then if they appear in HTML 5.
Will it validate?
No, of course not. They weren't added until HTML 5.
I've got a site coded in XHTML 1.0 Strict. I want to use the new Microdata to add breadcrumbs to my site (so Google will understand them).
My old non-microdata marked-up breadcrumbs look like this:
<ul>
<li>Level 1</li>
<li>Level 2</li>
<li>Level 3</li>
</ul>
According to Google, to markup breadcrumbs using Microdata, you extend the above code like this:
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
...
</ul>
But this is not valid XHTML 1.0 Strict.
What should I do?
Should I ignore the validation conflicts?
Should I write itemscope="itemscope" instead of just itemscope (this would be valid XML, but still not valid XHTML)?
Should I change the Doctype to be HTML5 instead of XHTML 1.0 Strict?
I want this to work all the way back to IE6!
Please advice :)
Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).
itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.
For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.
I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:
http://www.nedprod.com/xhtml1-strict-with-html5-microdata.dtd
http://www.nedprod.com/xhtml1-transitional-with-html5-microdata.dtd
To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
or ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
... or more likely, override the DTD used for validation by your particular XML validating setup.
BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.
Hope this helps someone,
Niall
Valid HTML 5 example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<div itemscope="" itemtype="http://schema.org/MediaObject">
<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Breast Augmentation Video Diary">
<meta itemprop="duration" content="PT12M54S">
<meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
<meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
<meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&v=BwPN6eCpxTk">
<meta itemprop="uploadDate" content="2010-11-09">
<iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&autohide=1&modestbranding=1&showinfo=0"></iframe>
<span itemprop="description">Video Diary</span>
</div>
</div>
</body>
</html>
Found these links helpful:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/
Use the application/ld+json MIME type and a microdata generator to transform the markup into data:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<script type="application/ld+json">
{"items": [{
"type": ["https://schema.org/breadcrumb"],
"properties":{
"url": ["..."],
"title": ["Level 1"]
}
}]
}
</script>
</div>
</body>
</html>
or a data:uri in an object tag:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
</object>
<!--[if lt IE 8]>
<object data="mhtml://#foo">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
<div id="foo">
PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
</div>
</object>
<![endif]-->
</div>
</body>
</html>
I want this to work all the way back to IE6!
Use the application/xhtml+xml XSLT shim to support IE6 and extend it to get a copy of the markup.
References
MDN: Base64 Encoding and Decoding
Images in a Web Page
MIME E-mail Encapsulation of Aggregate Documents, such as HTML (MHTML)
Mapping Microdata to RDF
data:URI Tests
Examining, implementing and testing of RFC2557 (MHTML)
MHTML URIs
HTML5: Differences from HTML4
try and validate some of google's pages...they don't validate.
validation is a tool, an awesome one, but nothing more, although i do applaud your determination. if you're that worried about validation i would switch to HTML5 .
Given a view with layout, how can I load static files (CSS and JS, essentially) into the <head> from the view file?
layout.html
<!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" xml:lang="{{=T.accepted_language or 'en'}}">
<head>
<title>{{=response.title or request.application}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- include requires CSS files
{{response.files.append(URL(request.application,'static','base.css'))}}
{{response.files.append(URL(request.application,'static','ez-plug-min.css'))}}
-->
{{include 'web2py_ajax.html'}}
</head>
<body>
{{include}}
</body>
</html>
myview.html
{{extend 'layout.html'}}
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
<h1>Some header</h1>
<div>
some content
</div>
In the above example, the "myview.css" file is either ignored by web2py or stripped out by the browser.
So what is the best way to load page-specific files like this CSS file? I'd rather not stuff all my static files into my layout.
In myview.html reverse the first two lines
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
{{extend 'layout.html'}}
Mind that 1.78.1 and 1.78.2 had a bug did not allow this to work. It was fixed in 1.78.3 on the same day. The response.file.append(...) can also be moved in the controller action that needs it. You are not supposed to put logic before extend but you define variables to be passed to the extended view.
The project I work on takes random HTML files, converts them to XHTML as best as it can, and wraps them with some XML metdata. The DOCTYPE is stripped out as the resulting XML file is not an XHTML document. However when retrieving the wrapped XHTML from the XML file the DOCTYPE should be reinserted.
Because these are random HTML files they could contain any content, but I would prefer to not have to store or determine the original DTD. I figured that I should the Frameset DTD as it was just a superset of the Transitional DTD and would be valid for all content. However when using the W3C XHTML Validator with the same document, using the Transitional DTD passes but using the Frameset DTD fails.
I've stripped down the document to the minimum with which I can reproduce the problem. Here is the Frameset version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Make The Move</title>
</head>
<body style="background: none;">
<h3 id="why">Why should I move to Linux?</h3>
</body>
</html>
And here is the Transitional version:
<!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" xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Make The Move</title>
</head>
<body style="background: none;">
<h3 id="why">Why should I move to Linux?</h3>
</body>
</html>
Please explain why this is happening, and how I should proceed.
Frameset DTD is not a 'superset' of transitional. It is a special DTD only used for laying out frames, not content (except inside <noframes> tag). It allows only <head> and <frameset> as the children of <html> tag.
Here is the specification.
Unless you know your page could have frames, stick to transitional or strict DTDs.
As Chetan pointed out, the Frameset DTD should only be used in case you need frames, and even then, I would recomend on using Transitional instead. If you don't rely on frames, Strict is the way to go.