AvenueCode Talks - HTML5 by Raphael DDL Oliveira

by Raphael Oliveira @ Avenue Code

roliveira@avenuecode.com

Feb 6th, 2014

AGENDA

Prerequisites
What HTML 5 aims
Notable differences
New on HTML 5: Element Semantic Changes
New on HTML 5: Structure
New on HTML 5: Forms
New on HTML 5: Status Indicator
New on HTML 5: Media
Conclusion: Browser vs Feature

Prerequisites

Intermediary HTML knowledge

What HTML5 aims

Increased separation markup from styling;
Documented error handling, by defining detailed parsing rules;
Deepens into Web Application, by implementing new APIs, elements and other resources that were previously only available through Flash, Java Applets or JS Hacks; ¹
More semantic!

¹: App Cache/Manifest, contenteditable, data-*, role / aria-*, JS APIs such as Geolocation, Session and Local Storages, History/PushState, Audio/Video media, Canvas, Draggable/Droppable. Not covered in this presentation.

Notable differences

DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

All became

<!DOCTYPE html>

Doctype was simplified and now it's only used to enable Standards Mode for HTML documents.

Notable differences

Easier Rules

No enforced trailing slashes on the 'self-closing' elements

<!-- xHTML -->
<img src="path/to/img.ext" alt="" />
<br />

<!-- HTML5 -->
<img src="path/to/img.ext" alt="">
<br>

Notable differences

Easier Rules

Elements can have empty attributes without writing =""

<!-- xHTML -->
<input type="text" required="required" autofocus="autofocus" />

<!-- HTML5 -->
<input type="text" required autofocus>

Notable differences

Easier Rules

Elements can have attributes without quotes ("")

<!-- xHTML -->
<input type="text" placeholder="username" />

<!-- HTML5 -->
<input type=text placeholder=username >

But quotes are still needed for values which have spaces (like multiple classes) or else the values after the spaces will become (invalid) attributes.

<input type=text class=myForm formPretty coolForm>
<!-- =/= -->
<input type=text class="myForm formPretty coolForm">

Notable differences

Strict Rules

No parser normalization

<input type="text" id=" someIdWithSpaces " />

This is no more trimmed/ignored and now count as an error, that is, invalid html.

Element Semantic Changes

The <i> element

Used for italic presentation, now represents a span of text in an alternate voice/mood, technical term, phrase in another language or thoughts..

For terms in different languages, it should be used with lang attribute.

Examples:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

<p>The term <i>prose content</i> is defined above.</p>

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

Element Semantic Changes

The <em> element

Used for emphasis presentation, now represents a stress emphasis, i.e., something you'd pronounce differently. A statement of fact, with no stress:

<p>Cats are cute animals.</p>

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

<p><em>Cats</em> are cute animals.</p>

Moving the stress to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

<p>Cats <em>are</em> cute animals.</p>

Element Semantic Changes

The <b> element

Used for bold presentation, now represents a "stylistically offset", that is, something that is only to drawn attention without any other importance, such as keywords, product words in a review, etc.

Use of the b element to highlight key words without marking them up as important:

<p>The <b>Handlebars</b> and <b>requireJS</b> presentations were awesome!</p>

In the following example, objects in a text adventure are highlighted as being special by use of the b element:

<p>You enter a small room. Your <b>sword</b> glows brighter. You feel a chill down your spine, as you sense <b>orcs</b> sleep in the corner wall.</p>

Element Semantic Changes

The <strong> element

Used for strong emphasis, now represents importance, seriouness and urgent. It does not change the meaning of the phrase like em but highlights the most important part.

<p><strong>Warning.</strong> This dungeon is dangerous. <strong>Avoid the ducks.</strong> Take any gold you find. <strong>Do not take any of the diamonds</strong>, they are explosive and <strong>will destroy anything within ten meters.</strong> You have been warned.</p>

A more daily use, the word "chapter" and the actual chapter number are mere boilerplate, and the actual name of the chapter is marked up with strong:

<h1>Chapter 1: <strong>What HTML 5 aims</strong></h1>

Structure

The new elements

Image from m5designstudio.com

Structure

The <header> element

The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.

<header>
	<h1 class="logo">
		<a href="#">My Brand</a>
	</h1>
	<nav>
		<!-- navigation contents -->
	</nav>
</header>

Structure

The <nav> element

The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.

<nav>
	<ul>
		<li>
			<a href="#">Home</a>
		</li>
		<li>
			<a href="#">Products</a>
		</li>
		<li>
			<a href="#">Another navigation link</a>
		</li>
	</ul>
</nav>

Structure

The <aside> element

Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc - that is, slightly related to the rest of the page. They can also be used for pull quotes.

<section>
	<article>
		<!-- blog post here -->
	</article>
</section>
<aside>
	<h4>See also</h4>
	<ul>
		<li>
			<a href="#">Some other post</a>
		</li>
	</ul>
</aside>

Structure

The <main> element

The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application (just one per page).

<body>
	<header></header>
	<main>
		<section>
		</section>
		<!-- other sections -->
		<aside>
		</aside>
	</main>
	<footer></footer>
</body>

Structure

The <section> element

The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.

<main>
	<section>
		<h2>My website section - about</h2>
		<p>content</p>
	</section>
	<section>
		<h2>My website section - contact</h2>
		<p>content</p>
	</section>
</main>

Structure

The <article> element

The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.

<main>
	<section>
		<article>
			<h1>My blog post</h1>
			<p>blog content</p>
		</article>
		<article>
			<h1>another blog post</h1>
			<p>another blog content</p>
		</article>
	</section>
</main>

Structure

The <footer> element

The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

<body>
	<header></header>
	<main>
		<section></section>
		<aside></aside>
	</main>
	<footer>
		® Copyright 20XX - All rights reserved.
	</footer>
</body>

Structure

Example Page

LivePlayer

Forms

The form has received a significant amount of updates and new items, enabling better control and validation that were previously made using JavaScript as well as better usability.

Notice: Browsers that do not support the new types/attributes will fallback to the standard type="text".

Forms

The "tel" type

Used for telephone input.

<input type="tel" placeholder="9999-9999" />

Forms

The "email" type

Used for e-mail input.

<input type="email" placeholder="your@email.com" />

Forms

The "search" type

Used for search input.

<input type="search" placeholder="Search.." />

Forms

The "url" type

Used for url input.

<input type="url" placeholder="http://yourwebsite.com" />

Forms

The "date" type

Used for date input.

<input type="date" />

Forms

The "month" type

Used for month input.

<input type="month" />

Forms

The "week" type

Used for week input.

<input type="week" />

Forms

The "time" type

Used for time input.

<input type="time" />

Forms

The "datetime-local" type

Used for datetime-local input. It's a mix of 'date' and 'time' types.

<input type="datetime-local" />

Forms

The "number" type

Used for number input.

<input type="number" step="0.5" />

Forms

The "range" type

Used for range input.

<input type="range" min="0" max="100" step="0.5" />

Forms

The "color" type

Used for color input.

<input type="color" />

Forms

New attributes

There are some attributes that can be used on the inputs.

placeholder - text to be inserted as a helper;
autofocus - the focus will be on the input as soon the page loads;
required - it's required to be filled before form submission;
pattern - regexp for what is accepted on the input;

Forms

New attributes - cont.

Also there are some new pseudo-classes available through CSS for styling those new attributes and input states (not covered on this presentation):

[required] - attribute selector works for styling the required ones;
:invalid - pseudo-class for styling inputs with invalid data;
:valid - pseudo-class for styling inputs with valid data;

Forms

New attributes - Example

<input type="text" id="inputTest" placeholder="a text here" autofocus required pattern="[a-zA-Z]{1,10}" />


#inputTest:invalid {
	border:3px solid red;
}
#inputTest:valid {
	border:3px solid green;
}

Required input with pattern [a-zA-Z]{1,10} (any character from a-z and A-Z, nothing else) and needs to be between one and 10 characters:

Status Indicator

The <meter> element

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

<meter value="50" min="0" max="100" low="40" high="90" optimum="100">50</meter>

val 30

val 60

val 90

Status Indicator

The <progress> element

The progress element represents the completion progress of a task.

<progress max='100' value='60'><span>60</span>% played</progress>

val 30

0% played

val 60

60% played

val 90

90% played

Status Indicator

The <summary> and <details> elements

The progress element represents the completion progress of a task.

<details open>
	<summary>Show/Hide me</summary>
	<p class="xsmall">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, mollitia.</p>
</details>

Show/Hide me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, mollitia.

Show/Hide me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, mollitia.

Media

The <audio> element

This is the element which enables audio in a webpage without the need of any plugins.

<audio src="path/to/music.ext" loop controls autoplay preload="metadata">
	<!-- fallback here, such as Flash or some error message -->
</audio>

Browser vendors couldn't agree with what codec to support because of patents and such, therefore each one support a different set of codecs. So you set various sources:

<audio loop controls autoplay preload="auto">
	<source src="path/to/music.mp3" />
	<source src="path/to/music.ogg" />
	<source src="path/to/music.wav" />
	<!-- fallback here, such as Flash or some error message -->
</audio>

Media

The <audio> element - Samples:

SNES ISSSD

SNES MegamanX

The <audio> element - Codec support:

This is the table of codecs currently supported by each browser:

MP3 - Chrome, Safari, IE9;
WAV - Chrome, Firefox, Safari, Opera;
OGG - Chrome, Firefox, Opera;

Media

The <video> element

This is the element which enables video in a webpage without the need of any plugins.

<video src="path/to/video.ext" loop controls autoplay preload="metadata" style="width:100px;height:100px;" poster="path/to/imageposter.ext" >
	<!-- fallback here, such as Flash or some error message -->
</video>

The same browser agreement shows up on video, the same way as audio, each one support a different set of codecs. So you set various sources:

<video loop controls autoplay preload="metadata" style="width:100px;height:100px;" poster="path/to/imageposter.ext" >
	<source src="path/to/video.mp4" />
	<source src="path/to/video.webm" />
	<source src="path/to/video.ogv" />
	<!-- fallback here, such as Flash or some error message -->
</video>

Media

The <video> element - cont.

Media

The <audio> element - Codec support:

This is the table of codecs currently supported by each browser:

MP4 - Chrome, Safari, IE9;
WebM - Chrome, Firefox, Opera;
OGG - Chrome, Firefox, Opera;

Conclusion

Browser vs Feature

HTML5 Please
Can I Use
HTML5Shiv/shim
Modernizr/Yepnope

Conclusion

Learn more

Assignment

Will be given after the CSS3 and Responsive Design talks, as a mix of the 3 presentations!