...

View Full Version : Criticise my html code (semantic)?



carlozdre
10-23-2011, 10:53 PM
Hi there,

Is there any way I can write the following better? Every single criticism is welcomed, no matter how small. Thank you.



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

Apostropartheid
10-23-2011, 11:49 PM
Stop using XHTML syntax.
You may want to find better, cleaner ways of clearing.
Classes right and darkred are clearly not semantic.

carlozdre
10-24-2011, 02:09 PM
Stop using XHTML syntax.
You may want to find better, cleaner ways of clearing.
Classes right and darkred are clearly not semantic.

Thank you.

1. Removed the XHTML syntax.
2. Could you point me in the right direction regarding those classes? A hint/keyword to look for please?

3. Used overflow: auto for containing element. It worked well with the section but in the header it messes everything up and I don't understand why?!



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum