# First HTML5 site for a university computer lab

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">
<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>
<script src="/templates/js.1309283871.php"></script>
<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-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">
<h1><a href="/"><span>University Labs</span></a></h1>
<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">
<h2>What is uLabs?</h2>
<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>
<h2><span>uPrint</span></h2>
<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>
<ul>
<li><a href="http://helpdesk.illinoisstate.edu/kb/1134/">Overview of uPrint Mobile Printing</a></li>
</ul>
</aside>
<section id="locations">
<h3>uLab Locations</h3>
<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>

• 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? Oct 26 '12 at 20:37
• 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. Oct 26 '12 at 20:58

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.

• 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. Jul 8 '11 at 13:39
• I get the warning validating against CSS 3, too: jigsaw.w3.org/css-validator/… Jul 8 '11 at 13:50
• IMHO it's no different than variables in programming, where cryptically abbreviated variable names should be avoided, too. Jul 8 '11 at 13:51

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.