40. The Semantic of
semantics
• Better organized, easier to maintain.
• Screen readers.
• Open to future applications: Advanced rss
readers, widgets, etc.
43. Headers
• ...represents a group of introductory or
navigational aids.
• can have multiple header elements on a page
• it is defined by its content, not its position
• Should not exist within another <header> or
within <footer>
47. hgroups
• Related headings (h1-h6) may be grouped
together (wrapped) and treated as a single
structure in the document outline
<header>
<hgroup>
<h1>BMW USA</h1>
<h2 class="tagline">The Ultimate Driving ßMachine</h2>
</hgroup>
</header>
48. Nav : Before
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
49. Nav : after
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
52. Nav
• ...represents a section of a page that links
to other pages or to parts within the page
• only sections that consist of major
navigation blocks are appropriate for the
<nav> element
53. Sections
• "...represents a generic section of a
document or application. ...is a thematic
grouping of content, typically with a
heading."
• It allows to reset the document outline
55. Sections: Rule of thumb
• Don't use it just as hook for styling or
scripting; that's a <div>
• Don't use it if <article>, <aside> or <nav>
is more appropriate
• Don't use it unless there is naturally a
heading at the start of the section
56. Articles: before
<div class="entry">
<h2>
<a href="something.html"
rel="bookmark"
title="link to this post">
Travel day
</a>
<p class="post-date">October 22, 2009</p>
</h2>
...
</div>
57. Articles: now
<article>
<header>
<h1>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h1>
<p class="post-date">October 22, 2009</p>
</header>
...
</article>
58. Articles
• used for 'self-contained related content'
• useful for blog posts, news stories,
comments, reviews, forum posts
• can also be used for widget types of
content, e.g. stock ticker
• can be nested, as well as <section>
59. Aside
• <aside> is another specialized form of
section
• Provides tangentially related content
• May be used for
• advertisements
• pull quotes or sidebar content
60. Aside
<article>
<div class="article">
<h1>Blog 2</h1>
<p>I discovered a new planet
while...</p>
<aside>
<p>The number of potential planets
that can support life are...</p>
</aside>
</div>
</article>
67. Other Notable
Elements
• <figure>, <figcaption>
• <mark>
• <time>, <meter>
• <details> & <summary>
• <b>, <i>, <small> revisited
• Custom attributes
• Global attributes
68. HTML5 Forms: now
• New input types
• Use of required fields, placeholders, and
autofocus
• Validation capabilities
• Form elements outside of the <form> tag
70. Autofocus
• Sets an element to be the default starting
element in the form (can only be used once
in the form)
<input type="text" name="yahoo-search" autofocus>
72. New input types
• tel • search
• number • range
• url • color
• email • date(month,
week...)`
For the input types that perform valida4on, visual
feedback should be provided as to the validity of the
data by using the :valid and :invalid CSS pseudo‐classes
73. HTML5 Forms-
validation
• Opera and FF4 offer form validations.
74. Media: Audio&Video
• A <source> must be specified in a format
supported by that browser
• Video formats:
• Audio: Browsers support WAV, MP3, Ogg
Vorbis
77. Canvas
• It gives you a "drawing" surface
• You manipulate it via JS
• Accessibility is an challenge.
<canvas id="myCanvas" width="300" height="150">
Default fallback text
</canvas>
var mycanvas =
document.getElementById("myCanvas").getContext("
2d");
//draws a rectangle filled with the current fill style
mycanvas.fillrect(x, y, width, height);
78. SVG
• XML-based vector graphics format
• You can also style SVG with CSS and add
dynamic behavior to it using the SVG DOM
• relatively accessible.
HTML 4.01 has remained largely the same for over a decade. During this time, the markup has been used and misused in so many ways that it is evident a new markup is needed to support the current demands of page development.\n\nCSS 2.1 has gone from a working draft to candidate recommendation within the W3C, and back to working draft over the last six years. Nevertheless, CSS 2.1 has merely served as an update fixing minor errors within the CSS 2 specification. The major features of CSS have largely remained unchanged since 1998.\n\nECMAScript underwent 3 revisions from 1997 until 1999. After that, little occurred in the specification. Other features, such as the XMLHttpRequest, have appeared since, but these are a result of widespread adoption by numerous browser vendors and not as a result of updates to any specifications. Disagreements as to how ECMAScript 4 should look led to the formation of ECMAScript Harmony and the now abandoned ECMAScript 4. ECMAScript 5 was released in December of 2009. It is beginning to pick up support within the current generation of browsers.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
- This triggers standards mode even in ie6\n
\n
- Use only when server is unable to set the charset via headers.\n
\n
\n
\n
\n
\n
\n
\n
\n
Because a <header> should not contain a header or footer element, a complex page header might require a section instead.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Pretty convenient, it replaces JS to set default text.\n
\n
JavaScript validation will still be necessary when form validation is needed\n
