HTML
Elementy przekroju
Szukaj…
Uwagi
Standardy HTML5 nie wymieniają głównego elementu jako elementu przekroju.
Element artykułu
Element <article> zawiera niezależne treści, takie jak artykuły, posty na blogu, komentarze użytkowników lub interaktywny widżet, który może być dystrybuowany poza kontekstem strony, na przykład przez RSS.
- Gdy elementy artykułu są zagnieżdżone, zawartość wewnętrznego węzła artykułu powinna być powiązana z zewnętrznym elementem artykułu.
Blog ( section ) z wieloma postami ( article ) i komentarzami ( article ) może wyglądać mniej więcej tak.
<section>
<!-- Each individual blog post is an <article> -->
<article>
<header>
<h1>Blog Post</h1>
<time datetime="2016-03-13">13th March 2016</time>
</header>
<p>The article element represents a self contained article or document.</p>
<p>The section element represents a grouping of content.</p>
<section>
<h2>Comments <small>relating to "Blog Post"</small></h2>
<!-- Related comment is also a self-contained article -->
<article id="user-comment-1">
<p>Excellent!</p>
<footer><p>...</p><time>...</time></footer>
</article>
</section>
</article>
<!-- ./repeat: <article> -->
</section>
<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
<p>This content should be unrelated to the blog.</p>
</footer>
Unikaj niepotrzebnego użytkowania
Gdy główna zawartość strony (z wyłączeniem nagłówków, stopek, pasków nawigacji itp.) To po prostu jedna grupa elementów. Możesz pominąć element <article> na korzyść elementu <main> .
<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>
Zamiast tego zamień artykuł na element <main> , aby wskazać, że jest to main treść tej strony.
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
Jeśli używasz innego elementu, upewnij się, że określasz rolę <main> ARIA dla poprawnej interpretacji i renderowania na wielu urządzeniach i przeglądarkach innych niż HTML5.
<section role="main">
<p>This section is the main content of this page.</p>
</section>
Uwagi:
- Elementy potomne
<main>elementu nie są dozwolone w obrębie<article>
Kliknij tutaj, aby przeczytać oficjalną specyfikację HTML5 dla elementu <article>
Główny element
Element <main> zawiera główną treść twojej strony internetowej. Ta treść jest unikalna dla poszczególnych stron i nie powinna pojawiać się w innym miejscu witryny. Powtarzające się treści, takie jak nagłówki, stopki, nawigacja, logo itp., Są umieszczane poza elementem.
- Element
<main>powinien być kiedykolwiek użyty tylko raz na jednej stronie. - Element
<main>nie może być dołączony jako element potomnyarticle,aside,footer,headerlub elementnav.
W poniższym przykładzie wyświetlamy pojedynczy post na blogu (i powiązane informacje, takie jak referencje i komentarze).
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
Wpis na blogu jest zawarty w elemencie
<main>, aby wskazać, że jest to główna treść tej strony (i dlatego jest unikalna w całej witrynie).Znaczniki
<header>i<footer>są rodzeństwem elementu<main>.
Uwagi:
Specyfikacja HTML5 rozpoznaje element
<main>jako element grupujący , a nie element dzielący .
- Atrybuty roli ARIA :
main(domyślna) ,presentationDodanie atrybutu
role="main"ARIA do innych elementów, które mają być używane jako główna zawartość, jest zalecane, aby pomóc agentom użytkownika, które nie obsługują HTML5, a także zapewnić większy kontekst dla tych, którzy to robią.Element
<main>domyślnie pełni główną rolę, dlatego nie trzeba go podawać.
Kliknij tutaj, aby przeczytać oficjalną specyfikację HTML5 dla elementu <main>
Element Nav
Element <nav> jest przeznaczony przede wszystkim do stosowania w sekcjach zawierających główne bloki nawigacyjne dla strony internetowej, może to obejmować linki do innych części strony internetowej (np. Kotwice dla spisu treści) lub innych stron w całości.
Przedmioty wbudowane
Poniżej zostanie wyświetlony wbudowany zestaw hiperłączy.
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
W razie potrzeby użyj elementów listy
Jeśli treść reprezentuje listę elementów, użyj elementu listy, aby to pokazać i poprawić wrażenia użytkownika.
Zwróć uwagę na role="navigation" , więcej na ten temat poniżej.
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
Unikaj niepotrzebnego użytkowania
Elementy <footer> mogą zawierać listę linków do innych części witryny (FAQ, regulamin itp.). Sam element stopki jest w tym przypadku wystarczający, nie musisz dalej owijać linków elementem <nav> w <footer> .
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
Uwagi:
- Potomkowie
<main>elementu nie są dozwoleni w<nav>Dodanie
role="navigation"ARIArole="navigation"do elementu<nav>jest zalecane, aby pomóc agentom użytkownika, które nie obsługują HTML5, a także zapewnić większy kontekst dla tych, którzy to robią.<nav role="navigation"><!-- ... --></nav>
Czytniki ekranu: (oprogramowanie, które pozwala użytkownikom niewidomym lub niedowidzącym poruszać się po stronie)
Programy użytkownika, takie jak czytniki ekranu, interpretują element
<nav>różny sposób w zależności od ich wymagań.
- Może nadać elementowi
<nav>wyższy priorytet podczas renderowania strony- Może to opóźnić renderowanie elementu
- Może dostosować stronę w określony sposób, aby dostosować ją do potrzeb użytkownika
przykład: powiększ łącza tekstowe w elementach<nav>dla osoby niedowidzącej.
Kliknij tutaj, aby przeczytać oficjalną specyfikację HTML5 dla elementu <nav>
Element sekcji
Element <section> reprezentuje ogólną sekcję tematycznie grupującej treść. Każda sekcja powinna zazwyczaj być identyfikowana z elementem nagłówka jako element potomny section .
- Możesz użyć elementu
<section>w<article>i odwrotnie. - Każda sekcja powinna mieć motyw (element nagłówka identyfikujący ten region)
- Nie używaj elementu
<section>jako ogólnego „kontenera” stylu.
Jeśli potrzebujesz kontenera do zastosowania stylizacji, użyj zamiast niego<div>.
W poniższym przykładzie wyświetlamy pojedynczy post na blogu z wieloma rozdziałami, każdy rozdział to sekcja (zbiór tematycznie pogrupowanych treści, które można zidentyfikować za pomocą elementów nagłówka w każdej sekcji) .
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
Uwagi:
Deweloperzy powinni używać elementu article , gdy ma sens syndykowanie zawartości tego elementu.
Kliknij tutaj, aby przeczytać oficjalną specyfikację HTML5 dla elementu <main>
Element nagłówka
Element <header> reprezentuje treść wprowadzającą dla jego najbliższego przodka, który tworzy sekcję lub element główny sekcji. <header> zazwyczaj zawiera grupę pomocy wprowadzających lub nawigacyjnych.
Uwaga: Element nagłówka nie jest sekcją treści; nie wprowadza nowej sekcji.
Przykłady:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
W tym przykładzie <article> ma <header> .
<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>
Element stopki
Element <footer> zawiera część stopki strony.
Oto przykład elementu <footer> , który zawiera znacznik akapitu p .
<footer>
<p>All rights reserved</p>
</footer>