HTML5 rocks!

Created by Marek Matczak & Janusz Rygał

Basics

HTML and HTML documents

HTML is a markup language for describing the structure of web documents (web pages).* A basic HTML document looks like this:* 


<!DOCTYPE html>
<html>
<head>
    <title>Devon Trainingl</title>
</head>
<body>
    <h1>Welcome to Devonfw Angular Foundations</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
</body>
</html>

* http://www.w3schools.com/html/html_intro.asp ** http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html

HTML tags

  • HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as <body>, and an end tag, such as </body>.**
  • Tags have to be nested so that elements are all completely within each other, without overlapping: 
    
<p>This is <em>very <strong>wrong</em>!</strong></p>
<p>This <em>is <strong>correct</strong>.</em></p>
  • There are exceptions - so called void-elements*** e.g. 
    
<input type="date">
<br>

HTML elements' attributes*

  • Attributes control how the elements work and are placed inside the start tag.
  • Attributes consist of a name and a value, separated by an = character.
  • The value can remain unquoted if it doesn't contain space characters or any of " ' ` = > or < character.
  • Otherwise, it has to be quoted using either single or double quotes. The value, along with the = character, can be omitted altogether if the value is the empty string.

* http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html

Attributes: examples*


<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">

<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

Custom data attributes**


<span data-my-attribute="go!"></span>
<div data-ng-app='devonApp'>Angular lives here...</div>

* http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html** http://www.w3.org/TR/html5/dom.html#attr-data-*

Document Object Model (DOM)

  • Web browsers parse an HTML document, turning it into a Document Object Model (DOM) tree. A DOM tree is an in-memory representation of the document
  • The DOM tree can be manipulated from scripts (typically in JavaScript) in the page - through a Document interface
  • Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated, e.g.:

Example:


<form name="main">
    Result: <output name="result"></output>
    <script>
        document.forms.main.elements.result.value = 'Hello World';
    </script>
</form>

Custom attributes

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These attributes are not intended for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of custom data attributes specified, with any value.

Custom attributes

  • Name: data-*
  • Value: whatever
  • Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Custom attributes sample

Definition and Usage


<div id='plant' data-leaves='47' data-plant-height='2.4m'></div>

<script>
var leaves = plant.dataset.leaves; // leaves = 47;

// 'plant-height' -> 'plantHeight'
var tallness = plant.dataset.plantHeight;
plant.dataset.plantHeight = '3.6m';  // Cracking fertiliser
</script>

Custom attributes don't use:

  • Instead of existing elements, attributes for example: Date/Time, which should be semantically presented
  • Instead of microformats, microdata
  • As CSS hook

Content description

Content description, why?

  • SEO
  • Accessibility
  • Future browsers

Content description RDF, Sample


<div xmlns:dc="http://purl.org/dc/elements/1.1/"
  about="http://www.example.com/books/Devon Book">
  <span property="dc:title">Devon Book</span>
  <span property="dc:creator">Max Mustermann</span>
  <span property="dc:date">2000-03-31</span>
</div>

Content description microdata, sample

John Smith face

Page created by Capgemini Enigneer John Smith Nickname Big Boy

Contact:

+48 111 111 111 big.boy@capgemini.com

Content description microdata


<div itemscope itemtype="http://schema.org/Person">
<img id="faceImg" itemprop="image"
src="http://www.graphics20.com/wp-content/uploads/2012/12/Funny-Faces-2.jpg"
alt="John Smith face" />
    <p>Page created by
        <span itemprop="jobTitle" style="display: none">
            Capgemini Enigneer
        </span>
        <span itemprop="name">
            John Smith
        </span>
        Nickname <span itemprop="additionalname">Big Boy
        </span>

        <p>Contact:</p>
        <span itemprop="telephone">+48 111 111 111</span>
        <span itemprop="email">big.boy@capgemini.com</span>
    </p>
</div>

Structured Data Testing Tool

  • Google provides a tool to test markup
  • From previous example
Test tool result

Structured Data shown by Google

... after typing "Jan Frodeno"

Jan Frodeno Superstar

What's new ?

Semantic elements

Semantic elements

Form controls attributes

Form controls attributes

Canvas and SVG

Canvas and SVG

Audio and Video

  • The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed.
  • The sessionStorage object stores the data for only one session. The data is deleted when the user closes the browser window.

var webStorageSupported = typeof (Storage) !== 'undefined';

if (webStorageSupported) {
    localStorage.setItem('myName', 'John Example');
    sessionStorage.setItem('myName', 'John Example')
    
    console.log('From local: ' + localStorage.getItem('myName'));
    console.log('From session: ' + sessionStorage.getItem('myName'));
} else {
    console.log('Web Storage not supported!');
}