Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Criticise my html code (semantic)?

    Hi there,

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

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

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Stop using XHTML syntax.
    You may want to find better, cleaner ways of clearing.
    Classes right and darkred are clearly not semantic.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    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?!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •