HTML - Apprentice

Skills Workshop v2

Goal

To demonstrate a foundational understanding and skill in modern HTML elements and APIs.

Semantic HTML5 Elements

Demonstrate basic foundations in Semantic HTML5 Elements
Be aware of, and use several often-used semantic elements

“The Web is text and text has a meaning. Ultimately the content that our browsers read is pure text … In the open web scenario our content can be shown, fed and remixed by third parties, search engines and accessibility tools.” – HTML5 Rocks

New HTML5 Elements

<article>



	HTML Article
	A section of the page which can be independently distributed.

<aside>

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

<audio>

<details>

Click here for more details

Additional information can be placed here!



	Click here for more details
	Additional information can be placed here!

<figure>



	
	Fig1. The mythical Github unicorn.

<footer>

Can be used to contain introductory content and navigation.

<header>

<hgroup>

Grouping heading elements to make titles

<mark>

Now we can highlight important text


Now we can highlight important text

<meter>

An element used to display a number bound between two values

52 75 100


52
75
100

<nav>

<output>

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



	 +
	 =
	20

<progress>

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

70%

70%

<section>

A generic section of a document.

Each slide in this slideshow is made up of section elements

<video>

Picture Element

<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

Click Here

Cat Demo Source

Pixel Density

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

WebP format

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

SVG

Including an SVG

Using a Data URI

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]")
}