Jazajay
Active Member
Hi peeps,
Right I scrapped my last site idea just wasn't practical so going with an idea of one that is, and one that will help me in my career as well.
So I've decided to do it all in HTML5.
Now here's my logic and I don't care if there is an easier way to pull it off I will explain why I want to do it this way.
What I want to do is to create two versions 1 (XHTML5) for IE9, Safari, Firefox, Opera and Chrome, another one (XHTML4) for IE7 and IE8 and serve them via a browser sniffer and a redirect to a version with ids and other mark-up, IE6 I going to forget about entirely.
The reason I want to do it like this is simple, purity.
IE9, Safari, Opera, Chrome, Firefox all/will support nth meaning I don't need Id's, border shadow, meaning no useless images, rounded corners again no useless images. In fact by reducing those I will save a minimum of 16 http requests and I should reduce my total http request down to around 5 or 6 in my current design meaning 1 fast site.
IE7 and IE8 will get a XHTML 4 strict page served with ids etc... just for them.
So here's my first crack at writing a solid XHTML 5 page, please note this is a XHTML 5 page and not a HTML 5 page, hence no doctype. I have followed the syntax I think to the letter off the W3C site but if I have misinterpreted it please can you let me know why I have.
Here's what the foundation layer will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page title</title>
<base href="" />
<link type="text/css" media="screen" rel="stylesheet" href="" />
<meta name="robots" content="noimageindex" />
<meta name="author" content="James Johnson" />
</head>
<body>
<header>
<object src="logo.png" title="Logo text"></object>
</header>
<section>
Page banner goes in here.
</section>
<nav>
<ul>
<li>Main navigation</li>
</ul>
</nav>
<section>
<header>
<h1>Main heading</h1>
</header>
<p>
Welcome text.
</p>
<hr />
<article>
<heading>
<a href="">Article heading</a>
</heading>
<p>
Article text
</p>
</article>
<article>
<heading>
<a href="">Article heading</a>
</heading>
<p>
Article text
</p>
</article>
</section>
<aside>
<heading>
<h2>Sub heading</h2>
</heading>
<ol>
<li>list</li>
<li>list</li>
</ol>
</aside>
<footer>
<heading>
<h3>Footer heading</h3>
</heading>
<ul>
<li>list</li>
<li>list</li>
</ul>
<heading>
<h3>Footer heading</h3>
</heading>
<ul>
<li>list</li>
<li>list</li>
</ul>
</footer>
</body>
</html>
Please note the headings in the articles don't contain HTML headers but do contain the header tag around them. This is because in my eyes, and here's my interpretation of the W3C code example. They are not sub headings to that section so don't deserve the h2 tag, but they are still headings, article headings, so still need to be marked up as such. Hence the header tag. Whereas the headings in the header tags in the aside and footer are actual sub headings to the page so therefore contain actual headings as well. The logo I'm iffy about placing it in it's own header tag, but I have seen on-line examples using it as such, and I'm just not sure if it is because they have misinterpreted it for that meaning and it should be placed in the section tag instead?
Question 2)
I am going to be using microformats in the page, they have just reached 5 billion web pages which for a sad geek like me is great news. However when you use microformats you need to declare the definitions via the profile attribute on the head tag this has been dropped in HTML5 and their solution is to add it to all Microformat sections which in my eyes is not a proper solution as it can/will add massive unnecessary bloat to the page.
So any one else got a decent one where I can add it once but not break HTML5 rules?
Cheers for all contributions.
Can we please keep this thread to talk about XHTML 5, not why I'm doing it, I'm spiteing myself what ever as I am only giving myself an hour a night 5 days a week to code it up, including my custom CMS, so any issues I want to get out of the way early.
Cheers Jaz.
O if someone on team DF could change the title to say HTML advice instead that would be great, what a dumbass. :lol:
Key:
Red - XHTML 5
Right I scrapped my last site idea just wasn't practical so going with an idea of one that is, and one that will help me in my career as well.
So I've decided to do it all in HTML5.
Now here's my logic and I don't care if there is an easier way to pull it off I will explain why I want to do it this way.
What I want to do is to create two versions 1 (XHTML5) for IE9, Safari, Firefox, Opera and Chrome, another one (XHTML4) for IE7 and IE8 and serve them via a browser sniffer and a redirect to a version with ids and other mark-up, IE6 I going to forget about entirely.
The reason I want to do it like this is simple, purity.
IE9, Safari, Opera, Chrome, Firefox all/will support nth meaning I don't need Id's, border shadow, meaning no useless images, rounded corners again no useless images. In fact by reducing those I will save a minimum of 16 http requests and I should reduce my total http request down to around 5 or 6 in my current design meaning 1 fast site.
IE7 and IE8 will get a XHTML 4 strict page served with ids etc... just for them.
So here's my first crack at writing a solid XHTML 5 page, please note this is a XHTML 5 page and not a HTML 5 page, hence no doctype. I have followed the syntax I think to the letter off the W3C site but if I have misinterpreted it please can you let me know why I have.
Here's what the foundation layer will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page title</title>
<base href="" />
<link type="text/css" media="screen" rel="stylesheet" href="" />
<meta name="robots" content="noimageindex" />
<meta name="author" content="James Johnson" />
</head>
<body>
<header>
<object src="logo.png" title="Logo text"></object>
</header>
<section>
Page banner goes in here.
</section>
<nav>
<ul>
<li>Main navigation</li>
</ul>
</nav>
<section>
<header>
<h1>Main heading</h1>
</header>
<p>
Welcome text.
</p>
<hr />
<article>
<heading>
<a href="">Article heading</a>
</heading>
<p>
Article text
</p>
</article>
<article>
<heading>
<a href="">Article heading</a>
</heading>
<p>
Article text
</p>
</article>
</section>
<aside>
<heading>
<h2>Sub heading</h2>
</heading>
<ol>
<li>list</li>
<li>list</li>
</ol>
</aside>
<footer>
<heading>
<h3>Footer heading</h3>
</heading>
<ul>
<li>list</li>
<li>list</li>
</ul>
<heading>
<h3>Footer heading</h3>
</heading>
<ul>
<li>list</li>
<li>list</li>
</ul>
</footer>
</body>
</html>
Please note the headings in the articles don't contain HTML headers but do contain the header tag around them. This is because in my eyes, and here's my interpretation of the W3C code example. They are not sub headings to that section so don't deserve the h2 tag, but they are still headings, article headings, so still need to be marked up as such. Hence the header tag. Whereas the headings in the header tags in the aside and footer are actual sub headings to the page so therefore contain actual headings as well. The logo I'm iffy about placing it in it's own header tag, but I have seen on-line examples using it as such, and I'm just not sure if it is because they have misinterpreted it for that meaning and it should be placed in the section tag instead?
Question 2)
I am going to be using microformats in the page, they have just reached 5 billion web pages which for a sad geek like me is great news. However when you use microformats you need to declare the definitions via the profile attribute on the head tag this has been dropped in HTML5 and their solution is to add it to all Microformat sections which in my eyes is not a proper solution as it can/will add massive unnecessary bloat to the page.
So any one else got a decent one where I can add it once but not break HTML5 rules?
Cheers for all contributions.
Can we please keep this thread to talk about XHTML 5, not why I'm doing it, I'm spiteing myself what ever as I am only giving myself an hour a night 5 days a week to code it up, including my custom CMS, so any issues I want to get out of the way early.
Cheers Jaz.
O if someone on team DF could change the title to say HTML advice instead that would be great, what a dumbass. :lol:
Key:
Red - XHTML 5