6. Introduction
How were the element names decided upon?
https://developers.google.com/webmasters/state-of-the-web/2005/classes
6 Basic / New elements in HTML5
7. <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
10. <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
11. <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
12. <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.
<time>2011-11-12</time>
12 Basic / New elements in HTML5
15. 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
16. 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
18. 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
19. 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
20. 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
23. 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
28. 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
29. 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