46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
|
<!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>
|