Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use HTML5 features with XHTML

Tags:

html

xhtml

I need some help with web programming. I have to do this assignment from school and the prof has given details on the structuring. One of them is that my site should be XHTML compliant (Strict or Transitional). Another is that I need to use at least one HTML5 feature. How do I use an HTML5 feature if none of the new tags will validate with XHTML?

I am declaring it as XHTML 1.0 Transitional.

Here is my HTML code where I am having trouble.

<body id="index" class="home">
<header id="banner" class="body">
<h1><a href="#">Header1 </a></h1>

<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>

</header>
</body>

In the line with header and nav, it says the elements are undefined and that there are no attributes id and class in header. Please help.

Thanks.

like image 564
J H Avatar asked Oct 08 '12 20:10

J H


People also ask

Can I use XHTML in HTML5?

XHTML is not compatible with the IE8 and other older versions of the browsers. HTML5 is capable of using XHTML style tags but not vice versa.

Does HTML allow XHTML?

XHTML syntax is very similar to HTML syntax and all the valid HTML elements are also valid in XHTML. But XHTML is case sensitive so you have to pay a bit extra attention while writing an XHTML document to make your HTML document compliant to XHTML.

Should I use HTML5 or XHTML?

While XHTML was designed to be a better version of HTML4 by incorporating some features of XML, HTML5 turned out to be far better than the both and is by far the most widely used markup language today because of the addition of many essential features.

Is XHTML dead?

Yes unfortunately XHTML is gone.


2 Answers

The interpretation of the assignment that seems to make most sense is that you are required to use XHTML linearization of HTML5, also known as XHTML5. This simply means that you use HTML5 like anyone else but do that using general XML principles.

In the example case, this would mean the following markup:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body id="index" class="home">
<header id="banner" class="body">
<h1><a href="#">Header1 </a></h1>

<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>

</header>
</body>
</html>

The XHTML 1.0 doctypes are something quite different. They define fixed versions of HTML, so you cannot use, in the static markup, anything not allowed by those versions, i.e. anything that is new in HTML5 as compared with XHTML 1.0 and HTML 4.01 (which is what “HTML5 feature” probably means in the assignment). The requirement “XHTML compliant (Strict or Transitional)” is obscure, but if it is meant to refer to XHTML 1.0 specifically, then the assignment is self-contradictory (unless you are supposed to use client-side scripting to get to “HTML5 features”).

(This answer was largely rewritten thanks to @Alohci’s comments.)

like image 92
Jukka K. Korpela Avatar answered Oct 03 '22 03:10

Jukka K. Korpela


Depending on your assignment's definition of "HTML5", this is impossible with markup alone. A document cannot use a new HTML5 element while remaining compliant with any of the XHTML 1.0 doctypes.

However if you're allowed to use JavaScript APIs that were introduced with HTML5, such as localStorage, you may be able to get away with writing a script to access those APIs while not using any new HTML5 elements like <header> or <nav>. Those APIs are not tied to HTML5 markup and so can be used with any flavor of markup, but are generally called "HTML5 features" anyway.

like image 23
BoltClock Avatar answered Oct 03 '22 02:10

BoltClock