<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML5とCSS3によるページサンプル</title>
<style>
body { width:400px; margin:10px auto; }
header, nav, section, footer, article {
display:block; border:1px solid #ccc; margin:5px; padding:5px 10px; background: #eee;
}
article { background: #efe; }
header { text-align:center; padding:5px 0 10px 0; }
header ul, header li { list-style-type:none; display:inline; padding: 0 10px; }
.flexbox { display:flex; border:1px solid #c99; margin:5px; }
nav { flex:1; }
section { flex:2; }
nav li { list-style-type:none; margin-left: -2em; }
footer { text-align: center; }
</style>
</head>
<body>
<header>
<h1>header</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</header>
<div class="flexbox">
<nav>
<h1>Navi</h1>
<ul>
<li><a href="http://www.tagindex.com/html5/basic/basic.html">HTML 5</a></li>
<li><a href="http://www.htmq.com/html5/index.shtml">リファレンス</a></li>
<li><a href="http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html">flex</a></li>
<li><a href="#">example 4 </a></li>
<li><a href="#">example 5 </a></li>
<li><a href="#">example 6 </a></li>
<li><a href="#">example 7 </a></li>
</ul>
</nav>
<section>
<h1>section</h1>
<article>
<h1>section-article1</h1>
<p>ここは、article１</p>
</article>
<article>
<h1>section-article2</h1>
<p>ここは、article２</p>
</article>
</section>
</div>
<footer>
footer
</footer>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body {background-color:#cfd;} /* 背景色 */
</style>
</head>
<body>
<h3>見出し</h3>
<p>html5 本文内容</p>
</body>
</html>【参考サイト】
HTML5の書き方