New HTML5 Elements

<article>

<article>
	<h1>HTML Article</h1>
	<p>A section of the page which can be independently distributed.</p>
</article>

<aside>

Used to display tangentially related information that is separate from your content.

Did you know?

<audio>

<audio controls="controls">
	<source src="./mp3/justDoIt.mp3" type="audio/mp3">
</audio>

<details>

Additional information can be placed here!

<details>
	<summary>Click here for more details</summary>
	<p>Additional information can be placed here!</p>
</details>

<figure>

<figure>
	<img src="./img/angry_unicorn.png">
	<figcaption>Fig1. The mythical Github unicorn.</figcaption>
</figure>

<footer>

<header>

<hgroup>

Grouping heading elements to make titles

<mark>

Now we can highlight important text

<p>Now we can <mark>highlight</mark> important text</p>

<meter>

An element used to display a number bound between two values

<meter low="51" max="100" value="52">52</meter>
<meter low="69" high="74" max="100" value="75">75</meter>
<meter max="100" value="100">100</meter>

<nav>

<output>

A read-only form element that can be used to show calculated data

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
	<input type="range" name="a" value="10" max="20"> +
	<input type="number" name="b" value="10"> =
	<output name="result">20</output>
</form>

<progress>

Can be used to show the completion progress of a task.

<progress value="70" max="100">70%</progress>

<section>

A generic section of a document.

Each slide in this slideshow is made up of section elements

<video>

<video width="480" controls="">
	<source src="./video/nyanCat.m4v" type="video/m4v">
	<source src="./video/nyanCat.ogg" type="video/ogg">
	Your browser doesn't support HTML5 video tag.
</video>

Picture Element

<picture>

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

This example from MDN uses built in media selectors to show a larger picture if the patron's display is big enough. Otherwise it defaults to the smaller picture.

Cat Demo

Cat Demo Source

<picture>
	<source media="(min-width: 650px)" srcset="images/kitten-large.png">
	<source media="(min-width: 465px)" srcset="images/kitten-medium.png">
	<!-- img tag for browsers that do not support picture element -->
	<img src="images/kitten-small.png" alt="a cute kitten">
</picture>

Pixel Density

Both img and picture elements support the srcset attribute to take advantage of nicer displays.

<picture>
	<source media="(min-width: 650px)" srcset="images/kitten-stretching.png,
						images/kitten-stretching@1.5x.png 1.5x,
						images/kitten-stretching@2x.png 2x">
	<img src="images/kitten-curled.png" srcset="images/kitten-curled@1.5x.png 1.5x,
						images/kitten-curled@2x.png 2x" alt="a cute kitten">
</picture>

WebP format

Just like videos, when multiple sources are listed, the browser will fallback when it can't show the file format.

<picture>
	<source type="image/webp" srcset="images/kitten-optimized.webp">
	<!-- img tag for browsers that do not support picture element -->
	<img src="images/kitten-fat.png" alt="a fat kitten">
</picture>

SVG

Including an SVG

<img src="./img/svg.svg">

Using a Data URI

<img src="data:image/svg+xml;base64,[BASE64_ENCODED_STRING]">

Using CSS to load an SVG

.loadImage {
	display: inline-block;
	width: 244px;
	height: 211px;
	background: url(./img/svg.svg);
	background-size: 244px 211px;
}
.loadImageURI {
	background: url("data:image/svg+xml;base64,[BASE64_ENCODED_STRING]")
}

Using an inline SVG

<svg>
	...
</svg>

Optimizing SVGs

I use svgomg to optimize my SVGs.

It compressed my file 34.96% and removed the extra data saved in my svg.

Styling with CSS

<style>
	#svgImage:hover #svgS {
		fill: #0000bf;
	}
	#svgImage:hover #svgV {
		fill: #ff0505;
	}
	#svgImage:hover #svgG {
		fill: #00bf5f;
	}
</style>

Filters

<svg>
	...
	<filter id="pictureFilter">
		<feGaussianBlur stdDeviation="1">
	</feGaussianBlur></filter>
</svg>
<style>
	...
	#svg2S:hover, #svg2V:hover, #svg2G:hover {
		filter: url(#pictureFilter);
	}
</style>

Device Access