HTML5 Semantics Stuff

html5-semantics-stuff.markdown

HTML5 Semantics Stuff

A Pen by Steven Roberts on CodePen.

License.

index.html

<header class="site-header padding" role="banner">
	
	<h1 class="logo margin--right no-margin--bottom">Logo</h1>
	
	<nav>
		<ul>
			<li>
				<a href="#">nav item</a>
			</li>
			<li>
				<a href="#">nav item</a>
			</li>
			<li>
				<a href="#">nav item</a>
			</li>
			<li>
				<a href="#">nav item</a>
			</li>
		</ul>
	</nav>
	
</header>

<main class="margin grid">
	
	<section class="grid__item three-fifths">

		<article class="padding--ends">

			<header>
				<h1>Article Title</h1>
				<time class="margin--bottom" datetime="2016-03-21">21st March 2016</time>
			</header>

			<footer role="contentinfo">
				<p>Written by Steven Roberts</p>
			</footer>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.<wbr />Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam.</p>

		</article>

		<article class="padding--ends">

			<header>
				<h1>Article Title</h1>
				<time class="margin--bottom" datetime="2016-03-19">19th March 2016</time>
			</header>

			<footer role="contentinfo">
				<p>Written by Steven Roberts</p>
			</footer>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.<wbr>Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam.</p>

		</article>

		<article class="padding--ends">

			<header>
				<h1>Article Title</h1>
				<time class="margin--bottom" datetime="2016-03-17">17th March 2016</time>
			</header>

			<footer role="contentinfo">
				<p>Written by Steven Roberts</p>
			</footer>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.<wbr>Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam exercitationem dolore, quam sequi ducimus dolorem ipsum ratione ipsa pariatur maiores iusto doloremque, earum veritatis voluptatum voluptatem a. Eos maxime, aperiam.</p>

		</article>

	</section>
	
	<section class="grid__item two-fifths margin--top">
		<div class="padding">

			<header>
				<h1>New HTML5 Tags</h1>
			</header>

			<article>

				<section>
					<h2>&lt;mark&gt;</h2>
					<p><mark>Lorem ipsum</mark></p>
					<p>The mark element carries no semantic value unlike the &lt;strong&gt; and &lt;em&gt; tags.</p>
				</section>

				<section>
					<h2>&lt;meter&gt;</h2>
					<p><meter min="0" max="100" value="43"></meter></p>
				</section>

				<section>
					<h2>&lt;progress&gt;</h2>
					<p><progress min="1" max="100" value="67">67</progress></p>
				</section>

				<section>
					<h2>&lt;time&gt;</h2>
					<p><time datetime="2016-03-17">17th March 2016</time></p>
				</section>

				<section>
					<h2>&lt;menuitem&gt;</h2>
					<p><menuitem>Something in a menu?</menuitem></p>
				</section>

				<section>
					<h2>&lt;summary&gt; and &lt;details&gt;</h2>
					<summary>Title</summary>
					<details>Description</details>
				</section>

			</article>

		</div>
	</section>
	
</main>

<footer class="site-footer padding">
	<small>&copy; Copyright info</small>
</footer>

style.scss

.logo, nav { 
	display: inline-block; 
}

nav { 
	float: right; 
	margin-top: 6px; 
}

nav ul { 
	margin: 0; 
}

nav li { 
	display: inline-block;
	margin-right: 12px;
}

time { 
	display: block;
}

.site-header {
	background-color: #ededed;
}

.site-footer {
	background-color: #333;
	color: white;
}

meter[value] {
	appearance: none;
	border: none;
	width: 100%; 
	height: 20px;
}

progress[value] {
	appearance: none;
	border: none;
	width: 100%; 
	height: 20px;
	background-color: greysmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
	position: relative;
	margin: 0 0 1.5em; 
}

styles

<link href="https://mbhd.co.uk/tl_files/codepen/better.boilerplate.min.css" rel="stylesheet" />