<!DOCTYPE HTML>
<html>
<head>
<title>ARIA landmark role use example</title>
<style type="text/css">
div {
padding: 2%;
border: solid 2px #000000;
margin: 10px;
font: bold larger "Courier New", Courier, monospace;
white-space: inherit;
}
#banner {height:100px;background:#ff8c00 }
#navigation {float:left;
width:15%;
height:400px;
background:#7fff00}
#main {float:left;
width:50%;
height:400px;
background:#f0e68c}
#complementary {float:left;width:15%;height:400px;background:#4682b4}
#contentinfo {clear:both;height:100px;background:#ffb6c1}
#search {background:#ffff00;font-size:small;}
#form {background:#fafad2;font-size:medium;}
#application {background:#f5f5f5;font-size:medium;width:300px;height:200px}
</style>
</head>
<body>
<div id="banner" role="banner">test 1</div>
<div id="navigation" role="navigation">test 2</div>
<div id="main" role="main">test 3
<div role="application" id="application">test 4</div>
</div>
<div id="complementary" role="complementary"> test 5
<div role="form" id="form"> test 6
<div id="search" role="search">test 7</div>
</div></div>
<div id="contentinfo" role="contentinfo">test 8</div>
</body>
</html>