The following code incorporates all the HTML5 semantic layout elements discussed so far. Feel free to copy and paste it into the Code side of Dreamweaver's Split view and use it to experiment with and familiarize yourself with HTML5 page structuring.
And, this code will provide a good basis to experiment with CSS styling for HTML5 elements—the next step in our journey:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 test</title> <link href="html5_layout.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>Page header</h1> <h2>Header 2 </h2> </hgroup> <nav> <h5>Navigate: <a href="#">link 1</a> | <a href="#">link 2</a> | <a href="#">link 3</a></h5> </nav> </header> <article> <h3>First article</h3> <p>First article content...