homepage Welcome to WebmasterWorld Guest from 54.161.175.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 31 message thread spans 2 pages: < < 31 ( 1 [2]     
Criticise my html code please?
semantic html
carlozdre




msg:4378414
 8:49 pm on Oct 23, 2011 (gmt 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.

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

 

lucy24




msg:4386078
 10:19 pm on Nov 11, 2011 (gmt 0)

:: 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 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved