<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Typo</title>
<link href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="container">
<header>
<h1><a href="#" title="Return to the homepage">Typo</a></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="content" role="main">
<article>
<h2><a href="#">Getting your stock photos seen</a></h2>
<p>Lorem ipsum dolor sit amet[...]leo placerat.</p>
<ul class="postinfo">
<li>01 Feb 2013</li>
<li>Posted in <a href="#">Articles</a></li>
<li><a href="#">Continue Reading »</a></li>
</ul>
</article>
<nav id="pagination">
<ul>
<li class="older"><a href="#">« Older posts</a></li>
<li class="newer"><a href="#">Newer posts »</a></li>
</ul>
</nav>
</div>
<aside id="sidebar">
<section id="about">
<h3>About me</h3>
<p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more »</a></p>
</section>
<section id="categories">
<h3>Categories</h3>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Retro</a></li>
</ul>
</section>
<section id="search">
<h3>Search</h3>
<form method="get" action="#">
<fieldset>
<input type="text" id="searchbar" placeholder="I'm looking for…" />
<input type="submit" id="searchsubmit" value="Search" />
</fieldset>
</form>
</section>
</aside>
</div>
<div id="footer-container">
<footer>
<ul id="credits">
<li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li>
<li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li>
</ul>
<p id="back-top"><a href="#">Back to top</a></p>
</footer>
</div>
The static HTML file begins with a HTML5 Doctype and the usual content for the<head> section of the document, including the page title and link to the CSS stylesheet. Our design is using a somewhat unusual font courtesy of Google’s Web Fonts library, so the relevant code is also added. It’s important not to just straight swap your <div> tags for <section> tags when coding in HTML5, sometimes a <div> is still the most semantic choice, like when adding a wrapper or container div to your code.
One new HTML5 element we can make use of in place on a standard div is the<header> element, which can also contain a <nav> element to wrap our main navigation menu. The h1 is marked up as the blog title, with a handy anchor title describing where the link goes. If you remember in our concept we numbered the menu items, an obvious option would be to use an <ol>element, but semantically this isn’t correct because there’s no consecutive relationship between our menu links, the number is just for visual flair so we’ll add them later with CSS.
I originally used a <section> element to contain my page content, but after some reading it turned out this wasn’t 100% semantic. The preferred method would be to use a plain old <div>, but the addition of the ARIA role attribute of‘content’ ‘main’ (I mixed up the role and ID in the writeup!) gives a little extra meaning to the tag. Inside the content area each blog post can be contained in its own <article> tags with the usual HTML elements mocking up the dummy content.
Underneath the series of blog posts is a couple of pagination links. Usually pagination links wouldn’t qualify as being important enough for the <nav>element (which can be used in multiple places, not just for the main menu), but for a blog layout I see pagination links as one of the primary navigation elements to access further content.
Until the <aside> spec was revised it didn’t have a semantic use as a sidebar, but it can now be safely used without the semantic police knocking at your door. The sidebar in this design contains a number of various sections, which lend themselves well to being marked up with <section> tags over plain old divs.
At the bottom of the sidebar is a simple search bar, which allows us to touch on some of the handy new form related features in HTML5. The one feature we can make use of is the placeholder attribute, which allows us to enter a passage of text to create the popular in-field label effect.
The layout is then finished off with the footer area, which in the case of this design needs to be outside of the main container area to allow it to span across the whole page. The footer area itself fits well as a <footer> element and contains a couple of handy links.
No comments:
Post a Comment