documento 1 de html5

1 Introduction to HTML5

Introduction: towards more simplicity, newstructuring elementsTowards more simplicityChanges to elements in HTML5 go towards a greater simplicity. In this section, we'll see some exampleshighlighting these improvements, such as the new doctype definition, the fact that the "type" attribute of elementssuch as or are now optional, the syntax constraints that have been relaxed, the new structuringelements that have been added, etc.

A minimal HTML5 document

Well, this minimal HTML5 document is really minimal, isn't it?

Let's compare it to the HTML4 minimal document (source: http://www.sitepoint.com/a-minimal-html-document/).Differences have been highlighted in red:

1234

New structural elements in HTML5 http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

1 de 20 16/05/2015 04:31 p.m.

56789

101112

title

...

Simpler character set definition

One word about the line in the HTML5 version: while it looks simpler than theHTML4 version, it is really a good practice to declare the character set of your document to protect against a serioussecurity risk.

No more complicated doctype definitions

The "Doctype", often called DTD (Document Type Declaration) is used by tools such as HTML validators (i.e. the W3C validator), and specify the rules used by an HTML or an XHTML page. These rules are contained inspecial documents called "Document Type Definitions" (also abbreviated as DTD), written in a language that mayseem a bit barbaric to humans (they are intended to be read by software), and hosted on the W3C site. DTDs are notused by current web browsers to validate the structure of an HTML page, as they "read" the code without using theDTD to decipher it, using only "rules" contained in their own "engine" but it is still preferable to indicate thedoctype a smodern browsers have several rendering engines that are chosen depending on the doctype. Old HTML1web pages will not be rendered the same way as HTML5 pages, since in the 90's some of them were written byhand and may contain errors, imbricated HTML elements, etc.

With HTML4, doctype definitions looked like this: , and this was evenmore complicated as one had to choose between three different possibilities (doctypes could be transitional, strict,or frameset). Most of the time, the doctype definition was copied and pasted from one document to another and wasnearly impossible to memorize.

With HTML5, there is only one way to indicate the doctype, and it's so simple there is no reason to forget it:

The "type" attribute is optional

With a rel="stylesheet" attribute, it is no longer necessary to indicate type="text/css" (from the specification: "thedefault type for resources given by the stylesheet keyword is text/css.")

The "type" attribute is not needed in HTML5, and even old browsers will use text/css as the default type for stylesheets today. So, either way, you can omit the "type" attribute altogether and use

instead of:

We will not go into extra details about the element, but the fact that the type attribute is becomingoptional shows the current direction taken by HTML5: towards greater simplicity.

Look also at the way we included a javascript file in our page:


2 de 20 16/05/2015 04:31 p.m.

Here again, the type attribute has been omitted. Just as a reminder, the old way to do the samething:

More flexible syntax constraints

If you look at the "minimal document" example, or at other examples in this course, you won't find a lot ofdifferences compared to to the same code in XHTML: attributes' values are surrounded by quotes, all elements arewritten in lower case, etc. This is because we are used to writing this way. With HTML5 you can omit quotes or useuppercase. Even if you forget to include the , , or elements, it will still validate (infact, the browser will add these elements for you, OK...).

New structuring elementsExternal resources:

VERY GOOD article: http://coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/http://dev.opera.com/articles/view/new-structural-elements-in-html5/http://catcubed.com/2009/10/15/the-semantics-of-html5-structural-elements/

HistoryAs web site layouts evolved, HTML5 structuring elements like lists, paragraphs, tables, etc. showedtheir limits. Today, many web sites offer navigation menus, tabbed panels, headers, footers, and so on.The way these "parts"' are implemented relies heavily on and elements withdifferent id and class attributes, lots of CSS and lots of JavaScript code to apply custom styles and behaviors.

There are some problems however, with this approach:

id and class names differs from one developer to another, from one country to another, etcEven with same ids and class names, the css rules may be different,JavaScript libraries became heavier and heavier over the years,Web pages became heavier and heavier over the years!These elements could not be handled by the web browser natively...

Even if there are differences between ids, classes and css/js implementations, there are also common behaviors,common layouts, common "way of doing things" that could be guessed at first glance by a human.So different studies have been conducted in order to identify the most popular ids, class names, widgets, etc used onthe web:According to http://dev.opera.com/articles/view/new-structural-elements-in-html5/, "During the creation of HTML5,the editor Ian Hickson used Google's tools to mine data from over a billion web pages, surveying what ID and classnames are most commonly used on the real world web. You can see one of the surveys published at Google Code:Web Authoring Statistics: Classes. Opera did a similar study, of 3.5 million URLs, calling it MAMA. MAMA had asmaller URL set, but looked at a larger and wider variety of web page statistics. For more information, take a lookat MAMA common attributes, MAMA's id list, and MAMA's class list. For more options, go to the MAMA homepage."

New elements added to the HTML5 set

The results of these surveys led to the addition of new structuring elements in HTML5. For example, the verypopular led to the creation of a element, to a element,etc...Finally, the 20 most popular IDs and class names found in Hickson's and Opera surveys gave birth to these new


3 de 20 16/05/2015 04:31 p.m.

elements (click on the element's name to go to the W3C specification about this element)

Introduction of an article, another section or the entire document (header page).Typically the header of a web site that appears on top of each page, or a header of along or of a long

Contains the footer of a site, a long , or a long

Section that contains the main navigation links (within the document or to otherpages).

Independent content, which can be individually extracted from the document andsyndicated (RSS or equivalent) without penalizing its understanding. Typically ablog post.

Generic section used to group different articles into different purposes or subjects,or to define the different sections of a single article. Generally used with a header.

Used for marking up times and dates.

Section whose content is not necessarily directly related to the main content thatsurrounds it, but can provide additional information.

Used to wrap more than one heading if you only want it to count as a single headingin the page's heading structure. News from 2 April 2013: the elementremoved from the HTML5 specification.

and

Used to encapsulate a figure as a single item, and contain a caption for the figure,respectively.

And there is no element even though the was very popular. Instead,the HTML5 group decided that anything not embedded in one of the elements from the above table is "defaultcontent". If the content is of a type that corresponds to one of the elements from the table, i.e. if the content is anarticle, it should be embedded between and .

How to mix all the new structuring elements together ?

Let's study an example: http://jsbin.com/agoyoj/7/edit (as usual, all examples we have cooked up that are availableon the jsbin.com web site can be modified: you can save your own version using the "create milestone" menu, shareyour version, etc. Don't hesitate to play with the source code, etc.


4 de 20 16/05/2015 04:31 p.m.

This example is just one of the different ways to organize a blog. For this basic example, we have designed the website using a element that contains the "Simple HTML5 blog" text that appears on top of the page:

The new element1234567891011

Simple HTML5 blog

Simple HTML5 blog

...

And here the CSS rules we have used:

CSS for the headers12345678

header {color: #007e99;font-size: 2.5em;padding: 20px 50px}header span {color: #722}

The navigation menu just below the header is a element. For the purpose of this example we haven'tprovided any value for the hyperlinks...

The element12345

Simple HTML5 blog


5 de 20 16/05/2015 04:31 p.m.

The element6789

1011121314151617

Simple HTML5 blog

Blog About Contact

And here is the CSS we used in this example for the element:CSS for the elements

12345678910111213141516171819202122

nav {font-size: 1.5em;margin: 5px 0;padding: 20px 50px

}nav li {display: inline;margin: 0 15px

}nav li:first-child {margin-left: 0

}* html nav ul {margin-left: -15px

}nav span, nav a {padding: 3px 15px 4px

}nav span {background: #722;color: #fff

}

Now, we have one big element that contains a set of elements:The element

123456789101112131415

...

...

...

And here is the CSS:

CSS for the element12345678910

section {float: left;

padding: 35px 0; position: relative; width: 70%} section article { margin: 0 50px 40px; padding: 25px 0 0; position: relative


6 de 20 16/05/2015 04:31 p.m.


}section header { font-size: 1em; padding: 0;}section h1 { font-size: 2.3em;}

Note that the H1, article, article header, etc. will be styled using these rules.Next, in each article in the section we have a header (to display the article title), paragraphs (articlecontent), an so on. Example for the first blog article :

The element12345678910111213141516171819202122

Information about this example Some subtitle in the header This example is a modified version of http://netstream.ru/htmlsamples/html5-blog/index.html

Try to move the mouse on different elements. The structure will be highlighted and you will be able to see the different inclusions of elements one in each other. If you move the cursor to this sentence, it will be highlighted in dark grey, showing the presence of an element, surrounded by a element (light grey), etc. So we have some articles in a single section element. The page title at the top is a element, while the tag cloud on the right is a element. The main menu on top (with Blog, About, Contact) is a element. Fig. 1 : an example of how new structuring elements could be used. This page put a on top, and does not have headers and footer for each article, like in this figure, but it could... By the way, this is a inside a element...

...

Notice also the way we included a figure using the new "HTML5" way, using a ..element that embedded a element together with a element.Here is the CSS for the element we have used in the example (we did not apply anystyle to the element):


figcaption {font-style:italic;font-size: 0.8em;width: 100%}

and here is the result:


7 de 20 16/05/2015 04:31 p.m.

After the long element that contains all the blog articles displayed in the page, we addedthe HTML code for the tag cloud that is displayed on the right of the page, "aside" ! This is done using-you already guessed it- an element:

the element12345678910111213141516171819202122232425262728293031

.... all ... here....

Tag cloud

ajaxapplecssfirefoxgooglehtmlinternet exploreriphonecss3ipodjavascriptjquerymacoperarsshtml5webweb 2.0web-??????????windowsyahooyoutube

...

We are not going to show the complete CSS here as it uses some tricks to display the list as a "real tagcloud" that uses JavaScript for handling events, etc.


aside {float: right;


8 de 20 16/05/2015 04:31 p.m.


10111213141516

padding: 70px 0 30px;position: relative;width: 25%

}

aside h1 {color: #888;font-size: 1.8em

}aside .tag-cloud {padding: 15px 35px 10px 0;text-align: center

}...

We used a float:right CSS rule to put the tag cloud on the right...

Here is the result:

Finally, we added a element after the tag cloud definition, for displaying a page footer:The element

1234567891011121314151617

...

...

...

...

2009 Some blog

With this CSS rule:CSS for the element

12345

footer {clear: both;color: #777;padding: 10px 50px}

Here is the result at the bottom of the page:


9 de 20 16/05/2015 04:31 p.m.

More on and It may be not clear whether a may contain one or several elements or if an may contain one or several elements.The element was designed for stand-alone parts of a document that could eventually besyndicated in RSS streams. elements are used to cut a logical part into subparts. So yes, an may be cut into different elements.The blog example on the other hand uses a single that contains several elements.We can imagine having a that regroups all blog post per month.Example of a blog post cut into elements:

Blog posts cut in elements123456789101112131415

Introduction

My travel to India

Return to France

Can we put a in an ?Yes we can, in case you would like to propose some navigation links with each blog post, for example:

Some into elements123456789101112131415

Blog post titleAuthor : Michel

Next post Previous post Contact author Content...

Posted by Michel, the February 2, 2012


10 de 20 16/05/2015 04:31 p.m.

Some into elements1617

In that case, the nav element proposes navigation links to the next or previous blog post, as well as alink to contact the author of the blog post. Notice also that we used in that example a element in the blog post.

What about the element ? Is it still useful ?

The new structuring tags have been primarily designed for simplifying the code of HTML pages such as the onesgenerated by blog or CMS software, however do not forget that they add new semantics and will be taken intoaccount by :

Browsers natively or browsers' extensions, i.e. for generating automatically a table of content, an outline viewof the document, for applying default CSS rules to these elements, etc. See forexample: http://code.google.com/p/h5o/ (Chrome extension).JavaScript libraries,Screen readers that vocalize documents' content, see http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/ for an interesting HTML5 aria support blog post.Web crawlers, etc.

You can use elements in all cases where the proposed structuring elements do not fit your needs. For definingsome structural content that should be styled, for example.

Recommended lecture about "to or not to ": http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/

Using HTML5 structuring elements and document outlineStructuring elements such as .. as well as the new HTML5 structuring elements we juststudied are taken into account by a new "outline" algorithm described in the HTML5 specification(see: http://dev.w3.org/html5/spec/single-page.html#outline)Before HTML5, we had the concept of a document outline: take into account only the different headers to in order to get (in general, using some JavaScript or browsers' extensions) an "outline view" or a "table ofcontents" view, similar to the "outline view" of a document in a word processor (Word and Open Office have suchan option).

This is the "outline" of this page generated by the Chrome HTML5 outliner extension:

Note: this page has been created by Moodle, a CMS-like software for creating online courses. The current version


11 de 20 16/05/2015 04:31 p.m.

does not use HTML5 structuring elements such as , , etc. On this outline "Towardsmore simplicity" is a , "A minimal HTML5 document" is a , etc...

But, before HTML5 we were stuck with only 6 hierarchy levels and in case of content syndication into RSS streamsor inclusion of some HTML parts into another HTML document, we could get "bad header hierarchies". Imaginethat we extract HTML content with only and headers and put this content inside another document orinto a RSS stream with only and headers. Outlining algorithms may be confused and/or the table ofcontents that will be generated will have "missing hierarchy levels".

The new structuring elements of HTML5 solve this problem, and for the first time, an algorithm for outlining adocument is included in the specification.

Let's get back to our blog example : http://jsbin.com/agoyoj/7/edit

We will now look at the "outline" of our blog document. Since in September 2012 no web browser has a nativeimplementation of the outlining algorithm, we can try several tools:

Geoffrey Sneddon's on-line HTML5 outliner,A browser extension such as this one for Chrome: Google HTML5 outliner, or the HTML5 Outliner OperaExtension or this Firefox extensionUse a bookmarklet like the one also proposed on the Google HTML5 outliner page,

So, try one of these solutions with the example. You should get something like this (for the screenshots, we used theChrome extension):

Hmmm, there are some "Untitled NAV" and "Untitled SECTION" entries in there: we will see how to fix that later...The interesting part is that the elements have been taken into account. A good practice with HTML5 is tohave elements for each "title part" of your document and hierarchize them. In our example, "SimpleHTML5 blog" is a at the top of the hierarchy of elements, while the whole "Information aboutthis example" is two levels further down in the hierarchy. And the "Untitled..." parts show that both and elements are also parts of this hierarchy.

So... let's add elements to fix these missing parts, and we will continue the discussion...

Fixed version: http://jsbin.com/agoyoj/9/edit

Parts that have been modified:

Fixed version with a header in the element123


12 de 20 16/05/2015 04:31 p.m.

Fixed version with a header in the element456789

1011121314151617181920212223242526272829303132333435

Simple HTML5 blog

Simple HTML5 blog

Navigation menu

BlogAboutContact

Blog posts for April 2012

Information about this exampleSome subtitle in the header

This example is a modified version of

Source code:

Some headers that include several other elements12345678910111213141516171819

Something

Welcome to an example of

Some text in a h1 in a header of a section Some other text in a h1 in a header of a section

Notice that we have two different elements in the of the .

Here is the result and the corresponding outline:

Here is another version:

Use of to display only 1 subheader in the outline123456789

Some text in a h1 in a header of a section This a h2 in the header...

Note that we also added a element in the header, just to get a more complete outline in our example. Here isthe result:

Examples with the table of contents inserted directly in the page (no need for a browserextension)

In these examples, we included directly in the HTML document a minified JavaScript version of the code that is runby the HTML5 Outliner browser extension. The code comes from the "minifiedJS" link in the HTML5 Outliner(h5o) page.

Look at the previous example, with a link for displaying the table of contents in a element in the main:


14 de 20 16/05/2015 04:31 p.m.

Online version: http://jsbin.com/epofer/4/edit

And after clicking:

We also added in in a element, but not included in a , in the blog example:

Online version: http://jsbin.com/agoyoj/73/edit

Before:

After:


15 de 20 16/05/2015 04:31 p.m.

Discussion: can we have more than one H1 in a document ? When do Ineed a HEADER element ? Etc.There have been a lot of discussion during the last session of this course. People heard that a best practice is not tohave more than one in a document, people who followed the W3C accessibility course asked how these newelements will be handled by assistive technologies etc. Here is a summary of these discussions and also a nice chartfrom HTML5doctor web site that may help.


16 de 20 16/05/2015 04:31 p.m.

About the H1 element and best practices

Here is an answer we got from the person in charge of the HTML5 specification writing (RobinBerjon ). Here are some extracts (I translate his message as he wrote in french):

---------

"With the Document Outline algorithm, normally you can use the hN you want where you want and as long asyou're in a proper sectioning element it does not change anything (article, aside, nav, section). The outline will becorrect whatever happens. That said, the outline algorithm is not completely guaranteed, no one really uses it today,there is no native implementations in browsers yet, no associated style, just JavaScript implementations."

If you read: http://www.w3.org/html/wg/drafts/html/master/sections.html # headings-and-sections

You will see: "Sections may contain headings of any rank, and authors are strongly encouraged to use headingsof the appropriate rank for the section's nesting level"

Note also that the counts for nothing, only sectioning elements are taken into account.

If it makes you feel better, you will also see in the specification: "Authors are also encouraged to explicitly wrapsections in elements of sectioning content, instead of relying on the implicit sections generated by having multipleheadings in one element of sectioning content"

If you look at the code of the spec, you'll see it sits its heavy butt on this good practice;-)

---------


17 de 20 16/05/2015 04:31 p.m.

H1 and HEADER, comparing the HTML5 way to the "old way"

As you guessed, the way we used H1, h2 etc. has changed with HTML5. Main reason is that h1..h6 was not enough(sometimes we need more than 6 levels), and when a "section" of a document is integrated in a stream of data, likein RSS flux, keeping a hierarchy with correct levels of h1..h6 was complicated.

And yes! We can have as many H1 as we like in a document.

For example (taken from a french I know well: http://css.4design.tl/quelques-notes-sur-la-balise-h1-avec-html5)

This example :

12345678

Let's call it a draw(ing surface) Diving in Simple shapes Canvas coordinates Canvas coordinates diagram Paths

Follows the "old way" of using headers, is equivalent to:

123456789101112131415161718


The second form is certainly machine generated while the first one looks more than something a WYSIWYG editormay produce.

If we look at this example now:

12345678

Apples Apples are fruit. Taste They taste lovely. Sweet


18 de 20 16/05/2015 04:31 p.m.

910111213141516

Red apples are sweeter than green ones. Color Apples come in various colors.

It uses h2 directly in elements... this is not recommended in case of syndication. A preferred way is:

12345678910111213141516

Apples Apples are fruit. Taste They taste lovely. Sweet Red apples are sweeter than green ones. Color Apples come in various colors.

With multiple in each sectioning parts. In that cas h1..h6 are used for hierarchizing inside sectionningelements. And nested sectioning contents (articles in sections or sections in sections or articles, etc.) add alsohierarchy levels, breaking the 1-6 levels of h.. barrier.

Document produced by a WYSIWYG editor vs a web site:

If we look again at the first example:

12345678


That is what a typical WYSIWYG editor in CMS/Blog would produce, the content between .. willneed to be integrated in the web site layout, where , , and will be used. It maybecome:

1234

Posts from March 2013


19 de 20 16/05/2015 04:31 p.m.

567891011121314151617

.../h2> Whatever description....


etc... sectioning elements and headers have been mainly designed for CMS/Blog softwares. The new way oforganizing h1..h6 and the way they interact with sectionning elements is much more simple to handle for blog/cmsdevelopers.

A few words about accessibility and these new elements

From Shadi Abou-Zahra ([email protected]), who works with the accessibility group at W3C.

"It seems important that we differentiate between what is theoretically possible and what browsers and assistivetechnologies (such as screen readers for blind computer users) currently support (ie. practically accessible vstheoretically accessible).

Both HTML (4 & 5) and the Web Content Accessibility Guidelines (WCAG) 2.0 do not prescribe a heading-levelsorder meaning that multiple H1s etc. may be used *when* necessary. There are several use-cases that require suchuse of headings (especially in richer web applications) but in general they should be avoided where possible. Inmost cases hierarchical organization of your content is the clearest (for your users, search engines, etc.).

As to page area separators such as header and section areas, theoretically these are each separate areas that canhave their own hierarchical heading structures. This is particularly useful for aggregated web pages and content aswas mentioned. However, I'm unsure how widely supported these elements are in current assistive technologies andI think in some they are still ignored. This could make a web page very quickly complex and difficult to overview asthe user may not be able to easily identify the main content its organization.

In conclusion I'd say there isn't one correct solution but to keep thinking about how to present your information inthe simplest and most appropriate way. It is good when an "alarm bell" goes off whenever complex nesting (likeduplicate H1s or headers in articles etc.) is spotted but that does not necessarily mean it is wrong per-se. There maybe no better solution for the particular situation."


20 de 20 16/05/2015 04:31 p.m.

documento 1 de html5

Documents