HTML5 -Semantikstrukturierung von Artikeln und Abschnitt auf der Website mit mehreren Sub -Levels
Frage
Welches der folgenden - wenn überhaupt - ist die korrektste Art, die Artikel- und Abschnitt -Elemente auf einer Website mit mehreren Unteraufnahmen zu verwenden?
Das erste Beispiel Erstellt diese flache Umrisse so.
- Name der Firma
- Segmentnavigation
- Segmentname
- Segment -Unternavigation
- Produktname
- Produktsubseitennavigation
- Produkt sub Seite 1 Titel
- Fusszeile
... und sieht so aus
<header> <!-- MAIN NAVIGATION -->
<h1><a>Company Name</a></h1>
<nav>
<h1>Segment Navigation</h1>
<ul>
<li><a>Segment 1</a></li>
<li><a>Segment 2</a></li>
<li><a>Segment 3</a></li>
</ul>
</nav>
</header>
<header> <!-- SUB NAVIGATION -->
<h1><a>Segment Name</a></h1>
<nav>
<h1>Segment Sub Navigation</h1>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
<li><a>Product 3</a></li>
</ul>
</nav>
</header>
<header> <!-- PRODUCT PAGE NAVIGATION -->
<h1><a>Product Name</a></h1>
<nav>
<h1>Product Sub Page Navigation</h1>
<ul>
<li><a>Product sub page 1</a></li>
<li><a>Product sub page 2</a></li>
<li><a>Product sub page 3</a></li>
</ul>
</nav>
</header>
<article>
<h1>Product sub page 1 title</h1>
<p>Content from Product sub page 1<p>
</article>
<footer>
<h1>Footer</h1>
<p>Footer content</p>
</footer>
Das zweite Beispiel erstellt eine solche Baumstruktur wie diese
- Name der Firma
- Segmentnavigation
- Segmentname
- Segment -Unternavigation
- Produktname
- Produktsubseitennavigation
- Produkt sub Seite 1 Titel
- Fusszeile
... und sieht so aus
<header> <!-- MAIN NAVIGATION -->
<h1><a>Company Name</a></h1>
<nav>
<h1>Segment Navigation</h1>
<ul>
<li><a>Segment 1</a></li>
<li><a>Segment 2</a></li>
<li><a>Segment 3</a></li>
</ul>
</nav>
</header>
<section> <!-- SEGMENT SECTION -->
<header> <!-- SUB NAVIGATION -->
<h1><a>Segment Name</a></h1>
<nav>
<h1>Segment Sub Navigation</h1>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
<li><a>Product 3</a></li>
</ul>
</nav>
</header>
<section> <!-- PRODUCT SECTION -->
<header> <!-- PRODUCT PAGE NAVIGATION -->
<h1><a>Product Name</a></h1>
<nav>
<h1>Product Sub Page Navigation</h1>
<ul>
<li><a>Product sub page 1</a></li>
<li><a>Product sub page 2</a></li>
<li><a>Product sub page 3</a></li>
</ul>
</nav>
</header>
<article>
<h1>Product sub page 1 title</h1>
<p>Content from Product sub page 1<p>
</article>
</section>
</section>
<footer>
<h1>Footer</h1>
<p>Footer content</p>
</footer>
Lösung
Beide sind in Ordnung, aber unterschiedliche Dinge. Gehen Sie mit welcher Gliederung Ihrer Absicht für die Struktur entsprechen.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow