What happens when a XHTML DOCTYPE doesn't validate? - xhtml-1.0-strict

Life is good, using XHTML Strict with much success
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...Then, bam! You toss a Vimeo video onto your page that breaks validation.
<iframe src="http://player.vimeo.com/video/XXXXX?byline=0&portrait=0" width="468" height="351" frameborder="0"></iframe>
No iframes allowed, sir!
So, what impact does it have on the way the page renders, or impact on the visitor? Why care about the validation of this iframe?

It doesn't have an impact on the page itself. Unless you are worried about validation, I would stay with the transitional doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The iframe validation is solely up to you. Here is a list of elements that compare with each doctype.

Is it possible to embed the Flash player it as an <object> instead? Something like this:
<object width="400" height="300" type="application/x-shockwave-flash" data="url">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="uri" />
</object>
More info here:
Vimeo Flash Player (Moogaloop)

Nothing will happen. Browsers do not validate your (X)HTML and so <iframe> with your XHTML strict doctype will work just fine in all browsers. But if you want standards mode, and also want <iframe> to validate, I suggest the HTML5 doctype <!DOCTYPE html>

Related

Using class attribute instead of styleClass of a JSF component actually works, why?

As far as I understood, we needed to use styleClass= as the JSF components don't support using just class=.
I've noticed recently that some components that were using class= were still rendering correctly. As a minimal example,
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<h:inputText class="wut" anothertag="hi" value="me"/>
</h:body>
</html>
This produces
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<link type="text/css" rel="stylesheet" href="/individuallifefaz/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo"/>
<title>Simple JSF Facelets page</title></head>
<body>
<input type="text" name="j_idt5" value="me" class="wut"/>
</body>
</html>
Why is this working? It's clearly not just passing through any unknown tags, as the anothertag is stripped out.
This is actually done by the view technology Facelets, not by the JSF component itself. Facelets has an alias for class attribute which automatically maps to styleClass. This was implemented as part of support for jsfc attribute as used in "designer friendly Facelets" which should make things like this possible:
<input type="text" jsfc="h:inputText" class="foo" />
If you use JSF with a different view technology (although so far there's none which is a serious alternative to Facelets, and JSP is deprecated), then there's no guarantee that <h:inputText class> would work.
See also:
Is there a way to run a JSF page without building the whole project?

Open Graph tags in XHTML - "property" not known

after several hours of researching I really need your help.
I simply want to define the preview picture, when I post the website-url on facebook. I already added these meta properties to my website:
<meta property="og:image" content="image.png" />
<meta property="og:title" content="My Website" />
This is my Doctype Specification:
<!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" >
However, the attribute "property" does not exist. Yes, this is not new to xhtml. So I looked in older threads and extended the Doctype with RDFa, so now it looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0">
But this still doesn't work!
When I use the Open Graph Object Debugger from Facebook, it says:
"Based on the raw tags, we constructed the following Open Graph properties", and it shows many random images which are included in my website, but none of them are usable as preview picture.
I am really desperate and would greatly appreciate your help!
Edit: Can anybody help please :P

Embedded Youtube video won't play in Facebook app

I'm working on a simple FB app of a type I've done many times before. It works perfectly outside FB but once it's in FB, the youtube embed simply doesn't load.
I pulled the code out into a test file, and it still won't load. Here's the code:
<!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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<iframe width="669" height="391" src="http://www.youtube.com/embed/48P1jc5tyTw" frameborder="0" allowfullscreen></iframe>
</body>
Absolutely nothing displays when this is loaded as an app on a FB page. The FB debugger says "Can't Download Could not retrieve data from URL."
Any ideas?
Try changing the src of the iframe to "https://...".
Since Facebook is served over HTTPS, your browser will block any content from loading on the page that's not over HTTPS too. Fortunately, youtube supports https versions of their URLs.

Posting form to an iframe under strict XHTML (firefox)

For debug purposes, I run my page under strict XHTML while I develop it. But, right now, I realised, that such code will not work:
<!-- With header("Content-Type: application/xhtml+xml; charset=\"utf-8\"") -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!--blah blah blah-->
</head>
<body>
<form method="post" target="my_frame">
<button>Send the form!</button>
</form>
<iframe name="my_frame" src="about:blank"></iframe>
</body>
</html>
Try it here. And also try it with text/html content-type. I can, of course, disable the strict mode for the site, but here on SO my question is, how to get it to work a XHTML. (this means, how to make the 1. link work properly).
Fun fact: While testing the example, I noticed that <button> tag does not work in IE properly. Any ideas what's wrong? (that's side question of course)
For XHTML, use id rather than name as the attribute for the target on the iframe. For HTML/XHTML compatibility, use both a name and an id and make sure their values are the same.
However, take note that target is not a valid attribute on a form. So it won't validate, and its working is not guaranteed.
The IE one should have been another question, but IE needs type="submit" for buttons, even if that type is supposed to be the default.

Facebook namespace problem causing invalid code

I have seen various articles on this site and on google about how to make facebook code valid, but none of the solutions seem to work for me.
I think the problem lies in my doc type decleration:
<!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="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" >
...
<meta property="og:site_name" content="my site name" />
<meta property="og:title" content="Buy...
Can anyone point me in the right direction please?
John
I'm having a similar problem.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="nl-NL">
...
<meta property="og:type" content="book" />
That's how almost all examples are like, and strangely it validates on w3c's validator, however all other validators including CSE Html validator and http://check.rdfa.info need a og prefix in front of the meta tag:
<og:meta property="og:type" content="book" />
That validates in almost anything except the official w3c validator. Not sure if facebook will parse it either. Why they chose not to use "name" is a big mystery for me. What a fine mess!