<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, User-scalable=0 "/>
<style type= "Text/css" >
body{margin:0px;}
Header{width:100%;height:50px;background: #aefeee;}
H4{display:inline;}
Aside{width:20%;height:540px;background: #708090; float:left;}
Section{width:80%;height:540px;background: #d8bfd8; float:left;overflow:auto;}
Footer{width:100%;height:50px;background: #f0ffff; clear:left;}
figure{padding:0px;}
Figcaption{text-align:center;}
img{max-width:70%;}
Ul{list-style:none;}
Li{display:inline;}
A{text-decoration:none;}
</style>
<body>
<aside>
<ul>
<li><a href= "" > Hyperlinks </a></li>
<li><a href= "" > Hyperlinks </a></li>
<li><a href= "" > Hyperlinks </a></li>
<li><a href= "" > Hyperlinks </a></li>
<li><a href= "" > Hyperlinks </a></li>
</ul>
</aside>
<section>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
<figure>
</figure>
<figcaption> Picture Cases </figcaption>
</section>
<footer>
<nav>
<ul>
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
</ul>
</nav>
</footer>
</body>
HTML5, example development code