HTML check over

Renniks

Renniks

Senior Member
Well it's been a while since I actually put finger to key and wrote up some html.
After reading quite a few sites I decided I was going to jump straight back in with some HTML5 and go along that route.
Was wondering if my code could be checked over and a few questions I have answered :)
Thanks

(indenting is removed in quotes & will be amending/removing the style sheets as necessary when styling)
CODE:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Mark Skinner" />

<title>&uarr; SiteName, Cardiff Web Development | Homepage</title>

<base href="http://SiteName.com/" />

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if IE 8]><link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<!--[if lte IE 7]><link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<!--[if IE 6]><link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

<link href="css/hr.css" rel="alternate stylesheet" type="text/css" media="screen" title="High Readability Style" />

<!--[if lte IE 8]><script src="html5.js" type="text/javascript"></script><![endif]-->

<link rel="icon" type="image/gif" href="fav.gif" />
</head>
<body id="home">
<header>
<h1>SiteName</h1>
<h2>Cardiff Web Design & Development</h2>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>

<p id="contact">Contact me: </p>
<p id="call">+44(0)123456789</p>
<p id="email">[email protected]</p>

<hr />

<div id="Content">
<section>
<h3>About Me</h3>
Information about me
</section>
<section>
<h3>My Latest Work</h3>
Section for latest work
</section>
</div>

<hr />

<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>

<p id="copy">&copy;2010 Mark Skinner</p>
</footer>

</header>

<!--Insert Javascript here-->

</body>
</html>
Click to expand...

Ok and my questions :

  • Any issues straight away with the above code?
  • Are any other meta tags worth having?
  • Should there be a reset CSS sheet? or just include it in the standard sheets
  • Should the html5 js be at the bottom with standard JS as this is for initial styling purposes
  • Should the contact details (contact me) be in an 'aside' tag (or any others for that matter)
  • Opinions on the use of <hr /> even though in this case It has been done for purely ease of editing (easier to see the 3 sections quickly)

Thanks :D

Renniks
 
+ Hmmm. I think that the scetion element could be used for the <div id="content"> and then each subsequent part as an article but I don't know. That's one to look into rather than follow me on.
+ Look into the hgroup element.
+ You don't really need that many IE specific stylesheets do you?!?!
+ Pop as much CSS as you can into single files, ergo no reset.css—just put it at the top of your main stylesheet.
+ Why is 'Contact me:' marked up as a paragraph?
+ HTML5 isn't widely enough supported yet—I really wouldn't recommend using it on a live site.
 
Cheers for the reply Harry :)

Regarding using the section, the Section element spec says not to use it as a general container, and to use div's instead for that.

Will have a look at that element :)

No, not even close, I mentioned above the code I would be ammending and removing some of them, just put them in so I remembered to check all the styling for IE (and other browsers for that matter)

Had put it in the main stylesheet, just wanted clarification to the standard way of doing things.

I'm not quite sure why contact me is a paragraph, it shouldn't be :p




Hm, against your advice I feel I will still use it.
The majority of A-grade browsers support it well enough that using the tags I have above will function perfectly as they should.
The one key issue is with the internet explorer, so using JS to solve it and hence it renders as expected. IF the user has javascript turned off, as long as everything is still semantically correct it will display the information I want it to, in the same manner it would if (most) CSS was turned off or if it was being displayed in a screen reader.

(article for better information : How to get HTML5 working in IE and Firefox 2 | HTML5 Doctor )
 
Renniks said:
…Hm, against your advice I feel I will still use it.
The majority of A-grade browsers support it well enough that using the tags I have above will function perfectly as they should.
The one key issue is with the internet explorer, so using JS to solve it and hence it renders as expected. IF the user has javascript turned off, as long as everything is still semantically correct it will display the information I want it to, in the same manner it would if (most) CSS was turned off or if it was being displayed in a screen reader.

(article for better information : How to get HTML5 working in IE and Firefox 2 | HTML5 Doctor )
Click to expand...

The majority of browser don't support HTML5—they support invented elements. To Firefox <header> means just as much as <somemadeupelement>. Relying on JS for layout is a very bad idea IMO.

Just my 2 cents…
 
You must log in or register to reply here.
Back
Top