xhtml & html, are there more differences than just the syntax? - html

I have to hand in a thesis at the university where I have to create a website in xhtml.
We are not allowed to deliver this file in Html 5.
Since all the youtube tutorials and almost all forums only explain about html5, my question is. If I save the file in xhtml and follow the syntax correctly, can I also use every command that is available in html5?
Or are there other restrictions?
I thank you in advance for all replies.
I have to hand in a thesis at the university where I have to create a website in xhtml.
We are not allowed to deliver this file in Html 5.
Since all the youtube tutorials and almost all forums only explain about html5, my question is. If I save the file in xhtml and follow the syntax correctly, can I also use every command that is available in html5?
Or are there other restrictions?

A XHTML page includes some strict elements and is a more strict and standardized version of HTML, with a syntax that follows the rules of XML - that's what makes it different from an HTML page. For instance, all elements must be in lowercase, empty elements must be closed with a closing slash, and attribute values must be quoted. Also, XHTML requires the use of Unicode encoding (UTF-8 or UTF-16).
Example:
<!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" xml:lang="en" lang="en">
<head>
<title>My XHTML Page</title>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This is an example of an XHTML page. It follows the syntax rules of XML and is more strict than HTML.</p>
<ul>
<li>All elements must be properly nested and closed.</li>
<li>All attributes must be quoted.</li>
</ul>
<p>Here are some examples of strict elements that are required in XHTML but not in HTML:</p>
<ul>
<li>All elements must be in lowercase.</li>
<li>Empty elements must be closed with a closing slash (e.g., '<br />').</li>
<li>Attribute values must be quoted (e.g., 'href="http://example.com"').</li>
</ul>
<p>Here is an example of a strict XHTML form:</p>
<form action="http://example.com/submit" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Bottom-line: Yes, you can use most HTML5 elements and attributes in an XHTML document.

Related

there is no attribute "placeholder" and there is no attribute "autocomplete"

I have the following errors on my page, when validated with http://validator.w3.org/
there is no attribute "placeholder"
there is no attribute "autocomplete"
in details it says:
Line 59, Column 81: there is no attribute "placeholder"
…rd" type="text" style="width:500px;" placeholder=" What" autocomplete="off" />
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in
the document type you are using, as an undefined element will have no
supported attributes; in this case, see the element-undefined error
message for further information.
How to fix: check the spelling and case of the element and attribute,
(Remember XHTML is all lower-case) and/or check that they are both
allowed in the chosen document type, and/or use CSS instead of this
attribute. If you received this error when using the element
to incorporate flash media in a Web page, see the FAQ item on valid
flash.
the html tag is here: <input name="keyword" id="keyword" type="text" style="width:500px;" placeholder=" What" autocomplete="off" />
If you are using html5 then you should use normal doctype.
<!DOCTYPE HTML>
<html>
<head>
<TITLE>My first HTML document</TITLE>
</head>
<body>
<input name="keyword" id="keyword" type="text" style="width:500px;" placeholder=" What" autocomplete="off" />
</body>
</html>
if you are using html4 or anything else then you can use following one of this
<!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">
For more info..
http://www.w3.org/TR/html-markup/syntax.html#normal-doctype
make sure your using the html5 doctype <!DOCTYPE html>
And that the validator is validating HTML5

What are the allowed ways to close self-closing tags for void elements such as <br> in HTML5?

In HTML5 is it still appropriate to close a <br> tag with <br />?
This obviously also applies to all other single tags. I realize this doesn't actually affect how stuff works, but what is best practice here?
someLines of txt <br> // How you see a lot of people doing it
and then some <br /> // XHTML style! Should I still be doing this?
ow im not done yet.. <br> </br> // No one does this right? RIGHT?!
From the W3C specification for HTML:
The following is a complete list of the void elements in HTML:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
Void elements only have a start tag; end tags must not be specified for void elements.
Start tags consist of the following parts, in exactly the following order:
A < character.
The element’s tag name.
Optionally, one or more attributes, each of which must be preceded by one or more space characters.
Optionally, one or more space characters.
Optionally, a / character, which may be present only if the element is a void element.
A > character.
From this it seems that we can use either <br> or <br/>. However, the end tag </br> is not valid, so don't use <br> </br>.
Running the following through the HTML Validation Service indicates as much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing void elements</title>
</head>
<body>
some lines of txt <br>
and then some more <br />
I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>
So use either <br> or <br/>, just make sure you use them consistently.
Edit: As noted by Brad, <br /> is also valid XHTML, so perhaps it is best to choose this form.
IMHO I think its best to adhere to XHTML standards, even closing the so-called void elements as noted by #Alex. If your code is also valid XML then you may find better tool support for managing your code
<br> // not valid XML without a closing tag
<br /> // valid XML and I prefer this
<br></br> // valid XML but unnecessary clutter
In anycase if you should run your code through the HTML Validation Service. As long as it's valid you're then only dealing with coding style, of which everyone will have their own personal slant on the issue.
[EDIT]
To clarify my answer, I suggest the use of either of these XHTML headers...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you're coding for HTML5 then the clients/browsers should support the strict standard
It is more important that you are consistent, if you use the <!DOCTYPE html> then tags that are void or self closing as some say, will be handled for you by the parser.
Decide on one approach and stick to it, we decided to go with xhtml style syntax but we don't acutally use xhtml. Even though the parser is more lenient its other people that need to be able to understand your markup, so if you have a standard and everyone buys in to this, then everyone is singing from the same hymn sheet.
Why do we need conventions? Because all the following are valid:
<META CHARSET=UTF-8>
<META CHARSET=UTF-8 />
<META CHARSET="UTF-8">
<META CHARSET="UTF-8" />
<meta charset=utf-8>
<meta charset=utf-8 />
<meta charset="utf-8">
<meta charset="utf-8" />
<MeTa CHARset=utF-8>
Another thing to think about is html5 attributes, we decided to use the boolean style attributes at the end of a set of attributes and always use quotes around the others eg:
<video id=“vid1” data-someting="my_val" controls>
This way we don't have to use the redundant syntax (in my opinion):
<video id=“vid1” controls="controls">
Just because html5 lets us leave out closing tags, even the </p> tag, it doesn't make it right.
I hope that you decide to go with xhtml 'sytle' syntax for your own sanity!
The / is valid & ignored in html 5 for void elements, of which br is one, so its entirely up to you although personally I would get out of the habit as its a legacy thing. (The fact its a void element means that as you say; <br> </br> is nonsensical)
After learning about self-closing tags from the linked article I came to know that <br>, <br/> or <br /> all are valid in HTML5.
But if you write <br/> or <br /> then they will eventually be converted to <br> in HTML5 by browsers.
Also if you write <br></br> they browser will not generate some error but it will read it as 2 <br> tags.
someLines of txt <br> // This is completly valid and recommended
and then some <br /> // XHTML style! should be written like this in XHTML but in HTML5 you can just write <br>
ow im not done yet.. <br> </br> // Even if you do this then no error will generate. Instead browser will read it as 2 <br> tags
Here is how:
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
<p>closing br is wrong way <br></br> but browser read it as 2 br.</p>
How it looks in the browser:

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.

Can a <hr /> element have a closing tag?

My colleague doesn't really know or understand html. Her job is to input information into the CMS and I've noticed she keeps closing her <hr /> tags like this <hr></hr>.
I've had a Google but I can't find anywhere that says this isn't allowed or could cause problems. I know it's supposed to be <hr /> but is it worth me telling her or is it unnecessary but valid markup?
NB The doctype for our website is
XHTML 1.0 Transitional if that makes any difference.
EDIT
#Jeff had a good idea about validating. I used the following code and apparently this is valid XHTML 1.0 Transitional
<!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>
<title></title>
</head>
<body>
<hr></hr>
</body>
</html>
OK, <hr></hr> is actually a valid XHTML 1.0, too.
So, for XHTML 1.0:
<hr /> is valid
<hr></hr> is valid
<hr> is not valid
... for HTML 4.0:
<hr /> is valid
<hr></hr> is not valid
<hr> is valid
therefore the best option is to use <hr />, which is always valid.
HTML 4 says:
Start tag: required, End tag: forbidden
And as XHTML basically means that HTML tags need to have a closing tag, I would say <hr /> is the only format you should consider.
As the others say, <hr></hr> is valid XHTML (they even use it as example) but for compatibility reasons I would not use it.
<hr /> is merely shorthand for <hr></hr>; both are acceptable in XHTML documents. However, neither are acceptable in HTML documents, where <hr> should be used instead, which in turn is invalid in XHTML.
No. <hr /> should not have a closing tag.
It is invalid HTML.
It is valid XML and therefore technically it's valid xhtml, but you still shouldn't use it, even if you're using xhtml.
This is because all the browsers actually use their HTML parser even when rendering xhtml code, and therefore the a closing </hr> tag is seen as an error. Some browsers may even mis-interpret it as an additional <hr> element.
The only cross-browser compatible way of doing it is either <hr> (ie plain HTML) or <hr /> if you want to have a valid xhtml document.
As far as I know there is no closing hr tag. The tag is purely self closing and the Doc Type Definition will reflect this.
Since it's an empty element, it makes no sense to have open and close tags.
However, XML requires all tags to be closed, hence the <hr /> form.
I suppose in HTML, not XML, <hr></hr>is valid, but unnecessary.
The HR element draws a horizontal rule. This is a block element and does not require a closing tag.
Ref: http://msdn.microsoft.com/en-us/library/bb159725.aspx

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.