Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Criticise my html code please?

semantic html

8:49 pm on Oct 23, 2011 (gmt 0)

New User

10+ Year Member

joined:Mar 24, 2007
votes: 0

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.


<!DOCTYPE html>

<html lang="en-US" dir="ltr">


<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" />



<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">

<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>


<form id="searchbox" action="">
<input type="submit" value="Go" class="right"/>
<input type="search" name="search" class="right search">
<p class="right">Search </p>



<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">

<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>


</div><!-- End #container -->


<!-- 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>


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;
10:19 pm on Nov 11, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 403

:: quick edit when I see we're on a new page, causing me boundless confusion ::

Yes, it is and is utf-8, I have double checked.

OK, no worries then. The Forums just worked their magic, probably based on your browser's default settings. (Mine defaults to "automatically detect", which can have interesting results ;))
This 31 message thread spans 2 pages: 31

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members