DO CZEGO SŁUŻY ELEMENT MAIN?
W HTML5 możemy stosować element <main>. Reprezentuje on główną treść na stronie internetowej lub w aplikacji, <main> nie wpływa na strukturę strony – może być stosowany niezależnie.
CO UMIESZCZAMY W ELEMENCIE MAIN?
Tagu <main> użyjemy w takiej sekcji, która zawiera unikalne treści dla danej strony.
Elementy, które są powtarzalne nie powinny znajdować się w <main>. Przykładem takich elementów są:
- nawigacja strony,
- informacja o prawach autorskich,
- znaki firmowe witryny,
- banery,
- wyszukiwarka itp.
Dodatkowo tag <main> nie może być wewnątrz:
<article>,<aside>,<footer>,<header>,<nav>.
PRZYKŁAD UŻYCIA TAGU MAIN
Poniżej prezentuję najprostszy przykład użycia tagu <main>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Great Dogs for Families</title>
</head>
<body>
<header>
<h1>The Border Terrier</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="health.html">Health</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome!</h2>
<p>This site is all about the Border Terrier, the best breed of dog
that there is!</p>
</main>
<footer>
<small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
</footer>
</body>
</html><main> nie jest ani w headerze (mimo, że nagłówek powinien być teoretycznie główny) ani w stopce. Jest osobnym tagiem, w którym informujemy użytkownika o czym właściwie jest ta strona.
Poniżej kolejny przykład, który dobrze ilustruje jak używamy tagu main. Nie header, nie stopka a opis rasy psa i linki do szczegółów na jego temat są najważniejsze.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Great Dogs for Families</title>
</head>
<body>
<header>
<h1>The Border Terrier</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="health.html">Health</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h2>About</h2>
<nav>
<ul>
<li><a href="#basic">Basic</a></li>
<li><a href="#app">Appearance</a></li>
<li><a href="#temp">Temperament</a></li>
</ul>
</nav>
</header>
<section id="basic">
<h3>Basic Information</h3>
<p>The Border Terrier is a small, rough-coated breed of
dog of the terrier group, originally bred as fox and vermin
hunters. [...]</p>
</section>
<section id="app">
<h3>Appearance</h3>
<p>Identifiable by their otter-shaped heads, Border Terriers
have a broad skull and short (although many be fairly long),
strong muzzle with a scissors bite. [...]</p>
</section>
<section id="temp">
<h3>Temperament</h3>
<p>Though sometimes stubborn and strong willed, border terriers
are, on the whole very even tempered, and are friendly and rarely
aggressive. [...] </p>
</section>
<footer>
<a href="#basic">Basic</a> -
<a href="#app">Appearance</a> -
<a href="#temp">Temperament</a>
</footer>
</section>
</main>
<footer>
<small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
</footer>
</body>
</html>Teraz połączenie obydwu przykładów. Jeśli mamy na stronie informację o czym właściwie ona jest, to opis psa przestaje być informacją główną. Ponadto informacja w <aside> może być powtarzana na każdej stronie, a napis „Witamy, ta strona jest o…” jest już bardziej unikalny i zastosujemy go np. na stronie głównej.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Great Dogs for Families</title>
</head>
<body>
<header>
<h1>The Border Terrier</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="health.html">Health</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome!</h2>
<p>This site is all about the Border Terrier, the best breed of dog
that there is!</p>
</main>
<aside class="advert">
<h2>Border Farm Breeders</h2>
<p>We are a certified breeder of Border Terriers, contact us at...</p>
</aside>
<aside class="advert">
<h2>Grumpys Pet Shop</h2>
<p>Get all your pets needs at our shop!</p>
</aside>
<footer>
<small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
</footer>
</body>
</html>Tag <main> jasno pokazuje gdzie jest główna treść. Dzięki niemu można zrezygnować z rozwiązań typu: <div class="main-content"> lub <!-- end main content --></div> 🙂
Bibliografia:
1. https://www.w3.org/TR/html52/grouping-content.html#the-main-element