6
\$\begingroup\$

I've created and launched our first HTML5 site. I've done a lot of research in to the "best practices" for writing a page in HTML5 and put a majority of them to use. I was hoping someone wouldn't mind looking over the site and shouting back any comments, issues, or recommendations on it. I'm looking for anything, from code improvements, accessibility improvements, or optimization.

Some things I should share:

  • It doesn't work well in Internet Explorer 6, and I don't care!
  • It's using remy's html5shiv and a conditional stylesheet display:block'ing all the HTML5 elements for Internet Explorer 7/8 and Firefox 3.
  • The included JavaScript file probably will appear empty to anyone looking at it in a modern browser. I'm aware of the wasted HTTP request.
  • The CSS file includes a @import (barf), that I cannot control; it's part of our University's required header bar.

Site URL: http://ulabs.illinoisstate.edu/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="University Computer Labs at Illinois State University" />
<meta name="keywords" content="university labs ulabs u-labs illinois state computer" />
<title>University Labs - Illinois State University</title>
<link rel="stylesheet" href="/templates/style.1309283866.php" />
<link rel="shortcut icon" href="http://illinoisstate.edu/favicon.ico" />
<script src="/templates/js.1309283871.php"></script>
</head>
<body>
<div id="iguide-container">
    <a id="skip-iguide" href="#skipiguide" title="Skip the iGuide"></a>
    <script src="http://iguides.illinoisstate.edu/?red"></script>
    <noscript>
        <div id="iguide">
            <span id="iguide-isu"><a href="http://illinoisstate.edu"></a></span>
            <span id="iguide-admissions"><a href="http://admissions.illinoisstate.edu"></a></span>
            <span id="iguide-academics"><a href="http://illinoisstate.edu/home/academics"></a></span>
            <span id="iguide-events"><a href="http://events.illinoisstate.edu"></a></span>
            <span id="iguide-map"><a href="http://maps.illinoisstate.edu"></a></span>
            <span id="iguide-AtoZ"><a href="http://illinoisstate.edu/home/find"></a></span>
            <span id="iguide-access"><a href="http://illinoisstate.edu/home/accessibility"></a></span>
        </div>
    </noscript>
</div>
<a id="skipiguide"></a>
<div id="container">
    <header>
        <h1><a href="/"><span>University Labs</span></a></h1>
    </header>
    <nav>
        <a id="home" href="/" title="Home"></a>
        <a id="hd" href="http://helpdesk.illinoisstate.edu/" title="Help Desk"></a>
        <a id="emp" href="/employees/" title="Employees"></a>
    </nav>
    <div id="contentarea">
        <section id="welcome">
            <header>
                <h2>What is uLabs?</h2>
            </header>
            <p>uLabs at Illinois State is comprised of six computer labs containing a total of over 400 seats around campus open to Illinois State University students. These labs are located in Milner Library, Schroeder Hall, Stevenson Hall, Vrooman Center, Watterson Towers, and Whitten Hall.</p>
            <p>Supported by <a href="http://ctsg.illinoisstate.edu/ciss/">Computer Infrastructure Support Services</a>, the labs are equipped with state-of-the-art computers and printers. Each computer lab is equipped with basic software, such as Microsoft Office. Some uLabs also have specialized software and equipment.</p>
            <p>For information on each uLab, including hours, location, equipment, and software available, visit the links below.</p>
        </section>
        <aside>
            <header>
                <h2><span>uPrint</span></h2>
            </header>
            <p>Each uLab, with the exception of Milner, is fitted with a uPrint station. Milner Library's uPrint station is located behind the General Reference Desk.</p>
            <p>With uPrint, you can print from any computer on campus, including your own computer in your residence hall! For more information on uPrint and how to use it, follow the links below.</p>
            <ul>
                <li><a href="http://helpdesk.illinoisstate.edu/kb/1134/">Overview of uPrint Mobile Printing</a></li>
                <li><a href="http://helpdesk.illinoisstate.edu/downloads/1028/">Download uPrint Client for Windows</a></li>
                <li><a href="http://helpdesk.illinoisstate.edu/downloads/1028/">Download uPrint Client for Mac OSX</a></li>
            </ul>
        </aside>
        <section id="locations">
            <header>
                <h3>uLab Locations</h3>
                <p>Click a location for more information</p>
            </header>
            <div id="buildings">
                <div id="mlb"><a href="/loc/milner/">Milner Library 213B</a></div>
                <div id="sch"><a href="/loc/schroeder/">Schroeder Hall 230</a></div>
                <div id="stv"><a href="/loc/stevenson/">Stevenson Hall 250</a></div>
                <div id="vro"><a href="/loc/vrooman/">Vrooman Center 4</a></div>
                <div id="wat"><a href="/loc/watterson/">Watterson Towers 110</a></div>
                <div id="wht"><a href="/loc/whitten/">Whitten Hall 6</a></div>
            </div>
        </section>
    </div>
    <footer>
        <section id="contact_methods">
            <p><a href="mailto:ulabs@illinoisstate.edu">ulabs@IllinoisState.edu</a></p>
            <p><a href="http://ctsg.illinoisstate.edu/ciss/">Computer Infrastructure Support</a><br/>Campus Box 3430<br/>Normal, IL 61790-3430<br/>Phone: (309) 438-8800</p>
        </section>
        <section id="legal_statements">
            <p>Copyright 2011 &#169; <a href="http://www.illinoisstate.edu/">Illinois State University</a> &bull; <a href="http://www.ilstu.edu/home/diversity/">An equal opportunity/affirmative action university encouraging diversity.</a> &bull; <a href="http://www.ilstu.edu/home/privacy/web_privacy_notice.pdf">Privacy Policy</a></p>
        </section>
        <section id="university_initiatives">
            <p><a href="http://illinoisstate.edu/"><img src="/templates/images/footerReggieGrey.png" width="40" height="46" alt="Illinois State University" /></a></p>
        </section>
    </footer>
</div>
<script src="http://analytics.illinoisstate.edu/"></script>
</body>
</html>
\$\endgroup\$
  • \$\begingroup\$ Why are you using javascript for the menu? I don't see anything with the menu that can't be done without JS. This would also eliminate the noscript problem that RoToRa addressed below. Why not maintain only one version of the menu and do it in html/css only? \$\endgroup\$ – Hawken Oct 26 '12 at 20:37
  • \$\begingroup\$ I believe you're referring to the section containing the iGuide as a menu? If so, that's not a menu. It's a required piece for our University. The reason it is based in JS is for emergencies on campus and other more technical reasons. \$\endgroup\$ – Michael Irigoyen Oct 26 '12 at 20:58
4
\$\begingroup\$

I only have a few small points:

  • The CSS Validator warns about the missing type attribute in the style sheet link. I'm aware it's not really needed, but I would add it nevertheless.

  • Some people say, that <noscript> should be avoided, so it's something one can think about. However in this case, I believe, it's sensible to use it.

  • I would use longer ids. Some are unnecessarily short such as hd, emp and the ones of the buildings.

\$\endgroup\$
  • \$\begingroup\$ Thanks for taking the time to leave some feedback! I think the validator only warns about a missing type if you validate against CSS 2.1 rules, but against CSS3 rules, it doesn't. I know the HTML5 spec says it's optional. Would you still add it back? Also, the <noscript> is something I really can't control, because that's how ISU does their header bar. It's annoying and I wish there was a better way to handle that. Lastly, why would you use longer ID's? I've actually never heard of anyone suggesting that. \$\endgroup\$ – Michael Irigoyen Jul 8 '11 at 13:39
  • \$\begingroup\$ I get the warning validating against CSS 3, too: jigsaw.w3.org/css-validator/… \$\endgroup\$ – RoToRa Jul 8 '11 at 13:50
  • \$\begingroup\$ IMHO it's no different than variables in programming, where cryptically abbreviated variable names should be avoided, too. \$\endgroup\$ – RoToRa Jul 8 '11 at 13:51
1
\$\begingroup\$

I've been working on my first "robust" html5 project - and I generally find that usage guidelines for semantic markup is "still being worked out", or to put it another way, that standards for semantic grouping haven't yet been well established.

That being said, I've found the basic pattern of

<header>
<section>
<footer>

to be quite useful, and I've been running with that rule. So, if I was to comment on your otherwise quite clean markup, it would just be to question if some of your structural <div> may be better purposed as <section>s (specifically <div id="contentarea">). Just a thought.

You use <ul> to contain helpdesk links, but <div> to contain building links. Any reason you went with a <div> for id="buildings"?

I also feel like <noscript> is questionable, but probably used appropriately here.

Overall - nice markup.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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