Updating fictivedesigns to Html5

HTML5 is an updated improvised version of web markup language for web applications as well as documents with a plenty of new semantic elements. Atlast,

  1. <embed> appears validated now.
  2. No errors if you don’t close the <img> tag.
  3. Less use of repeating <div> and <span> tags;

I have updated my website to HTML5 standards and sharing here how I did it. If you are looking for some fine resource on HTML5, check http://diveintohtml5.org or http://www.html5rocks.com/

 

List of new Semantic elements in HTML5

<header>: The header part of your site or page.
<nav>: The links to other pages.
<section>: A chapter in a book or a section in a chapter or anything that has its own heading.
<article>: An independent entry or paragraph in a chapter or blog.
<footer>: The footer part of your site or page.
<blockquote>: Any block to quote.
<mark>: Anything to mark.

Oh yeah, I also made some changes to the syntax of my site according to the improved HTML5 syntax, header.php in this case, before proceeding to the semantics. Check the list below for the previous and the current syntax used.

 

Updating to HTML5 Improved Syntax

Before Now
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”> <html lang=”en”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <meta charset=”utf-8″ />
<link rel=”stylesheet” href=”style.css” type=”text/css” /> <link rel=”stylesheet” href=”style.css” />
 

Applying New Semantic Elements

I am using WordPress for my site and like usual themes, I have a general header, menu, content, sidebar and footer in the design which I had defined in as <div id=”header”>, <div id=”nav”>, <div id=”content”>, <div id=”sidebar”>and <div id=”footer”> previously. I started with :-

  1. Replacing those generalized divs with the new semantic elements listed below.
  2. Replacing everywhere I found the post been called (<div id=”post”>), to (<article id=”post”>)
  3. Removing the default <div id=”container”> completely from everywhere.
  4. Using <blockquote> for highlighted blocks and <mark> to mark stuff.
Before Now
<div id=”header”> <header>
<div id=”nav”> <nav>
<div id=”content”> <section>
<div id=”post”> <article>
<div id=”sidebar”> <aside>
<div id=”footer”> <footer>
 

Code view of the pages with sidebar and the visual example.

<body>
<wrapper>
<main>
<header>
<img src=”logo.gif”><nav></nav>  
</header>

<section>
<article></article>
</section>

<aside></aside>
<footer></footer>
</main>
</wrapper>
</body>
fictivedesigns
 

Code view of the static pages without sidebar and the visual example.

<body>
<wrapper>
<main>
<header>
<img src=”logo.gif”><nav></nav>  
</header>

<article></article>
<footer></footer>
</main>
</wrapper>
</body>
fictivedesigns
 

The structure need not to be necessarily how i used here, it does depends upon the theme and your design flexibility. You can make use of the new semantics as per the demand of your design so just start playing with these amazing elements I am sure it will prove to be handy as possible.

Posted in Designers View | Leave a comment