#3 html in the real world

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 (1)
The em element represents stress emphasis
of its contents.
Source : w3.org

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

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 (2)
article
article
article
article
Source : http://qz.com

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 (2)
Source : http://www.lemonde.fr/
section
section

Section (3)
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
</p>
</section>
<section>
<p>
</p>
<p>
</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 (2)
nav
Source : https://www.fitocracy.com/

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

aside
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

<section>
<h1>Lorem</h1>
<article>
<h2>Lorem ipsum 1</h2>
<p>
</p>
</article>
<article>
<h2>Lorem ipsum 2</h2>
<p>
</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)
Source : https://medium.com/
header

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 (2)
Source : http://qz.com
footer

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écapitulatif
body
header
section
section
footer
article
article
aside
nav
article nav

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>

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">
</p>
<p class="lorem">
Proin quis rutrum justo.
</p>
<p class="lorem last">
Praesent ut ante ut nibh sollicitudin fermentum ut sed dui.
</p>

Bibliographie
A vocabulary and associated APIs for HTML and XHTML - W3C
http://www.w3.org/TR/html5/
HTML5 : structure globale du document -Simon-K
http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html

#3 html in the real world

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie #3 html in the real world

Ähnlich wie #3 html in the real world (12)

Mehr von Jean Michel

Mehr von Jean Michel (13)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

#3 html in the real world