Criticise my html code please?

I have been given a jpg file as a test, to make it in html, which I did. I would like some opinions please of whatever I have done bad and hopefully I can learn something new.

The code must be semantic and valid, I will validate it after I will finish but I would first like to know what do I have to change or modify in order to have a better semantic code.

Thanks.


<!DOCTYPE html>

 <html lang="en-US" dir="ltr">
 
 <head>
 
 <meta charset="utf-8" />
 <meta name="description" content="National Lottery players raise Ł28 million a week for Good Causes. See how that funding has changed the UK for the better, and find out more about The National Lottery Awards." />
 <meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
 <title>The National Lottery</title>
 
 <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <link href="css/style.css" rel="stylesheet" />
 <link rel="shortcut icon" href="favicon.ico" />
 
 </head>
 
 <body>
 
 <div id="container">
  
  <header id="masthead">

  <div id="logo"><a href="#"><img src="images/logo.jpg" alt="The National Lottery logo" /></a></div>
  <div id="headline"><a href="#"><img src="images/logoGC.gif" alt="The National Lottery headline" /></a></div>
  
  <div class="nav clear">
  
   <nav id="nav" class="clear">
   
   <ul>
   <li><a href="home">Home</a></li>
   <li><a href="lottery-stories">Lottery stories</a></li>    
   <li><a href="media-centre">Media centre</a></li>    
   <li><a href="about-lottery-funding">About Lottery funding</a></li>    
   <li><a href="contact-us">Contact us</a></li>    
   <li><a href="cymru">Cymru</a></li>
   </ul>
   
   </nav>
  
  <form id="searchbox" action="">
  <input type="submit" value="Go" class="right"/>  
  <input type="search" name="search" class="right search">    
  <p class="right">Search </p>
  </form>
  
  </div>
  
  </header>
  
  <img src="images/header.jpg" alt=""/>
  
  <section id="content">
   
  <div class="sectionPhoto"></div>
  
  <h1>The National Lottery Awards - winners announced</h1>
  
  <p>Seven inspirational Lottery-funded projects have won the top honours at the finals of the 2007 National Lottery Awards.</p>
  
  <p class="darkRed">Find out more about "The National Lottery Awards - winners announced"</p>
  
  <div class="clear"></div>
  
  </section><!-- End #content -->
  
  <footer id="siteFooter">

  <ul>
  <li><a href="#">Email this page</a></li>
  <li><a href="#">Print</a></li>    
  <li><a href="#">Advanced search</a></li>    
  <li><a href="#">Accessibility</a></li>    
  <li><a href="#">Terms of use</a></li>    
  <li><a href="#">Site map</a></li>
  </ul>

  </footer>
  
 </div><!-- End #container -->
 
 </body>
 
 <!-- Load jQuery & jQueryUI from CDN. If CDN is not available, load from local copy -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

</html>

I had to use images as they were part of the text, otherwise I would have used a lot less and eventually make a sprite.

Every single criticism is welcomed, no matter how small. Thanks!

And the CSS:


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

aside,footer,header,menu,nav,section {
display: block;
}

body {
line-height: 1;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #5090cd;
}

#headline {
background: #fff;
float: left;
}

#logo {
background: #fff;
float: right;
}

a {
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}

input,select {
vertical-align: middle;
}

#container {
width: 760px;
-moz-box-shadow: 0 3px 10px 3px #366;
-moz-border-radius-bottomright: 0 3px 10px 3px #366;
-webkit-box-shadow: 0 3px 10px 3px #366;
-webkit-border-bottom-right-radius: 0 3px 10px 3px #366;
margin: 0 auto;
}

#content {
background: #fff;
font-family: Tahoma,sans-serif;
padding: 18px;
}

#content p,h1 {
float: left;
margin-left: 18px;
width: 400px;
margin-bottom: 12px;
}

header#masthead {
width: 760px;
height: auto;
background: #fff;
}

header#masthead ul {
list-style: none;
position: absolute;
}

header#masthead p {
color: #fff;
font-size: 13px;
padding: 7px 4px;
}

header#masthead ul li {
border-right: 1px solid #FFF;
display: inline;
padding-right: 5px;
}

header#masthead ul li:last-child,#siteFooter ul li:last-child {
border: 0;
}

header#masthead ul li a {
color: #fff;
}

header#masthead ul li a:hover {
border-bottom: 3px solid #fff;
}

#nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 17px;
font-size: 13px;
float: left;
padding: 7px 18px;
}

.nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 31px;
}

input[type="search"] {
border: 1px solid grey;
font-family: Georgia;
width: 100px;
margin-top: 4px;
-moz-box-shadow: inset 2px 2px 5px #ccc;
box-shadow: inset 2px 2px 5px #ccc;
-webkit-box-shadow: inset 2px 2px 5px #ccc;
padding: 2px;
}

input[type="submit"] {
color: #000;
background-color: #fff;
border: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin: 5px 10px 0 6px;
}

.sectionPhoto {
background-image: url(../images/news-item.jpg);
background-repeat: no-repeat;
width: 140px;
height: 140px;
float: left;
-moz-box-shadow: 3px 3px 3px #999;
-moz-border-radius-bottomright: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
-webkit-border-bottom-right-radius: 3px 3px 3px #999;
}

#siteFooter {
background: #fff;
height: 50px;
font-size: 13px;
padding: 18px;
}

#siteFooter ul li {
border-right: 1px solid #0f308d;
display: inline;
padding-right: 5px;
}

#siteFooter ul li a {
color: #0f308d;
}

h1 {
color: #0f308d;
font-size: 20px;
}

p {
color: #888c8d;
}

.left {
float: left;
}

.right {
float: right;
}

.bold {
font-weight: 700;
}

.clear {
clear: both;
}

.darkRed {
color: #954464;
}

Criticise my html code please?

semantic html

carlozdre

lucy24

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week