View
428
Download
4
Category
Preview:
DESCRIPTION
- New elements in HTML5 - Sectioning content - Outline view - Markup and CSS validation
Citation preview
Tecniche di animazionedigitale 1
Michele BertoliFounder / Lead Software Engineer at Igloo
igloolab.commichele.bertoli@accademiasantagiulia.it
Tecniche di animazionedigitale 1
Basic 3
Agenda
New elements in HTML5
Sectioning content
Outline view
Markup and CSS validation
5
14
27
22
New elements in HTML5
Introduction
How were the element names decided upon?
6 Basic / New elements in HTML5
https://developers.google.com/webmasters/state-of-the-web/2005/classes
<details> <summary>
The details element represents a disclosure widget from which
the user can obtain additional information or controls.
The summary element represents a summary, caption, or
legend for the rest of the contents of the summary element's
parent details element, if any.
7 Basic / New elements in HTML5
<details> <summary>
8 Basic / New elements in HTML5
http://jsfiddle.net/MicheleBertoli/5QRUz
<details> <summary>
9 Basic / New elements in HTML5
<figure> <figcaption>
The figure element represents a unit of content, optionally with a
caption, that is self-contained, that is typically referenced as a
single unit from the main flow of the document, and that can be
moved away from the main flow of the document without affecting
the document’s meaning.
The figcaption element represents a caption or legend for a figure.
10 Basic / New elements in HTML5
<figure> <figcaption>
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>
A cheeky macaque, Lower Kintaganban River, Borneo. Original by
<a href="http://www.flickr.com/photos/rclark/">Richard
Clark</a>
</figcaption>
</figure>
11 Basic / New elements in HTML5
<time>
The time element represents its contents, along with a
machine-readable form of those contents in the datetime
attribute.
The kind of content is limited to various kinds of dates, times,
time-zone offsets, and durations.
12 Basic / New elements in HTML5
<time>2011-11-12</time>
Coffee Break
Sectioning content
Sectioning models
● Text-level semantics — what were previously inline tags● Grouping content — block level elements like paragraphs,
lists, and divs● Forms — everything inside form tags● Embedded content — images, video, audio, and canvas● Sectioning content — the new structural tags
15 Basic / Sectioning content
Introduction
Sectioning content is used to divide an HTML document into
sections. Each section of the document would generally have
it's own header, and possibly footer, as well as content.
16 Basic / Sectioning content
Sectioning elements
● article ● aside ● nav ● section
17 Basic / Sectioning content
Implicit sectioning
Because the HTML5 Sectioning Elements aren't mandatory to
define an outline, to keep compatibility with the existing web
dominated by HTML4, there is a way to define sections without
them. This is called implicit sectioning.
18 Basic / Sectioning content
Sample
<section>
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest
elephants.
...this section continues...
<h3 class="implicit subsection">Habitat</h3>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
</section>
19 Basic / Sectioning content
Untitled documents
If no heading is at the root level of the document (i.e. not
inside sectioning content), then the document itself will be
untitled.
20 Basic / Sectioning content
Sample
<body> <article> <h1>Title</h1> <p>Content</p> </article></body>
21 Basic / Sectioning content
Outline view
Introduction
The document outline is the structure of a document, generated by
the document’s headings, form titles, table titles, and any other
appropriate landmarks to map out the document.
The document outlining algorithm is a mechanism for producing
outline summaries of Web pages based on how they are marked
up.
23 Basic / Outline view
Tools
24 Basic / Outline view
https://addons.opera.com/en/extensions/details/html5-outliner/?display=en
http://gsnedders.html5.org/outliner
http://code.google.com/p/h5o
Twentyten
25 Basic / Outline view
Twentyeleven
26 Basic / Outline view
Markup and CSS validation
Introduction
The Markup Validation Service is a validator by the World Wide Web
Consortium (W3C) that allows Internet users to check HTML and
XHTML documents for well-formed markup.
28 Basic / Markup and CSS validation
Why validate?
● Validation as a debugging tool● Validation as a future-proof quality check● Validation eases maintenance● Validation helps teach good practices● Validation is a sign of professionalism
29 Basic / Markup and CSS validation
Markup Validation Service
30 Basic / Outline view
http://validator.w3.org
CSS Validation Service
31 Basic / Outline view
http://jigsaw.w3.org/css-validator
Thank you
Recommended