skip to content

The Sun on Your Face

Blog Entry: HTML5 and CSS3

HTML5 and CSS3

Development

15th April 2010

HTML 5

I decided to write this blog site using HTML 5 and CSS3 so that I could experiment with the new tags and styles which are available. I particularily wanted to investigate what impact these new features might have on accessibility within web design. I am very much at the beginning of that road.

I have probably stretched the structure of the site so that I can include and manipulate a variety of these new elements available in HTML 5. For example, I have included an <aside> tag in some of the blogs to add extra information and styled it accordingly. There has been some debate as to the correct use of this tag, but the W3C specification defines it as:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

I have also tried to demonstrate the flexible use of the <footer> element throughout a page by using it to hold the information specific to each individual blog article, in addition to its use as a page footer.

Wherever possible I have tried to use CSS selectors in combination with the HTML structure to target elements so as to avoid the overuse of classes.

The basic structure of all the pages are based on a <header>section which contains a <hgroup> and the main navigation within a <nav> element.

	     
    <header>
	  <hgroup>
	    <h1>Main Heading</h1>
	   	  <h2>Subheading</h2>
	  </hgroup>
    </header>
	     
	   
	   

The subject matter is divided up into <section> elements, where each section can contain one or more <article> elements to further subdivide the content.

An article may also have a <footer> associated with it. The article footers on this site are used to provide further information about the author of the article. The footer in this sense is used semantically as it is generally positioned to the side of the article. I suppose it could be replaced by an <aside> element.

	   
    <article>
      <header>
        <h2><a href="linkToBlog">Blog Title</a></h2>
      </header>
		
      <footer>
        <abbr class="dateOfItem" title="shortDate">
          Date of Item
        </abbr>
      <address class="vcard author">
        By <a>Author</a>
      </address>
      </footer>
      <div">
        <p>Blog Taster</p>
      </div>
    </article>
	     
	   

Finally, the page itself has a <footer> which contains biographical data and summary information about the site itself.

	     
    <footer>
	 <div class="centre ">
	   <address>
	    <span>
	      <strong><a class="fn">Author</a></strong>
	      <span class="role">Author Role</span>
	      <a class="email" >Email</a> or
	      <a class="vDownload" href="LinkTovCardTool">Download vCard</a>
	    </span>
	   </address>
	   <article>Footer Content</article>
	 </div>
	 <p class="centre"><a href="Link to Site Design Agency">Site Design Agency</a></p>
    </footer>
	     
	   

Full information about all the tags that I have used can be found in the draft HTML5 specification.

Accessibility

I do believe that these new tags allow you to structure a page in a sensible manner which encourages the use of semantic HTML, which in turn is good for accessibility.

My next step is to experiment with some of the other elements, especially <canvas> and <video>. I also want to add some client side validation with Javascript to augment the rather clunky server side validation in place at the moment.

CSS3

I really liked the affects that could be achieved with the text-shadow selector supported in Firefox, Opera and Safari. They are not yet supported in Internet Explorer (IE8 as I write this). The border-radius properties also allowed me to produce some pleasing effects in the main navigation bar and the article sections. Unfortunately I needed to rely on Mozilla and Webkit extensions to achieve this in firefox 3.5.8, Safari and Chrome, which the CSS3 validator did not like. Again, IE simply ignored them.

Testing

I haven't tested the site exclusively yet but it appears to render reasonably in Firefox, Opera, Chrome, Safari and IE 5 and above. IE requires the use of Javascript so that it recognizes the new HTML 5 tags. I have not yet tested the site using Windows Eyes and HAL screen readers.

Mark