From 2c06c1e456cf28d032c6afc4f1613447b620e16e Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 16 Jun 2021 00:36:25 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 3 +- files/de/_wikihistory.json | 14 +- .../using_html_sections_and_outlines/index.html | 352 ++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 352 ------------------ files/es/_redirects.txt | 7 +- files/es/_wikihistory.json | 24 +- .../using_html_sections_and_outlines/index.html | 410 ++++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 410 -------------------- files/fr/_redirects.txt | 5 +- files/fr/_wikihistory.json | 46 +-- .../using_html_sections_and_outlines/index.html | 376 +++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 376 ------------------- files/ja/_redirects.txt | 7 +- files/ja/_wikihistory.json | 38 +- .../using_html_sections_and_outlines/index.html | 288 +++++++++++++++ .../using_html_sections_and_outlines/index.html | 287 -------------- files/ko/_redirects.txt | 3 +- files/ko/_wikihistory.json | 22 +- .../using_html_sections_and_outlines/index.html | 368 ++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 368 ------------------ files/pt-br/_redirects.txt | 5 +- files/pt-br/_wikihistory.json | 34 +- .../using_html_sections_and_outlines/index.html | 411 +++++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 411 --------------------- files/ru/_redirects.txt | 3 +- files/ru/_wikihistory.json | 22 +- .../using_html_sections_and_outlines/index.html | 374 +++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 374 ------------------- files/zh-cn/_redirects.txt | 3 +- files/zh-cn/_wikihistory.json | 24 +- .../using_html_sections_and_outlines/index.html | 376 +++++++++++++++++++ .../using_html_sections_and_outlines/index.html | 376 ------------------- 32 files changed, 3089 insertions(+), 3080 deletions(-) create mode 100644 files/de/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/de/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/es/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/fr/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/fr/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/ja/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/ko/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/ru/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 785ace89dc..145035671d 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -669,7 +669,8 @@ /de/docs/Web/Guide/HTML/Einführung /de/docs/Learn/HTML/Introduction_to_HTML /de/docs/Web/Guide/HTML/HTML5 /de/docs/orphaned/Web/Guide/HTML/HTML5 /de/docs/Web/Guide/HTML/Inhaltskategorien /de/docs/Web/Guide/HTML/Content_categories -/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /de/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /de/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +/de/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /de/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /de/docs/Web/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements /de/docs/Web/HTML/Canvas /de/docs/Web/API/Canvas_API /de/docs/Web/HTML/Element/h1 /de/docs/Web/HTML/Element/Heading_Elements diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 05f7a170e9..d156c97d47 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -8145,13 +8145,6 @@ "lxdiamond" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2019-03-18T20:37:20.242Z", - "contributors": [ - "SebinNyshkim", - "BlackRebell89" - ] - }, "Web/Guide/Mobile": { "modified": "2019-03-23T23:29:04.325Z", "contributors": [ @@ -14759,6 +14752,13 @@ "nothine" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-18T20:37:20.242Z", + "contributors": [ + "SebinNyshkim", + "BlackRebell89" + ] + }, "orphaned/Web/HTML/Global_attributes/dropzone": { "modified": "2020-10-15T21:40:11.332Z", "contributors": [ diff --git a/files/de/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/de/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..7fba488226 --- /dev/null +++ b/files/de/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,352 @@ +--- +title: Verwendung von HTML-Abschnitten und -Gliederungen +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

+ +

Dokumentstruktur in HTML 4

+ +

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

+ +

Folgendes Markup:

+ +
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div> 
+ +

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

zu folgender Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Durch HTML5 gelöste Probleme

+ +

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

+ +
    +
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. +
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. +
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. +
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. +
+ +

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

+ +

Der HTML5-Gliederungsalgorithmus

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

+ +

Abschnitte definieren

+ +

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

+ +
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
+ +

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Überschriften definieren

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

+ +

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

+ +

 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

+ +

Implizierte Abschnitte

+ +

 

+ +

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

+ +

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

+ +

 

+ +
<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>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat (implizit definiert durch das Element h3)
+
+ +

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
+
+ +

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

leading to the following outline:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

+ +

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

+ +

Sectioning roots

+ +

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

This example results in the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

+ +

Sections outside the outline

+ +

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

+ +
    +
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. +
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. +
+ +

Headers and Footers

+ +

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

+ +
    +
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. +
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. +
+ +

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

+ +

Addresses in sectioning elements

+ +

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

+ +

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

+ +

Using HTML5 elements in non-HTML5 browsers

+ +

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

+ +

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

+ +
article, aside, footer, header, nav, section {
+  display:block;
+}
+
+ +

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

+ +

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+
+ +

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

+ +
<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +
+

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

+
+ +

Conclusion

+ +

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

diff --git a/files/de/web/guide/html/using_html_sections_and_outlines/index.html b/files/de/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 0dad2f01c2..0000000000 --- a/files/de/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Verwendung von HTML-Abschnitten und -Gliederungen -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ---- -
{{HTMLSidebar}}
- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

- -

Dokumentstruktur in HTML 4

- -

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

- -

Folgendes Markup:

- -
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div> 
- -

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

- -
1. Forest elephants
-   1.1 Habitat
-
- -

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

zu folgender Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

Durch HTML5 gelöste Probleme

- -

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

- -
    -
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. -
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. -
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. -
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. -
- -

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

- -

Der HTML5-Gliederungsalgorithmus

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

- -

Abschnitte definieren

- -

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

- -
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
- -

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

- -
<section>
-
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-
- -

Überschriften definieren

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

- -

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

- -

 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

- -

Implizierte Abschnitte

- -

 

- -

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

- -

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

- -

 

- -
<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>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-   1.1 Habitat (implizit definiert durch das Element h3)
-
- -

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
-
- -

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this section continues...
-  </section>
-</body>
- -

leading to the following outline:

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
-
- -

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

- -

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

- -

Sectioning roots

- -

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

This example results in the following outline:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

- -

Sections outside the outline

- -

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

- -
    -
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. -
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. -
- -

Headers and Footers

- -

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

- -
    -
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. -
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. -
- -

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

- -

Addresses in sectioning elements

- -

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

- -

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

- -

Using HTML5 elements in non-HTML5 browsers

- -

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

- -

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

- -
article, aside, footer, header, nav, section {
-  display:block;
-}
-
- -

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

- -

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-
- -

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

- -
<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -
-

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

-
- -

Conclusion

- -

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 1d5953075f..67f931a4f7 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1700,9 +1700,9 @@ /es/docs/SVG_In_HTML_Introduction /es/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction /es/docs/SVG_en_Firefox /es/docs/Web/SVG/SVG_1.1_Support_in_Firefox /es/docs/Screening_duplicate_bugs /es/docs/QA/Screening_duplicate_bugs -/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines -/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines -/es/docs/Sections_and_Outlines_of_an_HTML5_document /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Sections_and_Outlines_of_an_HTML5_document /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/Seguridad_en_Firefox_2 /es/docs/Mozilla/Firefox/Releases/2/Security_changes /es/docs/Selección_de_modo_en_Mozilla /es/docs/orphaned/Selección_de_modo_en_Mozilla /es/docs/Server-sent_events /es/docs/Web/API/Server-sent_events @@ -2079,6 +2079,7 @@ /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduction_to_HTML /es/docs/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/orphaned/Web/Guide/HTML/Introduction_alhtml_clone +/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/Guide/HTML/Content_categories /es/docs/Web/Guide/Movil /es/docs/Web/Guide/Mobile /es/docs/Web/Guide/Performance/Usando_web_workers /es/docs/Web/API/Web_Workers_API/Using_web_workers diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index f1b37b448d..4be224b7d4 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -14261,18 +14261,6 @@ "V.Morantes" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2019-03-23T23:38:22.567Z", - "contributors": [ - "blanchart", - "eljonims", - "welm", - "javigaar", - "learnercys", - "pierre_alfonso", - "jesanchez" - ] - }, "Web/Guide/Mobile": { "modified": "2019-03-23T22:48:50.706Z", "contributors": [ @@ -23577,6 +23565,18 @@ "Cristhoper" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-23T23:38:22.567Z", + "contributors": [ + "blanchart", + "eljonims", + "welm", + "javigaar", + "learnercys", + "pierre_alfonso", + "jesanchez" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2019-10-05T04:48:52.506Z", "contributors": [ diff --git a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..dcee261b54 --- /dev/null +++ b/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,410 @@ +--- +title: Secciones y esquema de un documento HTML5 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.

+ +
+

A lo largo de este documento se empleará la palabra esquema en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

+
+ +

Estructura de un documento HTML 4

+ +

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.

+ +

Entonces el siguiente marcado:

+ +
+
<div class="seccion" id="zorro" >
+<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<div class="subseccion" id="zorro-habitat" >
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+</div>
+</div>
+
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+
+ +

Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,

+ +
<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+<h2>Costrumbres</h2>
+<h1>El oso</h1>
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+   1.2 Costumbres
+2. El oso
+
+ +

Problemas resueltos por HTML5

+ +

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

+ +
    +
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para tecnologías de apoyo, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
    2. +
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.
    3. +
  3. Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. +
  4. En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.
    5. +
  5. Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.
    6. +
+ +

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

+ +

El algoritmo de esquematizado de HTML5

+ +

Definiendo secciones en HTML5

+ +

Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.

+ +
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también Definiendo cabeceras en HTML5.
+ +

Ejemplo:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+  <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

El bloque de HTML define dos secciones de alto nivel:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+   <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

La primera sección tiene tres subsecciones:

+ +
<section>
+  <h1>El pato</h1>
+
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+
+  <aside>
+    <p>Otros estudiosos del lobo
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

Esto genera la siguiente estructura:

+ +
1. El pato
+   1.1 Introducción
+   1.2 Hábitat
+   1.3 Section (aside)
+
+ +

Definiendo cabeceras en HTML5

+ +

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.

+ +

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:

+ +
<section>
+  <h1>La mosca</h1>
+  <p>El esta sección hablaremos de la mosca, una criatura adorable.
+    ... bla, bla, bla ...
+  <section>
+    <h2>Hábitat</h2>
+    <p>Únicamente se han divisado colonias de moscas en los montes de....
+        ...bla, bla, bla ...
+  </section>
+</section>
+<section>
+  <h3>El mosquito</h3>
+  <p>A continuación, otra rareza a punto de extinguirse, el mosquito.
+     ...bla, bla, bla...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. La mosca
+   1.1 Hábitat
+2. El mosquito
+ +

Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).

+ +

Seccionado implícito

+ +

Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado seccionado implícito.

+ +

Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:

+ +
<section>
+  <h1>El águila</h1>
+  <p> ....
+
+  <h3 class="subsec-implicita">Hábitat</h3>
+  <p> ...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. El águila
+   1.1 Hábitat (impícitamente definido mediante <h3>)
+
+ +

Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: 

+ +
<section>
+  <h1>El águila</h1>
+  <p>...
+  <h1 class="secc-implicita">El buitre</h1>
+  <p>...
+</section>
+ +

genera el siguiente esquema: 

+ +
1. El águila
+2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
+
+ +

Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:

+ +
<body>
+  <h1>Colores</h1>
+  <h2>Rojo</h2>
+  <p> ...
+  <section>
+    <h3>Amarillo</h3>
+    <p> ...
+    <h3>Verde</h3>
+      <p> ...
+    <h2>Sabores</h2>
+      <p>...
+  </section>
+</body>
+ +

generando el siguiente esquema:

+ +
1. Colores
+   1.1 Rojo (implícitamente con <h2> )
+   1.2 Amarillo(explícitamente con <section> )
+   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
+2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
+
+ +

Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica

+ + + +

Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

+ +

Una excepción a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser reutilizadas en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.

+ +

Sobreescribiendo seccionamiento implícito

+ +

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

+ + + +

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:

+ +
<section>
+  <hgroup>
+    <h1>La flauta mágica</h1>
+    <h2>Ópera en dos actos del genio salzburgués</h2>
+  </hgroup>
+  ... algún contenido ...
+</section>
+
+ +

genera el siguiente esquema, que es el que se desea:

+ +
1. La flauta mágica
+ +

Secciones desacopladas

+ +

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

+ +

Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.
+  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

+ +

Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.

+ +

Ejemplo:

+ +
<section>
+  <h1>Bach</h1>
+  <section>
+    <h2>Introducción</h2>
+    <p>...
+  </section>
+  <section>
+    <h2>La Pasión según S. Mateo</h2>
+    <p> Bla, bla, bla ...
+    <blockquote>
+       <h1>Friedich Nietzsche
+       <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
+    </blockquote>
+  </section>
+</section>
+ +

Este ejemplo resulta en el siguiente esquema:

+ +
1. Bach
+   1.1 Introducción
+   1.2 La Pasión según s. Mateo
+ +

Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.

+ +

Secciones fuera del esquema

+ +

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

+ +
    +
  1. El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.
    2. +
  2. El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
    3. +
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.
    4. +
  4. El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.
    5. +
+ +

Direcciones y tiempo de publicación en elementos de seccionado

+ +

El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.

+ +

Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

Usando elementos HTML5 en navegadores no HTML5

+ +

Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como display:inline por defecto:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.
+
+ Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Conclusión

+ +

Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.

diff --git a/files/es/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 47e6654aae..0000000000 --- a/files/es/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Secciones y esquema de un documento HTML5 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Sections_and_Outlines_of_an_HTML5_document ---- -

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.

- -
-

A lo largo de este documento se empleará la palabra esquema en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

-
- -

Estructura de un documento HTML 4

- -

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.

- -

Entonces el siguiente marcado:

- -
-
<div class="seccion" id="zorro" >
-<h1>El zorro</h1>
-<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
-... bla, bla, bla ...
-<div class="subseccion" id="zorro-habitat" >
-<h2>Hábitat</h2>
-<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
-...bla, bla, bla...
-</div>
-</div>
-
-
- -

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-
- -

Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,

- -
<h1>El zorro</h1>
-<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
-... bla, bla, bla ...
-<h2>Hábitat</h2>
-<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
-...bla, bla, bla...
-<h2>Costrumbres</h2>
-<h1>El oso</h1>
-
- -

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-   1.2 Costumbres
-2. El oso
-
- -

Problemas resueltos por HTML5

- -

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

- -
    -
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para tecnologías de apoyo, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
    2. -
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.
    3. -
  3. Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. -
  4. En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.
    5. -
  5. Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.
    6. -
- -

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

- -

El algoritmo de esquematizado de HTML5

- -

Definiendo secciones en HTML5

- -

Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.

- -
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también Definiendo cabeceras en HTML5.
- -

Ejemplo:

- -
<section>
-  <h1>El pato</h1>
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-  <aside>
-    <p>otros estudiosos del pato
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

El bloque de HTML define dos secciones de alto nivel:

- -
<section>
-  <h1>El pato</h1>
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-   <aside>
-    <p>otros estudiosos del pato
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

La primera sección tiene tres subsecciones:

- -
<section>
-  <h1>El pato</h1>
-
-  <section>
-    <h1>Introducción</h1>
-    <p>En esta sección, ampliaremos nuestro concepto del pato.
-  </section>
-
-  <section>
-    <h1>Hábitat</h1>
-    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
-  </section>
-
-  <aside>
-    <p>Otros estudiosos del lobo
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

Esto genera la siguiente estructura:

- -
1. El pato
-   1.1 Introducción
-   1.2 Hábitat
-   1.3 Section (aside)
-
- -

Definiendo cabeceras en HTML5

- -

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.

- -

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:

- -
<section>
-  <h1>La mosca</h1>
-  <p>El esta sección hablaremos de la mosca, una criatura adorable.
-    ... bla, bla, bla ...
-  <section>
-    <h2>Hábitat</h2>
-    <p>Únicamente se han divisado colonias de moscas en los montes de....
-        ...bla, bla, bla ...
-  </section>
-</section>
-<section>
-  <h3>El mosquito</h3>
-  <p>A continuación, otra rareza a punto de extinguirse, el mosquito.
-     ...bla, bla, bla...
-</section>
- -

Genera el siguiente esquema:

- -
1. La mosca
-   1.1 Hábitat
-2. El mosquito
- -

Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).

- -

Seccionado implícito

- -

Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado seccionado implícito.

- -

Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:

- -
<section>
-  <h1>El águila</h1>
-  <p> ....
-
-  <h3 class="subsec-implicita">Hábitat</h3>
-  <p> ...
-</section>
- -

Genera el siguiente esquema:

- -
1. El águila
-   1.1 Hábitat (impícitamente definido mediante <h3>)
-
- -

Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: 

- -
<section>
-  <h1>El águila</h1>
-  <p>...
-  <h1 class="secc-implicita">El buitre</h1>
-  <p>...
-</section>
- -

genera el siguiente esquema: 

- -
1. El águila
-2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
-
- -

Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:

- -
<body>
-  <h1>Colores</h1>
-  <h2>Rojo</h2>
-  <p> ...
-  <section>
-    <h3>Amarillo</h3>
-    <p> ...
-    <h3>Verde</h3>
-      <p> ...
-    <h2>Sabores</h2>
-      <p>...
-  </section>
-</body>
- -

generando el siguiente esquema:

- -
1. Colores
-   1.1 Rojo (implícitamente con <h2> )
-   1.2 Amarillo(explícitamente con <section> )
-   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
-2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
-
- -

Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica

- - - -

Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

- -

Una excepción a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser reutilizadas en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.

- -

Sobreescribiendo seccionamiento implícito

- -

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

- - - -

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:

- -
<section>
-  <hgroup>
-    <h1>La flauta mágica</h1>
-    <h2>Ópera en dos actos del genio salzburgués</h2>
-  </hgroup>
-  ... algún contenido ...
-</section>
-
- -

genera el siguiente esquema, que es el que se desea:

- -
1. La flauta mágica
- -

Secciones desacopladas

- -

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

- -

Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.
-  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

- -

Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.

- -

Ejemplo:

- -
<section>
-  <h1>Bach</h1>
-  <section>
-    <h2>Introducción</h2>
-    <p>...
-  </section>
-  <section>
-    <h2>La Pasión según S. Mateo</h2>
-    <p> Bla, bla, bla ...
-    <blockquote>
-       <h1>Friedich Nietzsche
-       <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
-    </blockquote>
-  </section>
-</section>
- -

Este ejemplo resulta en el siguiente esquema:

- -
1. Bach
-   1.1 Introducción
-   1.2 La Pasión según s. Mateo
- -

Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.

- -

Secciones fuera del esquema

- -

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

- -
    -
  1. El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.
    2. -
  2. El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
    3. -
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.
    4. -
  4. El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.
    5. -
- -

Direcciones y tiempo de publicación en elementos de seccionado

- -

El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.

- -

Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.

- -

De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.

- -

Usando elementos HTML5 en navegadores no HTML5

- -

Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como display:inline por defecto:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.
-
- Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Warning !</strong>
-     Because your browser does not support HTML5, some elements are simulated using JScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

Conclusión

- -

Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index c304f382b3..e7abf03344 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -2020,7 +2020,7 @@ /fr/docs/HTML/Manipulating_video_using_canvas /fr/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /fr/docs/HTML/Reglages_des_attributs_CORS /fr/docs/Web/HTML/Attributes/crossorigin /fr/docs/HTML/Référence_Éléments_HTML /fr/docs/Web/HTML/Element -/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /fr/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /fr/docs/HTML/formats_media_support /fr/docs/Web/Media/Formats /fr/docs/HTML:Canvas /fr/docs/Web/API/Canvas_API /fr/docs/HTML:Element /fr/docs/Web/HTML/Element @@ -4480,6 +4480,7 @@ /fr/docs/Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 /fr/docs/conflicting/Web/HTML/Element /fr/docs/Web/Guide/HTML/Introduction /fr/docs/Learn/HTML/Introduction_to_HTML /fr/docs/Web/Guide/HTML/Liens_email /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85 +/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /fr/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /fr/docs/Web/Guide/Using_FormData_Objects /fr/docs/conflicting/Web/API/FormData/Using_FormData_Objects /fr/docs/Web/HTML/Appliquer_des_couleurs /fr/docs/Web/HTML/Applying_color /fr/docs/Web/HTML/Attributs /fr/docs/Web/HTML/Attributes @@ -4578,7 +4579,7 @@ /fr/docs/Web/HTML/Preloading_content /fr/docs/orphaned/Web/HTML/Preloading_content /fr/docs/Web/HTML/Précharger_du_contenu /fr/docs/orphaned/Web/HTML/Preloading_content /fr/docs/Web/HTML/Reglages_des_attributs_CORS /fr/docs/Web/HTML/Attributes/crossorigin -/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /fr/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /fr/docs/Web/HTML/Types_de_lien /fr/docs/Web/HTML/Link_types /fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5 /fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf /fr/docs/Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML /fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index aa4972b8c4..485a786b96 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -31040,29 +31040,6 @@ "SphinxKnight" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2020-04-07T04:00:20.055Z", - "contributors": [ - "n3wborn", - "mathildebuenerd", - "ledenis", - "JNa0", - "edspeedy", - "Pols12", - "efazenda", - "Phklrz", - "Mathieu_deLauniere", - "Havano", - "Fredchat", - "wakka27", - "jessmania", - "ferncoder", - "SphinxKnight", - "tregagnon", - "Blancdememoire", - "FredB" - ] - }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-03-24T00:03:04.501Z", "contributors": [ @@ -45193,6 +45170,29 @@ "xaky" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-04-07T04:00:20.055Z", + "contributors": [ + "n3wborn", + "mathildebuenerd", + "ledenis", + "JNa0", + "edspeedy", + "Pols12", + "efazenda", + "Phklrz", + "Mathieu_deLauniere", + "Havano", + "Fredchat", + "wakka27", + "jessmania", + "ferncoder", + "SphinxKnight", + "tregagnon", + "Blancdememoire", + "FredB" + ] + }, "orphaned/Web/HTML/Element/isindex": { "modified": "2020-10-15T21:24:06.247Z", "contributors": [ diff --git a/files/fr/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/fr/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..77cace3b45 --- /dev/null +++ b/files/fr/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,376 @@ +--- +title: Structures et sections d'un document HTML5 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - Avancé + - Exemple + - Guide + - HTML + - HTML5 + - Section + - Structure + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.

+ +

Structure et document outline

+ +

Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.

+ +

Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.

+ +

Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <h2> sera considéré comme un niveau hiérarchique plus bas qu'un <h1> et un niveau plus haut qu'un <h3>.

+ +

L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <section> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.

+ +

Structure d'un document depuis HTML4

+ +

La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.

+ +

Ainsi, le code suivant :

+ +

+<div class="section" id="foret-elephants">
+  <h1>Les éléphants de forêt</h1>
+  <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
+     … cette section continue…
+  <div class="subsection" id="foret-habitat">
+    <h2>Habitat</h2>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       … ce paragraphe continue…
+  </div>
+</div>
+ +

conduit au schéma suivant :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+
+ +

Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :

+ +
<h1>Les éléphants de forêt</h1>
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+    … cette section continue…
+
+  <h2>Habitat</h2>
+  <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+    … ce paragraphe continue…
+
+  <h2>Régime</h2>
+
+<h1>Gerbilles de Mongolie</h1>
+
+ +

conduit au schéma suivant :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+  1.2 Régime
+2. Gerbilles de Mongolie
+ +

Problèmes résolus par HTML5

+ +

Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :

+ +
    +
  1. L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut class, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
    2. +
  2. La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.
    3. +
  3. En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.
    4. +
  4. Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.
    5. +
+ +

Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.

+ +

L'algorithme Outline HTML5

+ +
+

Important : Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme Outline ne devrait donc pas être utilisé pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le rang des titres (h1-h6) pour transmettre la structure d'un document.

+
+ +

Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.

+ +

Définir des sections en HTML5

+ +

Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

+ +
+

Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition des sections en HTML5

+
+ +

Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :

+ +
<section>
+
+  <h1>éléphants de forêt</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
+  </section>
+
+  <aside>
+    <p>bloc publicitaire</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 La société Exemple</p>
+</footer>
+
+ +

Cela conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat
+  1.3 Section (aside)
+ +

Définition des en-têtes en HTML5

+ +

Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.

+ +

Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé et {{HTMLElement ("h6")}} a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :

+ +
<section>
+  <h1>éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…</p>
+
+  <section>
+    <h2>Habitat</h2>
+
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       Ce paragraphe continue…</p>
+  </section>
+</section>
+
+<section>
+  <h3>Gerbilles de Mongolie</h3>
+
+  <p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
+     Cette section continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+2. Gerbilles de Mongolie
+ +

Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.

+ +

Découpage implicite

+ +

Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.

+ +

Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :

+ +
<section>
+  <h1>éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  <h3 class="implicit subsection">Habitat</h3>
+
+  <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
+     Ce paragraphe continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Habitat (implicitement défini par l'élément h3)
+ +

Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :

+ +
<section>
+  <h1>Éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  <h1 class="implicit section">Gerbilles de Mongolie</h1>
+
+  <p>Les gerbilles de Mongolie sont mignons petits mammifères.
+     Cette section continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
+ +

Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :

+ +
<body>
+  <h1>Mammifères</h1>
+
+  <h2>Baleines</h2>
+
+  <p>Dans cette section, nous discutons de baleines géantes.
+     Cette section continue…
+
+  <section>
+    <h3>Éléphants de forêt</h3>
+
+    <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
+       Cette section continue…
+
+    <h3>Gerbilles de Mongolie</h3>
+
+    <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
+       Ce paragraphe continue…
+
+    <h2>Reptiles</h2>
+
+    <p>Reptiles sont des animaux à sang froid.
+       Ce paragraphe continue…
+  </section>
+</body>
+ +

conduit à la structure suivante :

+ +
1. Mammifères
+  1.1 Baleines (défini implicitement par l'élément h2)
+  1.2 éléphants de forêt (défini explicitement par l'élément section)
+  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
+2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
+
+ +

Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.

+ +

Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.

+ +

Racines de sectionnement

+ +

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.

+ +

Exemple

+ +
<section>
+  <h1>Éléphants de forêt</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
+    <blockquote>
+      <h1>Bornéo</h1>
+      <p>L'éléphant de la forêt vie à Bornéo…</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Cet exemple se traduit par la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat
+ +

Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.

+ +

Les sections externes à la structure

+ +

HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :

+ +
    +
  1. L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.
    2. +
  2. L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.
    3. +
+ +

Headers and Footers

+ +

HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :

+ +
    +
  1. L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.
    2. +
  2. L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
    3. +
+ +

Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.

+ +

Adresses dans les éléments de sectionnement

+ +

L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.

+ +

Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.

+ +

Utilisation des éléments HTML5 dans les navigateurs Non-HTML5

+ +

Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display: block;
+}
+ +

Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.

+ +

Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :

+ +
<!--[if lt IE 9]>;
+  <script>
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  </script>
+<![endif]-->
+ +

Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :

+ +
<noscript>
+  <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
+  <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p>
+  <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
+  <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
+</noscript>
+ +

Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement ("time");
+  </script>
+<![endif]-->
+  <noscript>
+    <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
+    <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p>
+    <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
+    <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
+  </noscript>
+
+ +
+

Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.

+
+ +

Conclusion

+ +

Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/fr/web/guide/html/using_html_sections_and_outlines/index.html b/files/fr/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index ca5b85becb..0000000000 --- a/files/fr/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Structures et sections d'un document HTML5 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - Avancé - - Exemple - - Guide - - HTML - - HTML5 - - Section - - Structure - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document ---- -

Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.

- -

Structure et document outline

- -

Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.

- -

Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.

- -

Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <h2> sera considéré comme un niveau hiérarchique plus bas qu'un <h1> et un niveau plus haut qu'un <h3>.

- -

L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <section> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.

- -

Structure d'un document depuis HTML4

- -

La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.

- -

Ainsi, le code suivant :

- -

-<div class="section" id="foret-elephants">
-  <h1>Les éléphants de forêt</h1>
-  <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-     … cette section continue…
-  <div class="subsection" id="foret-habitat">
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       … ce paragraphe continue…
-  </div>
-</div>
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-
- -

Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :

- -
<h1>Les éléphants de forêt</h1>
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-    … cette section continue…
-
-  <h2>Habitat</h2>
-  <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-    … ce paragraphe continue…
-
-  <h2>Régime</h2>
-
-<h1>Gerbilles de Mongolie</h1>
-
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-  1.2 Régime
-2. Gerbilles de Mongolie
- -

Problèmes résolus par HTML5

- -

Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :

- -
    -
  1. L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut class, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
    2. -
  2. La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.
    3. -
  3. En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.
    4. -
  4. Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.
    5. -
- -

Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.

- -

L'algorithme Outline HTML5

- -
-

Important : Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme Outline ne devrait donc pas être utilisé pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le rang des titres (h1-h6) pour transmettre la structure d'un document.

-
- -

Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.

- -

Définir des sections en HTML5

- -

Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

- -
-

Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition des sections en HTML5

-
- -

Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :

- -
<section>
-
-  <h1>éléphants de forêt</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
-  </section>
-
-  <aside>
-    <p>bloc publicitaire</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 La société Exemple</p>
-</footer>
-
- -

Cela conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
-  1.3 Section (aside)
- -

Définition des en-têtes en HTML5

- -

Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.

- -

Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé et {{HTMLElement ("h6")}} a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…</p>
-
-  <section>
-    <h2>Habitat</h2>
-
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       Ce paragraphe continue…</p>
-  </section>
-</section>
-
-<section>
-  <h3>Gerbilles de Mongolie</h3>
-
-  <p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-2. Gerbilles de Mongolie
- -

Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.

- -

Découpage implicite

- -

Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.

- -

Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h3 class="implicit subsection">Habitat</h3>
-
-  <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
-     Ce paragraphe continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat (implicitement défini par l'élément h3)
- -

Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :

- -
<section>
-  <h1>Éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h1 class="implicit section">Gerbilles de Mongolie</h1>
-
-  <p>Les gerbilles de Mongolie sont mignons petits mammifères.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
- -

Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :

- -
<body>
-  <h1>Mammifères</h1>
-
-  <h2>Baleines</h2>
-
-  <p>Dans cette section, nous discutons de baleines géantes.
-     Cette section continue…
-
-  <section>
-    <h3>Éléphants de forêt</h3>
-
-    <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-       Cette section continue…
-
-    <h3>Gerbilles de Mongolie</h3>
-
-    <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
-       Ce paragraphe continue…
-
-    <h2>Reptiles</h2>
-
-    <p>Reptiles sont des animaux à sang froid.
-       Ce paragraphe continue…
-  </section>
-</body>
- -

conduit à la structure suivante :

- -
1. Mammifères
-  1.1 Baleines (défini implicitement par l'élément h2)
-  1.2 éléphants de forêt (défini explicitement par l'élément section)
-  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
-2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
-
- -

Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.

- -

Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.

- -

Racines de sectionnement

- -

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.

- -

Exemple

- -
<section>
-  <h1>Éléphants de forêt</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
-    <blockquote>
-      <h1>Bornéo</h1>
-      <p>L'éléphant de la forêt vie à Bornéo…</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Cet exemple se traduit par la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
- -

Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.

- -

Les sections externes à la structure

- -

HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :

- -
    -
  1. L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.
    2. -
  2. L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.
    3. -
- -

Headers and Footers

- -

HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :

- -
    -
  1. L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.
    2. -
  2. L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
    3. -
- -

Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.

- -

Adresses dans les éléments de sectionnement

- -

L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.

- -

Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.

- -

Utilisation des éléments HTML5 dans les navigateurs Non-HTML5

- -

Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:

- -
section, article, aside, footer, header, nav, hgroup {
-  display: block;
-}
- -

Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.

- -

Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :

- -
<!--[if lt IE 9]>;
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-<![endif]-->
- -

Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :

- -
<noscript>
-  <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-  <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p>
-  <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-  <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-</noscript>
- -

Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement ("time");
-  </script>
-<![endif]-->
-  <noscript>
-    <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-    <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p>
-    <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-    <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-  </noscript>
-
- -
-

Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.

-
- -

Conclusion

- -

Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 88ecf88204..f7c5625905 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2570,7 +2570,7 @@ /ja/docs/HTML/Inline_elements /ja/docs/Web/HTML/Inline_elements /ja/docs/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/ja/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ja/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/HTML/Supported_media_formats /ja/docs/Web/Media/Formats /ja/docs/HTML/Using_HTML5_audio_and_video /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /ja/docs/HTML/属性 /ja/docs/Web/HTML/Attributes @@ -3517,7 +3517,7 @@ /ja/docs/SVG_in_Firefox_1.5 /ja/docs/conflicting/Web/SVG/SVG_1.1_Support_in_Firefox /ja/docs/Same_origin_policy_for_JavaScript /ja/docs/Web/Security/Same-origin_policy /ja/docs/Scripting_Java /ja/docs/Rhino/Scripting_Java -/ja/docs/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ja/docs/Sections_and_Outlines_of_an_HTML5_document /ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/Security/CSP /ja/docs/Web/HTTP/CSP /ja/docs/Security/CSP/CSP_policy_directives /ja/docs/Web/HTTP/Headers/Content-Security-Policy /ja/docs/Security/CSP/Default_CSP_restrictions /ja/docs/Web/HTTP/Headers/Content-Security-Policy @@ -4623,6 +4623,7 @@ /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid /ja/docs/conflicting/Learn/HTML/Introduction_to_HTML +/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/Web/Guide/Localizations_and_character_encodings /ja/docs/orphaned/Web/Guide/Localizations_and_character_encodings /ja/docs/Web/Guide/Performance/Using_web_workers /ja/docs/Web/API/Web_Workers_API/Using_web_workers /ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API /ja/docs/Web/API/Page_Visibility_API @@ -4737,7 +4738,7 @@ /ja/docs/Web/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /ja/docs/Glossary/speculative_parsing /ja/docs/Web/HTML/Preloading_content /ja/docs/orphaned/Web/HTML/Preloading_content -/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/Web/HTML/Supported_media_formats /ja/docs/Web/Media/Formats /ja/docs/Web/HTML/Using_HTML5_audio_and_video /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /ja/docs/Web/HTML/属性 /ja/docs/Web/HTML/Attributes diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 84a2a0691a..98b7f610ec 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -33852,25 +33852,6 @@ "maripo" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2020-08-09T13:53:14.893Z", - "contributors": [ - "mfuji09", - "taku-furuta", - "miyah-kun", - "8845musign", - "michi-h0623", - "SphinxKnight", - "webooker", - "yyss", - "ethertank", - "teoli", - "DavidWalsh", - "Potappo", - "saneyuki_s", - "kj" - ] - }, "Web/Guide/HTML/XHTML": { "modified": "2020-05-04T01:56:10.076Z", "contributors": [ @@ -52640,6 +52621,25 @@ "Potappo" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-08-09T13:53:14.893Z", + "contributors": [ + "mfuji09", + "taku-furuta", + "miyah-kun", + "8845musign", + "michi-h0623", + "SphinxKnight", + "webooker", + "yyss", + "ethertank", + "teoli", + "DavidWalsh", + "Potappo", + "saneyuki_s", + "kj" + ] + }, "orphaned/Web/Guide/Localizations_and_character_encodings": { "modified": "2020-09-18T02:40:01.125Z", "contributors": [ diff --git a/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..ec0d09a45e --- /dev/null +++ b/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,288 @@ +--- +title: HTML のセクションとアウトラインの使用 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

+
+ +

HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。

+ +

意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素だけがあり、意味づけが限られていましたが、これらの要素は、これを強化するためのものです。例えば、 <div class="navigation"> はブラウザーにその内容についての意味を何も示唆しません。 HTML ソースを読む人間だけが、 navigation のようなクラスの意味を判断することができます。それに対して、 <nav> 区分化要素は、含まれているコンテンツをブラウザーやその他の端末により明確に説明します。リンクやその他のナビゲーション構造は、ユーザーがサイトやページのコンテンツのどこにいるかを理解して移動するのに役立ちます。

+ +

HTML5 には新しい意味づけする要素が追加され、コンテンツの意味的な領域においてウェブサイトの区分化を進化・明確化することができるようになりました。開発者は、これらの意味づけ要素を意図した目的に沿って使用することが重要です。多くのアクセシビリティツールや一部のブラウザーが提供しているリーダービューは、意味づけされた区分化要素に依存しています。そのため、既存の <div> 要素群を、一括での <section> 要素群に入れ替えてはいけません。

+ +

HTML5 の区分化要素

+ + + +

区分化に使用されるその他の意味づけする HTML 要素

+ + + +

区分化要素はどのように機能するのか

+ +
 <body>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#">link</a></li>
+          <li><a href="#">link</a></li>
+          <li><a href="#">link</a></li>
+        </ul>
+      </nav>
+      <h1>
+        Page Title
+      </h1>
+    </header>
+
+    <section>
+      <h2>
+        My Blog Posts
+      </h2>
+      <article>
+        <header>
+          <p>
+            Article Title
+          </p>
+        </header>
+        <p>
+          content
+        </p>
+      </article>
+      <article>
+        <header>
+          <p>
+            Article Title
+          </p>
+        </header>
+        <p>
+          content
+        </p>
+      </article>
+      <aside>
+        <p>
+          Author info
+        </p>
+      </aside>
+    </section>
+
+    <footer>
+      Copyright Info
+    </footer>
+  </body>
+ + + +

<nav> はナビゲーションブロックを示し、主要なナビゲーションメニューに使用してください。

+ +
<nav>
+  <ul>
+    <li><a href="#">link</a></li>
+    <li><a href="#">link</a></li>
+  </ul>
+</nav>
+ +

入れ子になったメニュー

+ +

<nav> 要素は入れ子にしてはいけません。 <nav> には、主要なメニューと従属的なメニューの両方を含めることができます。

+ +
<nav>
+  <ul>
+    <li><a href="#">primary link</a></li>
+    <li>
+      <a href="#">primary link</a>
+      <ul>
+        <li><a href="#">secondary link</a></li>
+        <li><a href="#">secondary link</a></li>
+      </ul>
+    </li>
+    <li><a href="#">primary link</a></li>
+  </ul>
+</nav>
+ + + +

<nav> 要素は、サイトのナビゲーションメニューにのみ使用します。ソーシャルメディアのプロフィールまたはブログロールなどのリンク集は、 <nav> 要素で囲むべきではありません。

+ +

<nav> 内の HTML 要素

+ +

リスト要素はナビゲーションでよく使われますが、必須というわけではありません。<p> などの他の要素を使用することができます。

+ +

article 要素

+ +

<article> 要素は自己完結型のコンテンツを示します。つまり、<article> 要素を除く他のすべての HTML を削除しても、そのコンテンツが読者にとって意味を持つものです。

+ +
<article>
+  <h1>How to Become an MDN Contributor</h1>
+  <p>
+    Do you want to help protect the web?....
+  </p>
+</article>
+ +

article 内で入れ子になった要素

+ +

<article> 要素は header, aside, footer などの他の意味づけ要素を持つことができます。これは、要素のクラスプロパティに CSS セレクターを追加して文書のスタイルを設定する場合に便利です。

+ +
<article>
+  <header>
+    <h1>How to Become an MDN Contributor</h1>
+  </header>
+  <p>
+    Do you want to help protect the web?....
+  </p>
+  <aside>
+    <blockquote>
+      Amazing quote from article
+    </blockquote>
+  </aside>
+  <footer>
+    <p>
+      Author info, publication date
+    </p>
+  </footer>
+</article>
+ +

article と section の入れ子

+ +

article は section の中に含むことができ、 section は article の中に含むことができます。本に例えると、関連する記事でセクションに分割することができます。これらの article はどちらも関連する情報の section を含むことができます。

+ +
<section>
+  <h1>Getting Involved</h1>
+  <article>
+    <header>
+      <h2>How to Become an MDN Contributor</h2>
+      <p>Do you want to help protect the web?....</p>
+    </header>
+    <section>
+      <h3>Steps to Editing an Article</h3>
+    </section>
+    <footer>
+      <p>Author info</p>
+      <p>publication date</p>
+    </footer>
+  </article>
+</section>
+ +

section 要素

+ +

section 要素は、テーマによるコンテンツのグループ化のために使用されます。 W3C の仕様ふまえ、通常はセクションには見出しを含めるべきです。見出しに <header> 要素の使用が必須というわけではありません。

+ +
<section>
+  <h1>Amazing MDN Contributors</h1>
+    <ul>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+    </ul>
+</section>
+ +

aside 要素

+ +

<aside> 要素は、メインコンテンツとは別に配置される関連コンテンツを定義します。しばしばコールアウト、引用ブロック、定義などに使用されます。 <aside> 要素は、追加だが関連性のある情報を含む補足情報によく使用されます。

+ +
<section>
+  <h1>Amazing MDN Contributors</h1>
+    <ul>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+    </ul>
+    <aside>
+     <p>To get involved contact</p>
+    </aside>
+</section>
+ +

aside 要素の入れ子

+ +

<aside> 要素は、他の区分化 HTML 要素の内部に配置できます。 <aside> の内部に <aside> を含めることはできません。コールアウトボックスの中にコールアウトボックスを持たないということを意味します。

+ +

HTML5 非対応ブラウザーでの HTML5 要素の利用

+ +

セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。

+ +

HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で display: inline としてスタイル付けされるため、これらには display: block と設定したいところです。

+ +
article, aside, footer, header, nav, section {
+  display: block;
+}
+
+ +

もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 {{HTMLElement("time")}} 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。

+ +

さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+
+ +

最後の予防措置として、 {{HTMLElement("noscript")}} 要素を {{HTMLElement("head")}} 要素内に明示的に追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。

+ +
<noscript>
+  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
+  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
+    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
+  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
+</noscript>
+
+ +

まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+<noscript>
+  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
+  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
+    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
+  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
+</noscript>
+
+ +
+

注: このコードは HTML validator ではエラーが発生します。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。

+
+ +

まとめ

+ +

HTML5 で導入された新しい意味づけ要素により、標準的な方法でウェブ文書の構造を記述することができるようになります。これらの要素は、 HTML5 ブラウザーを持っていて、ページを理解するのに役立つ構造を必要としている人、例えば、何らかの支援技術の助けを必要としている人に大きな利点をもたらします。これらの新しい意味づけ要素は使用が簡単で、負担がほとんどなく、 HTML5 に非対応のブラウザーでも動作するようにすることができます。したがって、それらは制限なく使用されるべきです。

diff --git a/files/ja/web/guide/html/using_html_sections_and_outlines/index.html b/files/ja/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 90e68e7b77..0000000000 --- a/files/ja/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: HTML のセクションとアウトラインの使用 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - Advanced - - Example - - Guide - - HTML - - HTML5 - - Outlines - - Overview - - Sections - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
{{HTMLSidebar}}
- -
-

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

-
- -

HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。

- -

意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素だけがあり、意味づけが限られていましたが、これらの要素は、これを強化するためのものです。例えば、 <div class="navigation"> はブラウザーにその内容についての意味を何も示唆しません。 HTML ソースを読む人間だけが、 navigation のようなクラスの意味を判断することができます。それに対して、 <nav> 区分化要素は、含まれているコンテンツをブラウザーやその他の端末により明確に説明します。リンクやその他のナビゲーション構造は、ユーザーがサイトやページのコンテンツのどこにいるかを理解して移動するのに役立ちます。

- -

HTML5 には新しい意味づけする要素が追加され、コンテンツの意味的な領域においてウェブサイトの区分化を進化・明確化することができるようになりました。開発者は、これらの意味づけ要素を意図した目的に沿って使用することが重要です。多くのアクセシビリティツールや一部のブラウザーが提供しているリーダービューは、意味づけされた区分化要素に依存しています。そのため、既存の <div> 要素群を、一括での <section> 要素群に入れ替えてはいけません。

- -

HTML5 の区分化要素

- - - -

区分化に使用されるその他の意味づけする HTML 要素

- - - -

区分化要素はどのように機能するのか

- -
 <body>
-    <header>
-      <nav>
-        <ul>
-          <li><a href="#">link</a></li>
-          <li><a href="#">link</a></li>
-          <li><a href="#">link</a></li>
-        </ul>
-      </nav>
-      <h1>
-        Page Title
-      </h1>
-    </header>
-
-    <section>
-      <h2>
-        My Blog Posts
-      </h2>
-      <article>
-        <header>
-          <p>
-            Article Title
-          </p>
-        </header>
-        <p>
-          content
-        </p>
-      </article>
-      <article>
-        <header>
-          <p>
-            Article Title
-          </p>
-        </header>
-        <p>
-          content
-        </p>
-      </article>
-      <aside>
-        <p>
-          Author info
-        </p>
-      </aside>
-    </section>
-
-    <footer>
-      Copyright Info
-    </footer>
-  </body>
- - - -

<nav> はナビゲーションブロックを示し、主要なナビゲーションメニューに使用してください。

- -
<nav>
-  <ul>
-    <li><a href="#">link</a></li>
-    <li><a href="#">link</a></li>
-  </ul>
-</nav>
- -

入れ子になったメニュー

- -

<nav> 要素は入れ子にしてはいけません。 <nav> には、主要なメニューと従属的なメニューの両方を含めることができます。

- -
<nav>
-  <ul>
-    <li><a href="#">primary link</a></li>
-    <li>
-      <a href="#">primary link</a>
-      <ul>
-        <li><a href="#">secondary link</a></li>
-        <li><a href="#">secondary link</a></li>
-      </ul>
-    </li>
-    <li><a href="#">primary link</a></li>
-  </ul>
-</nav>
- - - -

<nav> 要素は、サイトのナビゲーションメニューにのみ使用します。ソーシャルメディアのプロフィールまたはブログロールなどのリンク集は、 <nav> 要素で囲むべきではありません。

- -

<nav> 内の HTML 要素

- -

リスト要素はナビゲーションでよく使われますが、必須というわけではありません。<p> などの他の要素を使用することができます。

- -

article 要素

- -

<article> 要素は自己完結型のコンテンツを示します。つまり、<article> 要素を除く他のすべての HTML を削除しても、そのコンテンツが読者にとって意味を持つものです。

- -
<article>
-  <h1>How to Become an MDN Contributor</h1>
-  <p>
-    Do you want to help protect the web?....
-  </p>
-</article>
- -

article 内で入れ子になった要素

- -

<article> 要素は header, aside, footer などの他の意味づけ要素を持つことができます。これは、要素のクラスプロパティに CSS セレクターを追加して文書のスタイルを設定する場合に便利です。

- -
<article>
-  <header>
-    <h1>How to Become an MDN Contributor</h1>
-  </header>
-  <p>
-    Do you want to help protect the web?....
-  </p>
-  <aside>
-    <blockquote>
-      Amazing quote from article
-    </blockquote>
-  </aside>
-  <footer>
-    <p>
-      Author info, publication date
-    </p>
-  </footer>
-</article>
- -

article と section の入れ子

- -

article は section の中に含むことができ、 section は article の中に含むことができます。本に例えると、関連する記事でセクションに分割することができます。これらの article はどちらも関連する情報の section を含むことができます。

- -
<section>
-  <h1>Getting Involved</h1>
-  <article>
-    <header>
-      <h2>How to Become an MDN Contributor</h2>
-      <p>Do you want to help protect the web?....</p>
-    </header>
-    <section>
-      <h3>Steps to Editing an Article</h3>
-    </section>
-    <footer>
-      <p>Author info</p>
-      <p>publication date</p>
-    </footer>
-  </article>
-</section>
- -

section 要素

- -

section 要素は、テーマによるコンテンツのグループ化のために使用されます。 W3C の仕様ふまえ、通常はセクションには見出しを含めるべきです。見出しに <header> 要素の使用が必須というわけではありません。

- -
<section>
-  <h1>Amazing MDN Contributors</h1>
-    <ul>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-    </ul>
-</section>
- -

aside 要素

- -

<aside> 要素は、メインコンテンツとは別に配置される関連コンテンツを定義します。しばしばコールアウト、引用ブロック、定義などに使用されます。 <aside> 要素は、追加だが関連性のある情報を含む補足情報によく使用されます。

- -
<section>
-  <h1>Amazing MDN Contributors</h1>
-    <ul>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-    </ul>
-    <aside>
-     <p>To get involved contact</p>
-    </aside>
-</section>
- -

aside 要素の入れ子

- -

<aside> 要素は、他の区分化 HTML 要素の内部に配置できます。 <aside> の内部に <aside> を含めることはできません。コールアウトボックスの中にコールアウトボックスを持たないということを意味します。

- -

HTML5 非対応ブラウザーでの HTML5 要素の利用

- -

セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。

- -

HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で display: inline としてスタイル付けされるため、これらには display: block と設定したいところです。

- -
article, aside, footer, header, nav, section {
-  display: block;
-}
-
- -

もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 {{HTMLElement("time")}} 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。

- -

さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-
- -

最後の予防措置として、 {{HTMLElement("noscript")}} 要素を {{HTMLElement("head")}} 要素内に明示的に追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。

- -
<noscript>
-  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
-  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
-    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
-  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
-</noscript>
-
- -

まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-<noscript>
-  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
-  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
-    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
-  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
-</noscript>
-
- -
-

注: このコードは HTML validator ではエラーが発生します。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。

-
- -

まとめ

- -

HTML5 で導入された新しい意味づけ要素により、標準的な方法でウェブ文書の構造を記述することができるようになります。これらの要素は、 HTML5 ブラウザーを持っていて、ページを理解するのに役立つ構造を必要としている人、例えば、何らかの支援技術の助けを必要としている人に大きな利点をもたらします。これらの新しい意味づけ要素は使用が簡単で、負担がほとんどなく、 HTML5 に非対応のブラウザーでも動作するようにすることができます。したがって、それらは制限なく使用されるべきです。

diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 5cb2285f1b..7c69785a90 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -787,6 +787,7 @@ /ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content /ko/docs/Web/Guide/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories /ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/Forms /ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form @@ -826,7 +827,7 @@ /ko/docs/Web/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/Web/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element /ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML /ko/docs/Web/HTML/Preloading_content /ko/docs/orphaned/Web/HTML/Preloading_content diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 4322628e68..79e6b966f8 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -10101,17 +10101,6 @@ "gblue1223" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2020-01-10T12:08:26.959Z", - "contributors": [ - "alattalatta", - "sudo0272", - "Kaben", - "bombinari", - "naduhy2", - "miname" - ] - }, "Web/Guide/Index": { "modified": "2020-12-07T13:40:57.143Z", "contributors": [ @@ -18443,6 +18432,17 @@ "Channy" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-01-10T12:08:26.959Z", + "contributors": [ + "alattalatta", + "sudo0272", + "Kaben", + "bombinari", + "naduhy2", + "miname" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2020-10-15T21:44:01.823Z", "contributors": [ diff --git a/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..37bebc6df3 --- /dev/null +++ b/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,368 @@ +--- +title: HTML 구획과 개요 사용하기 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 안됩니다. 문서 작성자는 대신 제목 순위(h1-h6)를 사용해 문서 구조를 나타내는 것이 좋습니다.

+
+ +

HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.

+ +

예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.

+ +

새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.

+ +

HTML4에서의 문서 구조

+ +

문서의 구조, 즉 <body>와 </body> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다. HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.

+ +

그래서 다음과 같은 마크업은:

+ +
<div class="section" id="forest-elephants">
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+  ...섹션 내용 진행 중...
+  <div class="subsection" id="forest-habitat">
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+  </div>
+</div>
+ +

다음과 같은 문서 아웃라인을 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+
+ +

새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,

+ +
<h1>둥근귀코끼리</h1>
+<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+...섹션 내용 진행 중...
+<h2>서식지</h2>
+<p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+...하위 섹션 내용 진행 중...
+<h2>먹이</h2>
+<h1>몽골 게르빌루스쥐</h1>
+ +

앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+   1.2 먹이
+2. 몽골 게르빌루스쥐
+
+ +

HTML5에서 해결한 문제들

+ +

HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:

+ +
    +
  1. 의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 class 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 것은 불가능합니다("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 보조 장비에 사용되는 기술에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.
    2. +
  2. 여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.
    3. +
  3. HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.
    4. +
  4. 반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.
    5. +
+ +

좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.

+ +

HTML5 문서 아웃라인 알고리즘

+ +

HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.

+ +

HTML5에서의 섹션 정의

+ +

우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.

+ +
각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. HTML5에서 제목 지정하는 법을 보십시오.
+ +

보기:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2013 회사 이름</p>
+</footer>
+ +

위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2013 회사 이름?</p>
+</footer>
+ +

첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2013 회사 이름</p>
+</footer>
+ +

그래서 다음과 같은 구조를 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 소개
+   1.2 서식지
+   1.3 광고 구역 (aside)
+
+ +

HTML5에서 제목 지정하는 법

+ +

비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.

+ +

제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데, {{HTMLElement("h1")}}이 최상위 계급이며 {{HTMLElement("h6")}}는 최하위 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+  <section>
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...계속 된 하위 섹션 내용...
+  </section>
+</section>
+<section>
+  <h3>몽골 게르빌루스쥐</h3>
+  <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+</section>
+ +

이는 다음과 같은 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+2. 몽골 게르빌루스쥐
+ +

여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)

+ +

은연중 자동으로 정의되는 섹션

+ +

HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 절대적으로 필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 은연중 자동으로 정의되는 섹션이라 하겠습니다.

+ +

HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <h3 class="implicit subsection">서식지</h3>
+  <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+</section>
+ +

이는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지 (h3 요소에 의해 은연중 자동으로 정의됨)
+
+ +

만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <h1 class="implicit section">몽골 게르빌루스쥐</h1>
+  <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
+    ...섹션 내용 진행 중...
+</section>
+ +

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+
+ +

만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

+ +
<body>
+  <h1>포유 동물</h1>
+  <h2>고래</h2>
+  <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <section>
+    <h3>둥근귀코끼리</h3>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+      ...섹션 내용 진행 중...
+    <h3>몽골 게르빌루스쥐</h3>
+      <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
+         ...하위 섹션 내용 진행 중...
+    <h2>파충류</h2>
+      <p>파충류는 냉혈 동물입니다.
+          ...하위 섹션 내용 진행 중...
+  </section>
+</body>
+ +

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 포유 동물
+   1.1 고래 (h2 요소에 의해 자동으로 정의됨)
+   1.2 둥근귀코끼리 (섹션 요소에 의해 명시적으로 정의됨)
+   1.3 몽골 게르빌루스쥐 (h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+2. 파충류 (h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+ +

단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 브라우저가 원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.

+ +

제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.

+ +

섹션 구분의 근원점

+ +

섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.

+ +

보기:

+ +
<section>
+  <h1>숲 코끼리</h1>
+  <section>
+    <h2>소개</h2>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+      과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p>
+    <blockquote>
+       <h1>보르네오 섬</h1>
+       <p>보르네오 섬에 서식하는 둥근귀코끼리...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:

+ +
1. 숲 코끼리
+   1.1 소개
+   1.2 서식지
+ +

이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.

+ +

문서의 아웃라인 밖에 존재하는 섹션

+ +

HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:

+ +
    +
  1. HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
    2. +
  2. HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
    3. +
  3. HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
    4. +
  4. HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.
    5. +
+ +

섹션을 구분짓는 요소의 주소와 발행 시간

+ +

문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.

+ +

가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.

+ +

비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.

+ +

HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법

+ +

섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 display:inline 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.

+ +
그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:
+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:

+ +
<noscript>
+   <strong>주의 !</strong>
+   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+</noscript>
+ +

그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>주의 !</strong>
+     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+   </noscript>
+<![endif]-->
+
+ +

맺음말

+ +

HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.

diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 2927a70a19..0000000000 --- a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: HTML 구획과 개요 사용하기 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/HTML/HTML5_문서의_섹션과_윤곽 ---- -
{{HTMLSidebar}}
- -
-

중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 안됩니다. 문서 작성자는 대신 제목 순위(h1-h6)를 사용해 문서 구조를 나타내는 것이 좋습니다.

-
- -

HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.

- -

예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.

- -

새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.

- -

HTML4에서의 문서 구조

- -

문서의 구조, 즉 <body>와 </body> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다. HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.

- -

그래서 다음과 같은 마크업은:

- -
<div class="section" id="forest-elephants">
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-  ...섹션 내용 진행 중...
-  <div class="subsection" id="forest-habitat">
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-  </div>
-</div>
- -

다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-
- -

새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,

- -
<h1>둥근귀코끼리</h1>
-<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-...섹션 내용 진행 중...
-<h2>서식지</h2>
-<p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-...하위 섹션 내용 진행 중...
-<h2>먹이</h2>
-<h1>몽골 게르빌루스쥐</h1>
- -

앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-   1.2 먹이
-2. 몽골 게르빌루스쥐
-
- -

HTML5에서 해결한 문제들

- -

HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:

- -
    -
  1. 의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 class 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 것은 불가능합니다("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 보조 장비에 사용되는 기술에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.
    2. -
  2. 여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.
    3. -
  3. HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.
    4. -
  4. 반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.
    5. -
- -

좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.

- -

HTML5 문서 아웃라인 알고리즘

- -

HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.

- -

HTML5에서의 섹션 정의

- -

우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.

- -
각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. HTML5에서 제목 지정하는 법을 보십시오.
- -

보기:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2013 회사 이름</p>
-</footer>
- -

위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2013 회사 이름?</p>
-</footer>
- -

첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2013 회사 이름</p>
-</footer>
- -

그래서 다음과 같은 구조를 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 소개
-   1.2 서식지
-   1.3 광고 구역 (aside)
-
- -

HTML5에서 제목 지정하는 법

- -

비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.

- -

제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데, {{HTMLElement("h1")}}이 최상위 계급이며 {{HTMLElement("h6")}}는 최하위 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...계속 된 하위 섹션 내용...
-  </section>
-</section>
-<section>
-  <h3>몽골 게르빌루스쥐</h3>
-  <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-</section>
- -

이는 다음과 같은 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-2. 몽골 게르빌루스쥐
- -

여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)

- -

은연중 자동으로 정의되는 섹션

- -

HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 절대적으로 필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 은연중 자동으로 정의되는 섹션이라 하겠습니다.

- -

HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h3 class="implicit subsection">서식지</h3>
-  <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-</section>
- -

이는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지 (h3 요소에 의해 은연중 자동으로 정의됨)
-
- -

만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h1 class="implicit section">몽골 게르빌루스쥐</h1>
-  <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
-    ...섹션 내용 진행 중...
-</section>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-
- -

만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<body>
-  <h1>포유 동물</h1>
-  <h2>고래</h2>
-  <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <section>
-    <h3>둥근귀코끼리</h3>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-      ...섹션 내용 진행 중...
-    <h3>몽골 게르빌루스쥐</h3>
-      <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
-         ...하위 섹션 내용 진행 중...
-    <h2>파충류</h2>
-      <p>파충류는 냉혈 동물입니다.
-          ...하위 섹션 내용 진행 중...
-  </section>
-</body>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 포유 동물
-   1.1 고래 (h2 요소에 의해 자동으로 정의됨)
-   1.2 둥근귀코끼리 (섹션 요소에 의해 명시적으로 정의됨)
-   1.3 몽골 게르빌루스쥐 (h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-2. 파충류 (h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
- -

단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 브라우저가 원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.

- -

제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.

- -

섹션 구분의 근원점

- -

섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.

- -

보기:

- -
<section>
-  <h1>숲 코끼리</h1>
-  <section>
-    <h2>소개</h2>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-      과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p>
-    <blockquote>
-       <h1>보르네오 섬</h1>
-       <p>보르네오 섬에 서식하는 둥근귀코끼리...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 숲 코끼리
-   1.1 소개
-   1.2 서식지
- -

이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.

- -

문서의 아웃라인 밖에 존재하는 섹션

- -

HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:

- -
    -
  1. HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
    2. -
  2. HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
    3. -
  3. HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
    4. -
  4. HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.
    5. -
- -

섹션을 구분짓는 요소의 주소와 발행 시간

- -

문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.

- -

가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.

- -

비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.

- -

HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법

- -

섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 display:inline 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.

- -
그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:
- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:

- -
<noscript>
-   <strong>주의 !</strong>
-   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-</noscript>
- -

그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>주의 !</strong>
-     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-   </noscript>
-<![endif]-->
-
- -

맺음말

- -

HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.

diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 6b19fa7931..611c9f76d8 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -494,9 +494,9 @@ /pt-BR/docs/SVG/Element/desc /pt-BR/docs/Web/SVG/Element/desc /pt-BR/docs/SVG/Element/svg /pt-BR/docs/Web/SVG/Element/svg /pt-BR/docs/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text -/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document /pt-BR/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Security/CSP/Utilizando_Politicas_De_Seguranca_De_Conteudo /pt-BR/docs/Web/HTTP/CSP -/pt-BR/docs/Seções_e_estrutura_HTML5 /pt-BR/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/pt-BR/docs/Seções_e_estrutura_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example /pt-BR/docs/Tools/Add-ons /pt-BR/docs/orphaned/Tools/Add-ons @@ -764,6 +764,7 @@ /pt-BR/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /pt-BR/docs/Learn/Forms/Sending_and_retrieving_form_data /pt-BR/docs/Web/Guide/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/pt-BR/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Web/Guide/HTML/Using_data_attributes /pt-BR/docs/Learn/HTML/Howto/Use_data_attributes /pt-BR/docs/Web/Guide/Introducao_ao_Desenvolvimento_Web /pt-BR/docs/Web/Guide/Introduction_to_Web_development /pt-BR/docs/Web/HTML/CORS_imagens_habilitadas /pt-BR/docs/Web/HTML/CORS_enabled_image diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 357b8546a5..04b869e518 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -9196,23 +9196,6 @@ "fellyph" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2020-10-07T01:45:20.737Z", - "contributors": [ - "leandroembu", - "Lucas_Inacio", - "davimdantas", - "SaggitariusA", - "webennes", - "edercampelo", - "IgorGoncalves", - "dann", - "netoguimaraes", - "Stutz.D", - "eduardodx", - "AluisioASG" - ] - }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-07-28T16:57:13.368Z", "contributors": [ @@ -17247,6 +17230,23 @@ "eduardodx" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-10-07T01:45:20.737Z", + "contributors": [ + "leandroembu", + "Lucas_Inacio", + "davimdantas", + "SaggitariusA", + "webennes", + "edercampelo", + "IgorGoncalves", + "dann", + "netoguimaraes", + "Stutz.D", + "eduardodx", + "AluisioASG" + ] + }, "orphaned/Web/HTML/Element/command": { "modified": "2019-03-23T23:38:57.259Z", "contributors": [ diff --git a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..09144f9ce4 --- /dev/null +++ b/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,411 @@ +--- +title: Seções e estrutura de um documento HTML5 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

+
+ +

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

+ +

Estrutura de um documento em HTML4

+ +

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

+ +

Então a seguinte marcação:

+ +
<div class="section" id="elefantes-da-floresta" >
+<h1>Elefantes da floresta</h1>
+<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
+...esta seção continua...
+<div class="subsection" id="floresta-habitat">
+<h2>Habitat</h2>
+<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
+...esta subseção continua...
+</div>
+</div>
+
+ +

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

+ +
1. Elefantes da floresta
+   1.1 Habitat
+
+ +

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

+ +
<h1>Elefantes da floresta</h1>
+<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
+...esta seção continua...
+<h2>Habitat</h2>
+<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
+...esta subseção continua...
+<h2>Dieta</h2>
+<h1>Esquilo da mongólia</h1>
+
+ +

leva à:

+ +
1. Elefantes da floresta
+   1.1 Habitat
+   1.2 Dieta
+2. Esquilo da mongólia
+
+ +

Problemas resolvidos pelo HTML5

+ +

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

+ +
    +
  1. O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. 
    2. +
  2. Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
    3. +
  3. No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. +
  4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.
    5. +
+ +

+ +

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

+ +

The HTML5 Outline Algorithm

+ +

Definindo seções em HTML5

+ +

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. 

+ +
Nota: Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja Definindo cabeçalhos com HTML5.
+ +

Exemplo:

+ +
<section>
+  <h1>Elefantes da floresta</h1>
+  <section>
+    <h1>Introdução</h1>
+    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
+  </section>
+  <aside>
+    <p>Bloco publicitário</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 O Exemplo de empresa</p>
+</footer>
+
+ +

Esse snippet HTML define duas seções de nível superior:

+ +
 <section>
+  <h1> Elefantes da floresta </h1>
+  <section>
+    <h1> Introdução </h1>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
+  </section>
+  <section>
+    <h1> Habitat </h1>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
+  </section>
+  <aside>
+    <p> bloco de publicidade</p>
+  </aside>
+</section>
+<footer>
+  <p> (c) 2010 A empresa exemplo</p>
+</footer>
+ +

A primeira seção possui três subseções:

+ +
<section>
+   <h1>Forest elephants</h1>
+   <section>
+     <h1>Introduction</h1>
+     <p>In this section, we discuss the lesser known forest elephants.
+   </section>
+   <section>
+     <h1>Habitat</h1>
+     <P>Forest elephants do not live in trees but among them.
+   </section>
+   <aside>
+     <p>advertising block
+   </aside>
+ </section>
+ <footer>
+   <p>(c) 2010 The Example company
+ </footer>
+ +

Isso leva à seguinte estrutura:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+
+ +

Definindo cabeçalho com HTML5

+ +

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

+ +

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+     ...this section continues...
+  <section>
+     <h2>Habitat</h2>
+     <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+
+ +

leva ao seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Habitat
+2. Gerbos da Mongólia
+ +

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

+ +

Seção implícita

+ +

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

+ +

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  <h3 class = "subseção implícita"> Habitat </h3>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
+      ... esta subseção continua ...</p>
+</section>
+
+ +

levando ao seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Habitat (definido implicitamente pelo elemento h3)
+
+ +

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
+  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
+    ... esta seção continua ...</p>
+</section>
+
+ +

levando ao seguinte esboço:

+ +
1. Elefantes da floresta
+2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
+
+ +

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

+ +
<body>
+  <h1> Mamíferos </h1>
+  <h2> Baleias </h2>
+  <p> Nesta seção, discutimos as baleias nadadoras.
+    ... esta seção continua ...</p>
+  <section>
+    <h3> Elefantes da floresta </h3>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+      ... esta seção continua ...</p>
+    <h3> Gerbos da Mongólia </h3>
+      <p> Hordas de gerbos se espalharam muito além da Mongólia.
+        ... esta subseção continua ...</p>
+    <h2> Répteis </h2>
+      <p>Répteis são animais com sangue frio.
+        ... esta subseção continua ...</p>
+  </section>
+</body>
+
+ +

levando ao seguinte esboço:

+ +
1. Mamíferos
+   1.1 Baleias (definidos implicitamente pelo elemento h2)
+   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
+   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
+   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
+
+
+ +

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

+ +

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

+ +

Sobrepondo seções implícitas

+ +

 Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

+ + + +

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

+ +
<section>
+  <hgroup>
+    <h1>Justine</h1>
+    <h2>Les Malheurs de la vertu</h2>
+  </hgroup>
+</section>
+
+ +

leads to the following outline:

+ +
1. Justine
+
+ +

Caminhos de seção

+ +

 Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

+ +

Exemplo:

+ +
<section>
+  <h1> Elefantes da floresta </h1>
+  <section>
+    <h2> Introdução </h2>
+    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
+  </section>
+  <section>
+    <h2> Habitat </h2>
+    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
+      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
+    <blockquote>
+      <h1> Bornéu</h1>
+      <p> O elemento florestal vive em Bornéu ...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Este exemplo resulta no seguinte esboço:

+ +
1. Elefantes da floresta
+   1.1 Introdução
+   1.2 Habitat
+
+ +

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

+ +

Seções de fora da estrutura

+ +

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

+ +
    +
  1. O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
    2. +
  2. O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
    3. +
  3. O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
    4. +
  4. O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.
    5. +
+ +

Endereços e horário de publicação nos elementos de seção

+ +

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

+ +

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

+ +

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

+ +

Usando elementos HTML5 em navegadores não-HTML5

+ +

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

+ +

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+
+ +

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

+ +
<noscript>
+  <strong> Aviso! </strong>
+  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
+  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
+</noscript>
+
+ +

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Aviso !</strong>
+     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
+     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
+  </noscript>
+<![endif]--> 
+
+ +

Conclusão

+ +

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

diff --git a/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 2a548d3d84..0000000000 --- a/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Seções e estrutura de um documento HTML5 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Sections_and_Outlines_of_an_HTML5_document ---- -
-

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

-
- -

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

- -

Estrutura de um documento em HTML4

- -

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

- -

Então a seguinte marcação:

- -
<div class="section" id="elefantes-da-floresta" >
-<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
-...esta seção continua...
-<div class="subsection" id="floresta-habitat">
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-</div>
-</div>
-
- -

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

- -
1. Elefantes da floresta
-   1.1 Habitat
-
- -

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

- -
<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
-...esta seção continua...
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-<h2>Dieta</h2>
-<h1>Esquilo da mongólia</h1>
-
- -

leva à:

- -
1. Elefantes da floresta
-   1.1 Habitat
-   1.2 Dieta
-2. Esquilo da mongólia
-
- -

Problemas resolvidos pelo HTML5

- -

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

- -
    -
  1. O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. 
    2. -
  2. Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
    3. -
  3. No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. -
  4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.
    5. -
- -

- -

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

- -

The HTML5 Outline Algorithm

- -

Definindo seções em HTML5

- -

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. 

- -
Nota: Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja Definindo cabeçalhos com HTML5.
- -

Exemplo:

- -
<section>
-  <h1>Elefantes da floresta</h1>
-  <section>
-    <h1>Introdução</h1>
-    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
-  </section>
-  <aside>
-    <p>Bloco publicitário</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 O Exemplo de empresa</p>
-</footer>
-
- -

Esse snippet HTML define duas seções de nível superior:

- -
 <section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h1> Introdução </h1>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
-  </section>
-  <section>
-    <h1> Habitat </h1>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
-  </section>
-  <aside>
-    <p> bloco de publicidade</p>
-  </aside>
-</section>
-<footer>
-  <p> (c) 2010 A empresa exemplo</p>
-</footer>
- -

A primeira seção possui três subseções:

- -
<section>
-   <h1>Forest elephants</h1>
-   <section>
-     <h1>Introduction</h1>
-     <p>In this section, we discuss the lesser known forest elephants.
-   </section>
-   <section>
-     <h1>Habitat</h1>
-     <P>Forest elephants do not live in trees but among them.
-   </section>
-   <aside>
-     <p>advertising block
-   </aside>
- </section>
- <footer>
-   <p>(c) 2010 The Example company
- </footer>
- -

Isso leva à seguinte estrutura:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-   1.3 Section (aside)
-
- -

Definindo cabeçalho com HTML5

- -

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

- -

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-     ...this section continues...
-  <section>
-     <h2>Habitat</h2>
-     <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
-
- -

leva ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat
-2. Gerbos da Mongólia
- -

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

- -

Seção implícita

- -

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

- -

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h3 class = "subseção implícita"> Habitat </h3>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
-      ... esta subseção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat (definido implicitamente pelo elemento h3)
-
- -

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
-  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
-    ... esta seção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
-
- -

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

- -
<body>
-  <h1> Mamíferos </h1>
-  <h2> Baleias </h2>
-  <p> Nesta seção, discutimos as baleias nadadoras.
-    ... esta seção continua ...</p>
-  <section>
-    <h3> Elefantes da floresta </h3>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-      ... esta seção continua ...</p>
-    <h3> Gerbos da Mongólia </h3>
-      <p> Hordas de gerbos se espalharam muito além da Mongólia.
-        ... esta subseção continua ...</p>
-    <h2> Répteis </h2>
-      <p>Répteis são animais com sangue frio.
-        ... esta subseção continua ...</p>
-  </section>
-</body>
-
- -

levando ao seguinte esboço:

- -
1. Mamíferos
-   1.1 Baleias (definidos implicitamente pelo elemento h2)
-   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
-   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
-   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
-
-
- -

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

- -

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

- -

Sobrepondo seções implícitas

- -

 Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

- - - -

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

- -
<section>
-  <hgroup>
-    <h1>Justine</h1>
-    <h2>Les Malheurs de la vertu</h2>
-  </hgroup>
-</section>
-
- -

leads to the following outline:

- -
1. Justine
-
- -

Caminhos de seção

- -

 Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

- -

Exemplo:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h2> Introdução </h2>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
-  </section>
-  <section>
-    <h2> Habitat </h2>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
-      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
-    <blockquote>
-      <h1> Bornéu</h1>
-      <p> O elemento florestal vive em Bornéu ...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Este exemplo resulta no seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Introdução
-   1.2 Habitat
-
- -

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

- -

Seções de fora da estrutura

- -

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

- -
    -
  1. O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
    2. -
  2. O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
    3. -
  3. O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
    4. -
  4. O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.
    5. -
- -

Endereços e horário de publicação nos elementos de seção

- -

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

- -

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Usando elementos HTML5 em navegadores não-HTML5

- -

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

- -

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
-
- -

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

- -
<noscript>
-  <strong> Aviso! </strong>
-  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
-  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
-</noscript>
-
- -

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Aviso !</strong>
-     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
-     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
-  </noscript>
-<![endif]--> 
-
- -

Conclusão

- -

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 045b03513d..fdacc3afd1 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -616,8 +616,9 @@ /ru/docs/Web/Guide/HTML/HTML5/Constraint_validation /ru/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /ru/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ru/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ru/docs/Web/Guide/HTML/Introduction /ru/docs/Learn/HTML/Introduction_to_HTML -/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /ru/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ru/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /ru/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ru/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ru/docs/Web/Guide/HTML/Using_data_attributes /ru/docs/Learn/HTML/Howto/Use_data_attributes /ru/docs/Web/Guide/Localizations_and_character_encodings /ru/docs/orphaned/Web/Guide/Localizations_and_character_encodings /ru/docs/Web/Guide/Графика /ru/docs/Web/Guide/Graphics diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 8282d967ba..fb56fe3e50 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -15338,17 +15338,6 @@ "warsan" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2020-10-09T08:16:53.318Z", - "contributors": [ - "matiasrustagte", - "arka_triymfalnaya", - "outdever", - "Wingear", - "evgor80", - "lerniri" - ] - }, "Web/Guide/Parsing_and_serializing_XML": { "modified": "2020-10-11T12:29:17.772Z", "contributors": [ @@ -25637,6 +25626,17 @@ "Grakov" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-10-09T08:16:53.318Z", + "contributors": [ + "matiasrustagte", + "arka_triymfalnaya", + "outdever", + "Wingear", + "evgor80", + "lerniri" + ] + }, "orphaned/Web/Guide/Localizations_and_character_encodings": { "modified": "2020-12-14T08:44:06.511Z", "contributors": [ diff --git a/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..fc0c5e000f --- /dev/null +++ b/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,374 @@ +--- +title: Использование разделов и создание структуры HTML документа +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - HTML5 + - Веб + - Для опытных разработчиков + - Обзор + - Пример + - Разделы + - Руководство + - Структура +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

+
+ +

Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.

+ +

Структура документа в HTML 4

+ +

Структура документа, т. е. семантическая структура контента, заключённого в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

+ +

Так, следующая разметка:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+     ...продолжение данного подраздела...
+  </div>
+</div>
+
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+
+ +

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

+ +
<h1>Лесные слоны</h1>
+ <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h2>Среда обитания</h2>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+  <h2>Рацион</h2>
+<h1>Монгольская песчанка</h1>
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+   1.2 Рацион
+2. Монгольская песчанка
+
+ +

Какие проблемы решает HTML5

+ +

Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:

+ +
    +
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. +
  2. Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. +
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. +
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. +
+ +

В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.

+ +

Алгоритм создания структуры HTML5

+ +

Задание разделов в HTML5

+ +

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

+ +
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный фрагмент HTML задаёт раздел верхнего уровня:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный раздел имеет три подраздела:

+ +
<section>
+  <h1>Лесные слоны</h1>
+
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

В результате получаем следующую структуру:

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+
+ +

Задание заголовков в HTML5

+ +

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.

+ +

Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+        ...продолжение данного подраздела...
+  </section>
+</section>
+<section>
+  <h3>Монгольская песчанка</h3>
+  <p>В данном разделе мы расскажем о монгольской песчанке.
+     ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+2. Монгольская песчанка
+ +

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

+ +

Неявное задание разделов

+ +

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

+ +

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h3 class="implicit subsection">Среда обитания</h3>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания (неявно задано элементом h3)
+
+ +

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h1 class="implicit section">Монгольская песчанка</h1>
+  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
+    ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
+
+ +

Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:

+ +
<body>
+  <h1>Млекопитающие</h1>
+  <h2>Киты</h2>
+  <p>В данном разделе мы поговорим о китах.
+    ...продолжение данного раздела...
+  <section>
+    <h3>Лесные слоны</h3>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+    <h3>Монгольская песчанка</h3>
+      <p>Песчанки распространились далеко за пределы Монголии.
+         ...продолжение данного подраздела...
+    <h2>Рептилии</h2>
+      <p>Рептилии – это холоднокровные животные.
+          ...продолжение данного раздела...
+  </section>
+</body>
+ +

приводит к следующей структуре:

+ +
1. Млекопитающие
+   1.1 Киты (неявно задаётся элементом h2)
+   1.2 Лесные слоны (явным образом задаётся элементом раздела)
+   1.3 Монгольская песчанка (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
+2. Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)
+
+ +

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

+ +

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

+ +

Корни задания разделов

+ +

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h2>Введение</h2>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
+  </section>
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>
+    <blockquote>
+       <h1>Борнео</h1>
+       <p>Лесной слон живёт на Борнео...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Данный пример приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+ +

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

+ +

Разделы, не входящие в структуру

+ +

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

+ +
    +
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. +
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. +
+ +

Шапки и подвалы

+ +

HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:

+ +
    +
  1. Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. +
  2. Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. +
+ +

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

+ +

Адреса в элементах задания разделов

+ +

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

+ +

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

+ +

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

+ +

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

+ +

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

+ +
<noscript>
+   <strong>Внимание!</strong>
+   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+</noscript>
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Внимание!</strong>
+     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+  </noscript>
+<![endif]-->
+ +

Заключение

+ +

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

diff --git a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 0fa431ef8b..0000000000 --- a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Использование разделов и создание структуры HTML документа -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML5 - - Веб - - Для опытных разработчиков - - Обзор - - Пример - - Разделы - - Руководство - - Структура -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ---- -
-

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

-
- -

Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.

- -

Структура документа в HTML 4

- -

Структура документа, т. е. семантическая структура контента, заключённого в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

- -

Так, следующая разметка:

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-     ...продолжение данного подраздела...
-  </div>
-</div>
-
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-
- -

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

- -
<h1>Лесные слоны</h1>
- <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h2>Среда обитания</h2>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-  <h2>Рацион</h2>
-<h1>Монгольская песчанка</h1>
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-   1.2 Рацион
-2. Монгольская песчанка
-
- -

Какие проблемы решает HTML5

- -

Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:

- -
    -
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. -
  2. Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. -
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. -
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. -
- -

В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.

- -

Алгоритм создания структуры HTML5

- -

Задание разделов в HTML5

- -

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

- -
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
- -

Например:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Данный фрагмент HTML задаёт раздел верхнего уровня:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Данный раздел имеет три подраздела:

- -
<section>
-  <h1>Лесные слоны</h1>
-
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

В результате получаем следующую структуру:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
-
- -

Задание заголовков в HTML5

- -

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.

- -

Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-        ...продолжение данного подраздела...
-  </section>
-</section>
-<section>
-  <h3>Монгольская песчанка</h3>
-  <p>В данном разделе мы расскажем о монгольской песчанке.
-     ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания
-2. Монгольская песчанка
- -

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

- -

Неявное задание разделов

- -

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

- -

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h3 class="implicit subsection">Среда обитания</h3>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания (неявно задано элементом h3)
-
- -

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h1 class="implicit section">Монгольская песчанка</h1>
-  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
-    ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
-
- -

Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:

- -
<body>
-  <h1>Млекопитающие</h1>
-  <h2>Киты</h2>
-  <p>В данном разделе мы поговорим о китах.
-    ...продолжение данного раздела...
-  <section>
-    <h3>Лесные слоны</h3>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-    <h3>Монгольская песчанка</h3>
-      <p>Песчанки распространились далеко за пределы Монголии.
-         ...продолжение данного подраздела...
-    <h2>Рептилии</h2>
-      <p>Рептилии – это холоднокровные животные.
-          ...продолжение данного раздела...
-  </section>
-</body>
- -

приводит к следующей структуре:

- -
1. Млекопитающие
-   1.1 Киты (неявно задаётся элементом h2)
-   1.2 Лесные слоны (явным образом задаётся элементом раздела)
-   1.3 Монгольская песчанка (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
-2. Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)
-
- -

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

- -

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

- -

Корни задания разделов

- -

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

- -

Например:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h2>Введение</h2>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
-  </section>
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>
-    <blockquote>
-       <h1>Борнео</h1>
-       <p>Лесной слон живёт на Борнео...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Данный пример приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
- -

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

- -

Разделы, не входящие в структуру

- -

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

- -
    -
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. -
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. -
- -

Шапки и подвалы

- -

HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:

- -
    -
  1. Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. -
  2. Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. -
- -

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

- -

Адреса в элементах задания разделов

- -

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

- -

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

- -

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

- -

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

- -

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

- -
<noscript>
-   <strong>Внимание!</strong>
-   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
-   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
-</noscript>
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Внимание!</strong>
-     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
-     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
-  </noscript>
-<![endif]-->
- -

Заключение

- -

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 84abaed1cf..7529d156a2 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -2324,9 +2324,10 @@ /zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list /zh-CN/docs/conflicting/Web/HTML/Element /zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/Web/Guide/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML -/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /zh-CN/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video /zh-CN/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/Web/Guide/HTML/Using_data_attributes /zh-CN/docs/Learn/HTML/Howto/Use_data_attributes /zh-CN/docs/Web/Guide/Localizations_and_character_encodings /zh-CN/docs/orphaned/Web/Guide/Localizations_and_character_encodings /zh-CN/docs/Web/Guide/Performance/Using_web_workers /zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 74fdf0490c..ea71e02e73 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -31621,18 +31621,6 @@ "Teago" ] }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2019-03-21T10:38:08.111Z", - "contributors": [ - "RainSlide", - "jimmy-sum", - "VdoG", - "StarXY", - "kevinfszu", - "mengzyou", - "xuexiaocai" - ] - }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-03-24T00:00:33.366Z", "contributors": [ @@ -50536,6 +50524,18 @@ "leegorous" ] }, + "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-21T10:38:08.111Z", + "contributors": [ + "RainSlide", + "jimmy-sum", + "VdoG", + "StarXY", + "kevinfszu", + "mengzyou", + "xuexiaocai" + ] + }, "orphaned/Web/Guide/Localizations_and_character_encodings": { "modified": "2020-05-07T10:52:56.537Z", "contributors": [ diff --git a/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..d4d824142f --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,376 @@ +--- +title: 使用 HTML 章节与大纲 +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - HTML + - HTML5 + - 指南 + - 文档结构 + - 高阶 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

（下方英文原文警告的过时已翻译版本）注意：下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。

+
+ +
+

Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

+
+ +

HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。

+ +

HTML 4 的文档结构

+ +

文档结构，即，<body> 与 </body> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。

+ +

所以下面的片段：

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

形成了如下的大纲：

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

会形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

HTML5 解决的问题

+ +

HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：

+ +
    +
  1.  定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。
    2. +
  2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
    3. +
  3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 
    4. +
  4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。
    5. +
+ +

更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

+ +

HTML5 的大纲算法

+ +

定义节段

+ +

 {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 

+ +
注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有{{HTMLElement("h1")}}. 具体查看 Defining Headings in HTML5.
+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

这个HTML片段定义了两个顶级节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

第一个节段有三个子节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

上面的片段形成了如下的大纲:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+
+ +

在HTML5中定义标题

+ +

当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题

+ +

标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

形成了下面的大纲:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）

+ +

隐式分节

+ +

因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。

+ +

HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：

+ +
<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>
+ +

形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+ +

如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

形成如下的大纲：

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+ +

如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this subsection continues...
+  </section>
+</body>
+ +

形成如下的大纲：

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+ +

这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。

+ +

作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。

+ +

分节根

+ +

分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

例子形成如下的大纲:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲

+ +

大纲之外的节段

+ +

HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。

+ +
    +
  1. HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中
    2. +
  2. HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。
    3. +
+ +

页眉和页脚

+ +

HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。

+ +
    +
  1. HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。
    2. +
  2. HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。
    3. +
+ +

分节元素中的地址和发表时间

+ +

文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。

+ +

一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。

+ +

同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。

+ +

在不支持HTML5的浏览器器中使用HTML5

+ +

分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+
+ +

当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。

+ +

然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

总结

+ +

HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。

diff --git a/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 907724aeda..0000000000 --- a/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: 使用 HTML 章节与大纲 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 - - 指南 - - 文档结构 - - 高阶 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ---- -
-

（下方英文原文警告的过时已翻译版本）注意：下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。

-
- -
-

Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

-
- -

HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。

- -

HTML 4 的文档结构

- -

文档结构，即，<body> 与 </body> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。

- -

所以下面的片段：

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div>
-
-
- -

形成了如下的大纲：

- -
1. Forest elephants
-   1.1 Habitat
-
- -

HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

会形成如下的大纲:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

HTML5 解决的问题

- -

HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：

- -
    -
  1.  定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。
    2. -
  2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
    3. -
  3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 
    4. -
  4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。
    5. -
- -

更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

- -

HTML5 的大纲算法

- -

定义节段

- -

 {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 

- -
注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有{{HTMLElement("h1")}}. 具体查看 Defining Headings in HTML5.
- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

这个HTML片段定义了两个顶级节段：

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

第一个节段有三个子节段：

- -
<section>
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

上面的片段形成了如下的大纲:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-   1.3 Section (aside)
-
- -

在HTML5中定义标题

- -

当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题

- -

标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

形成了下面的大纲:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）

- -

隐式分节

- -

因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。

- -

HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：

- -
<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>
- -

形成如下的大纲:

- -
1. Forest elephants
-   1.1 Habitat (implicitly defined by the h3 element)
- -

如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

形成如下的大纲：

- -
1. Forest elephants
-2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
- -

如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this subsection continues...
-  </section>
-</body>
- -

形成如下的大纲：

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
- -

这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。

- -

作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。

- -

分节根

- -

分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

例子形成如下的大纲:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲

- -

大纲之外的节段

- -

HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。

- -
    -
  1. HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中
    2. -
  2. HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。
    3. -
- -

页眉和页脚

- -

HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。

- -
    -
  1. HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。
    2. -
  2. HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。
    3. -
- -

分节元素中的地址和发表时间

- -

文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。

- -

一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。

- -

同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。

- -

在不支持HTML5的浏览器器中使用HTML5

- -

分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
-
- -

当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。

- -

然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Warning !</strong>
-     Because your browser does not support HTML5, some elements are simulated using JScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

总结

- -

HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。

-- cgit v1.2.3-54-g00ecf