#3 html in the real world
DESCRIPTION
#3 html in the real worldTRANSCRIPT
HTML in the real world
Texte & sémantique
Saut de ligne (1)
The br element represents a line break.Source : w3.org
br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.Source : w3.org
Saut de ligne (2)
<p> Roses are red,<br/> Violets are blue,<br/> Sugar is sweet,<br/> And so are you.<br/> </p>
<p> All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. You always know after you are two. Two is the beginning of the end. <br/><br/> ! Of course they lived at 14 [their house number on their street], and until Wendy came her mother was the chief one. </p>
Marquer (1)
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.Source : w3.org
Marquer (2)
<p> Wendy came first, then <mark>John</mark>, then Michael. </p>
Code informatique (1)
The code element represents a fragment of computer code.Source : w3.org
Code informatique (2)
<code> var i = 2; alert(i); </code>
Importance (1)
The strong element represents strong importance, seriousness, or urgency for its contents.Source : w3.org
Importance (2)
<p> We are here to ensure that <strong>every child born into this world receives a quality education</strong>. </p>
Gras (1)
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.Source : w3.org
Gras (2)
<p> Le <b>phare de Djeddah</b> est un phare situé à Djeddah. </p>
Emphase (2)
<p><em>Cats</em> are cute animals.</p> <p>Cats <em>are</em> cute animals.</p> <p>Cats are <em>cute</em> animals.</p> <p>Cats are cute <em>animals</em>.</p>
Italique (1)
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term …Source : w3.org
Italique (2)
<p>There is a certain <i>je ne sais quoi</i> in the air.</p>
Et bien d’autres …
small - cite - abbr - time
Sections & structure
Contenu (1)
The body element represents the content of the document.Source : w3.org
In conforming documents, there is only one body element. Source : w3.org
Contenu (2)
<!doctype html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Super titre</h1> <p>Lorem ipsum</p> </body> </html>
Article (1)
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.Source : w3.org
Article (3)
article
Article (4)
<article> <h1>Lorem ipsum</h1> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio magna, porta ut congue gravida, pharetra eu turpis. Donec congue pulvinar iaculis.
</p> </article>
Section (1)
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Source : w3.org
Section (3)<h1>Lorem ipsum</h1> <section> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </section> <section> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </section>
Navigation (1)
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.Source : w3.org
Navigation (3)
<nav> <h1>Navigation</h1> <ul> <li><a href="#">Index</a></li> <li><a href="#">Things</a></li> <li><a href="#">Other things</a></li> </ul> </nav>
Informations complémentaires (1)
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.Source : w3.org
Informations complémentaires (2)
Source : http://www.upworthy.com/one-of-the-biggest-impacts-on-an-adults-life-is-how-they-spend-10-minutes-a-day-as-a-child?c=hpstream
aside
Informations complémentaires (3)<section> <h1>Lorem</h1> <article> <h2>Lorem ipsum 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> <article> <h2>Lorem ipsum 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> <aside> <h2>Sidebar</h2> <ul> <li>Lorem 3</li> <li>Lorem 4</li> </ul> </aside> </section>
En-tête (1)
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.Source : w3.org
En-tête (2)
<header> <h1>Super title</h1> <nav> <ul> <li><a href="#">Games</a> <li><a href="#">Forum</a> <li><a href="#">Download</a> </ul> </nav> </header>
Pied de page (1)
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.Source : w3.org
Pied de page (3)
<article> <h1>Toto</h1> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> <footer> <p>published on 2009/10/21 at 6:26pm</p> </footer> </article>
Récapitulatifbody
header
footer
section
sectionarticle
articleaside
nav
article nav
balises universelles
div
The div element has no special meaning at all. It represents its children.Source : w3.org
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.Source : w3.org
div (2)
<div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
span
The span element doesn't mean anything on its own. It represents its children.Source : w3.org
span (2)
<h1>Lorem ipsum <span>dolor</span> sit amet.</h1>
Les Attributs
id
The id attribute specifies its element's unique identifier (ID).Source : w3.org
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.Source : w3.org
id (2)
<h1 id="brand">Lorem ipsum</h1>
class
Every HTML element may have a class attribute specified.Source : w3.org
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.Source : w3.org
class (2)
<p class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p class="lorem"> Proin quis rutrum justo. </p> <p class="lorem last"> Praesent ut ante ut nibh sollicitudin fermentum ut sed dui. </p>
Merci pour votre attention.
Bibliographie
HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/