Przejdź do treści

Główna treść <main>

W jaki sposób wskazać główną zawartość strony WWW?

<main>...</main>

Strony internetowe nie są zwyczajnymi dokumentami elektronicznymi. Z racji na naturę hipertekstu w każdym serwisie WWW możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć problemy z prawidłowym wyznaczeniem tej części dokumentu HTML, która zawiera główną treść, ze względu na którą użytkownik zdecydował się odwiedzić serwis.

Właśnie w tym celu został stworzony element MAIN. Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.

W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN, chyba że zawiera atrybut hidden. Element MAIN nie może być również umieszczony - bezpośrednio lub pośrednio - wewnątrz znaczników innych niż: HTML, BODY, DIV, FORM.

Przykład <main>

<!doctype html>
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Matrix - Serwis kinomaniaków</title>
	<head>
	<body>
		<header>
			Serwis kinomaniaków
			<nav>
				<ul>
					<li><a>Matrix</a></li>
					<li><a href="incepcja.html">Incepcja</a></li>
					<li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<h1>Matrix</h1>

			<nav>
				<ul>
					<li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>
					<li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li>
					<li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li>
				</ul>
			</nav>

			<h2 id="czym-jest-matrix">Czym jest Matrix?</h2>
			<p>Pierwsza część trylogii science fiction.</p>

			<h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2>
			<p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, zagrażającymi całej ludzkości.</p>

			<h2 id="matrix-rewolucje">Matrix: Rewolucje</h2>
			<p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - zagrożony zniszczeniem.</p>
		</main>

		<footer>Wszystkie prawa zastrzeżone</footer>
	</body>
</html>

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
<main>26
2013-03-26		21
2013-05-14		12
2015-07-29		16
2013-08-27		7
2013-10-22

Komentarze

Zobacz więcej komentarzy

Facebook