<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 Semantics and Flexbox</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wrapper">
<div class="head"><h1>HTML5 Semantics and Flexbox</h1>
</div>
<div class="content-wrapper">
<div class="navigation">
<p><h3>Navigate</h2></p>
<p>Home</p>
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
</div>
<div class="content">
<h1>About This Page</h1>
<p>On this page, I am experimenting with HTML5 semantics and CSS flexbox for a tidy layout.</p>
<p>On JS Bin, I purposedly includes the stylesheet on the HTML tab (instead of separate CSS tab) for easier code reading for those with small screen.</p>
<p>The main element is placed within a div element along with nav and aside. I don't know if this is right or wrong (let me know?).</p>
<p>Navigation links are placed within nav, laid on the left. The main is at the center column (this column). Within it is the main topic (this article).</p>
<p>The aside element is at the rightmost of the column, I put supplemental information on it.</p>
<p><h1>Test This Page!</h1></p>
<p>Do test this page by:</p>
<li>Resizing the browser windows; see if flexbox lives up to its reputation.</li>
<li>Run HTML Outliner or HeadingsMap (or similar tool) and see if the outline is good.</li>
<li>Check the markup in this page with W3C Markup validator; see if the markups are good. Paste the URL of this page to the address column. <a href="#">Click here to try!</a>.</li>
<li>Check the CSS part of this page too! <a href="#">Click here!</a></li>
</div>
<div class="info">
<h1><p>HTML</p></h1>
<p>Stands for HyperText Markup Language. The current standard is HTML5.
</p>
<h1><p>CSS</p></h1>
<p>Stands for Cascaded Style Sheet. The current standard is CSS3.
</p>
<p><h1>URL</h1></p>
<p>Short for Uniform Resource Locator. It is a reference (an address) to a resource on the Internet.
</p>
</div>
</div>
<div class="footer">
Nov, 2015 @ royray
</div>
</div>
</body>
</html>