12
\$\begingroup\$

Writing a new site, has anyone got any comments on the HTML here? Is it all semantically correct? Thanks! This will basically be the template, so I want to make sure it's pretty perfect.

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Scirra.com</title>
    <meta name="description" content="Construct 2 is a free open source HTML5 games creator." />
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="css/default.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>

    <script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>
    <link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" type="text/css" />

    <link href="plugins/jquery.twit.0.2.0/twit.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="plugins/jquery.twit.0.2.0/twit.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#coin-slider').coinslider({ width: 470, height: 261, spw: 8, sph: 4, delay: 7000, effect: 'straight', hoverPause: true });

            $('#twitterFeed').twit('Scirra', {
              limit: 5,
              label: '',
              icon: false,
              count: 20
            });
        });
    </script>

    </head>

<body>

<div class="topBar"></div>
<div class="mainBox">
    <div class="headWrapper">
        <div class="searchBox">
            <div class="searchContent">
                <input type="text" id="SearchBox" />
                <div class="s searchIco"></div>
            </div>
        </div>
    </div>
    <div class="topMenu">
        <a href="#" class="topNormal">Main Link</a>
        <a href="#" class="topNormal">Mainy Link</a>
        <a href="#" class="topSelWrapper">Main Link</a>
        <a href="#" class="topNormal">Main Link</a>
    </div>
    <div class="subMenu">
        <a href="#" class="subSelWrapper">Another Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
    </div>
    <div class="contentWrapper">
        <div class="wideCol">
            <div class="s slideShowWrapper">
                <div id='coin-slider'>
                    <a href="#" target="_blank">
                        <img src='images/screenshot1.jpg' >
                        <span>
                            Scirra software allows you to bring your imagination to life
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot2.jpg' >
                        <span>
                            Export your creations to HTML5 pages
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot3.jpg' >
                        <span>
                            Another description of some image
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot4.jpg' >
                        <span>
                            Something motivational to tell people
                        </span>
                    </a>
                </div>
            </div>
            <div class="newsWrapper">
                <h1>Latest from Twitter</h1>
                <div id="twitterFeed"></div>
            </div>
        </div>
        <div class="thinCol">
            <h1>Main Heading</h1>
            <p>Some paragraph goes here.  It tells you about the picture.  Cool!  Have you thought about downloading Construct 2?  Well you can download it with the link below.  This column will expand vertically.</p>
            <a class="blueLinkBox" href="#">Learn More</a><div class="clear"></div>
            <h2>Help Me!</h2>
            <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>
            <a class="blueLinkBox" href="#">Learn More</a><div class="clear"></div>
            <h2>Why Download?</h2>
            <p>As well as other features, we also have some other features.  Check out our <a href="#">other features</a>.  Each of our other features is really cool and there to help everyone suceed.</p>
            <a href="#" class="s downloadBox">
                <div class="downloadHead">Download</div>
                <div class="downloadSize">24.5 MB</div>
            </a>

        </div>
        <div class="clear"></div>

        <h1>This Weeks Spotlight</h1>
        <div class="halfColWrapper">
            <img src="images/spotlight1.png" class="spotLightImg" />
            <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it.</p>
            <a class="blueLinkBox" href="#">Learn More</a>
        </div>
        <div class="halfColSpacer">&nbsp;</div>
        <div class="halfColWrapper">
            <img src="images/spotlight2.png" class="spotLightImg" />
            <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from?</p>
            <a class="blueLinkBox" href="#">Learn More</a>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="footer">
    <div class="footerContent">
        <div class="footerItem">
            <h3>Community</h3>
            <a href="#">The Blog</a><br />
            <a href="#">Community Forum</a><br />
            <a href="#">RSS Feed</a><br />
            <a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank"></a>
            <a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank"></a>
            <a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank"></a>
        </div>
        <div class="footerItem">
            <h3>About Us</h3>
            <a href="#">Contact Information</a><br />
            <a href="#">Advertising</a><br />
            <a href="#">History</a><br />
            <a href="#">Privacy Policy</a><br />
            <a href="#">Terms and Conditions</a>
        </div>
        <div class="footerItem">
            <h3>Want to Help?</h3>
            You can contribute to Scirra software as it is <a href="#">Open Source</a>.  We welcome all contributions, and there are lots of ways to join in!<br />
            <div class="ralign">
            <a href="#"><strong>Learn More</strong></a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="copyright">
    Copyright &copy; 2011 Scirra.com.  All rights reserved.
</div>
</body>
</html>

Looks great in all browsers, but want to check it's valid markup and as perfect as it could be.

\$\endgroup\$
5
  • \$\begingroup\$ The validator says it looks good. \$\endgroup\$
    – Josh K
    Commented Feb 20, 2011 at 21:11
  • \$\begingroup\$ Why such a short DOCTYPE? \$\endgroup\$
    – Peter Taylor
    Commented Feb 20, 2011 at 22:51
  • 7
    \$\begingroup\$ @Peter I was under the impression that's the HTML5 doctype \$\endgroup\$
    – Tom Gullen
    Commented Feb 20, 2011 at 23:03
  • \$\begingroup\$ @Peter no worries! I was also pleasantly surprised to see that is the new doctype. \$\endgroup\$
    – Tom Gullen
    Commented Feb 21, 2011 at 9:05
  • 4
    \$\begingroup\$ always declare the charset first (before the title and meta description) \$\endgroup\$
    – Knu
    Commented Feb 22, 2011 at 17:20

3 Answers 3

Reset to default
17
\$\begingroup\$

If you are going with HTML5, I would suggest a few more things:

  1. Lose the type="text/javascript" from the script tags - you don't need them in HTML5
  2. Same goes with type="text/css" on link tags
  3. Keep your self-closing XML syntax consistent - on some tags you have the closing />, on some you don't (it doesn't matter which way, just make it consistent)
  4. Consider placing .js files at the bottom of the document - that way the page can start rendering before it's downloaded them all. Often these are required for post-rendering functions anyway - so do your users a favor and put them at the bottom of the document.
\$\endgroup\$
3
  • 2
    \$\begingroup\$ On the HTML5 kick, I'd consider using the new semantic tags such as header and footer instead of a div with a class. nav looks appropriate in this case too. \$\endgroup\$
    – Sapph
    Commented Feb 26, 2011 at 13:24
  • \$\begingroup\$ Agreed - for a great intro to HTML5, I recommend diveintohtml5.org. \$\endgroup\$
    – wows
    Commented Mar 14, 2011 at 23:45
  • \$\begingroup\$ Improvement: the defer and async attributes can be used on the script tag so it stops delaying page load. \$\endgroup\$
    – ANeves
    Commented Feb 27, 2012 at 10:33
9
\$\begingroup\$

Some things that come to mind:

  • Load .css resources before .js resource for faster loading
  • Don't use inline javascript
  • Use an <ul> with <li> items for a menu, this is semantically more correct
  • Always use an alt tag on <img>
  • Don't use <br> tags, use <p> if we're talking about text. Use css (display:block) if you want to force an element to the next line.
  • Use IDs when there is only one occurence per page, e.g. <div id="footer">
\$\endgroup\$
0
6
\$\begingroup\$

Looks like a lot of extra <div>s, as far as I can see. Why do you have .footer and .footerContent? Generally a <div> without any siblings can be killed.

And that header looks really out of control. Any reason for wrapping the input and search icon in 4 lonely <div>s?

You should also avoid this: class="blueLinkBox". Because what happens when you change your design to be orange? Would you then rename all your link boxes, or just try to remember that blueLinkBox are those orange boxes? Name your classes by their content. .importantLink or .readMoreLink might be better names.

You also have some links without any content or title attribute, which is bad for screen readers, seo and other stuff that can't "see" your website.

It's not a good idea to have multiple <h1>s on one page. There are of course exceptions (eg: scrolling-for-navigation), but this page doesn't seem to fit... Because what you're saying now is that "this weeks spotlight" is as important as the main features of your product, which I'm guessing (hoping) is not the case.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.