Practical usage of HTML5's structural elements
Let's look at some practical examples of these new elements. I think the <header>, <nav>, and <footer> elements are pretty self explanatory so for starters, let's take the current And the winner isn't... home page markup and amend the header, navigation, and footer areas (see highlighted areas in the following code snippet):
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>And the winner isn't…</title> <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> <link href="css/main.css" rel="stylesheet" /> </head> <body> <div id="wrapper"> <!-- the header and navigation --> <header><div id="logo">And the winner is<span>n't...</span></div> <nav><ul> <li><...
