Main - propozycja nowego tagu HTML

dodane 04.02.2013 o 12:58 komentarzy: 14 CSS i HTML

Skoro zamknięto już specyfikację HTML5 na nowe elementy i rozpoczęto prace nad HTML 5.1, to warto rzucić okiem na to, co następna wersja może nam przynieść. Okazuje się, że być może doczekamy się tagu <main> w nowej strukturze HTML.

Element <main> posiada już swój szkic specyfikacji, można także zajrzeć bezpośrednio do repozytorium W3C na GitHubie. Autorem pomysłu wprowadzenia tego elementu jest Steve Faulkner. Z definicji <main> jest kontenerem ("main content section"), w którym zawiera się główna treść naszej strony - jak najbardziej logiczne. Na stronie powinien znajdować się tylko jeden taki element, poza tym nie ma on wpływu na tzw. outline dokumentu. Zanim doczekamy się implementacji elementu <main> możemy używać ról WAI-ARIA, a więc role="main".

Dziwi mnie, że dopiero teraz doczekaliśmy się tego elementu. Mamy już <header>, <footer>, nawet <aside>, a nie mieliśmy elementu, który występuje na stronie niemal zawsze? Semantyczny kod HTML5 z powyższymi tagami i jednym <div class="main">...</div> w środku wyglądał co najmniej dziwnie.

Zobaczmy jak to może wyglądać w praktyce:

<header>
	<h1>Tytuł strony</h1>
	<nav>
		<a href="#adres1">Tytuł artykułu 1</a>
		<a href="#adres2">Tytuł artykułu 2</a>
		<a href="#adres3">Tytuł artykułu 3</a>
	</nav>
</header>
<main>
	<section>
		<h2>Tytuł artykułu 1</h2>
		<p>Lorem ipsum dolor sit amet.</p>
	</section>
	<section>
		<h2>Tytuł artykułu 2</h2>
		<p>Lorem ipsum dolor sit amet.</p>
	</section>
	<section>
		<h2>Tytuł artykułu 3</h2>
		<p>Lorem ipsum dolor sit amet.</p>
	</section>
</main>
<footer>copyright</footer>

Przykład banalny, prawda? Więcej o <main> przeczytać można w artykułach poniższych osób: Ian Devlin, Dudley Storey, Jeremy Keith. A co wy o tym myślicie? Niezbędny element, czy nadprogramowy dodatek?

Komentarze:

1look997 dnia 04.02.2013 o 13:24:

To już body nie wystarczy?

2Ender dnia 04.02.2013 o 13:26:

Body jest dla całego dokumentu, a main tylko dla głównej treści. Może być użyte od razu po body, ale nie musi - można to dowolnie zagnieździć.

3Maksymilian Śleziak dnia 04.02.2013 o 13:31:

Mamy takie same poglądy, również w 100% brakuje mi tagu main! Dziwie się że jest wszystko oprócz "środka".

4efka dnia 04.02.2013 o 13:33:

imo main razem z header i footer ładnie porządkuje strukturę

5Comandeer dnia 04.02.2013 o 14:03:

Notka prosto ze specki HTML 5.1: "Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping."
Ma sens ;)
Ja jednak bardziej lubię wersję HTML od WHATWG (wydaje mi się czystsza i bliższa realnym implementacjom - patrz: zmiany przy tagu menu) i popieram stanowisko Doktorów: "But what would be the purpose of marking it [main content] up specifically, anyway? If you need to style it, use a div. An assistive technology like a screenreader can find the main content because it is the first thing inside a page that isn’t a header, nav or footer."

6Vokiel dnia 04.02.2013 o 14:12:

Wszystko oprócz "środka", czyli jakby w domyśle main był wykluczeniem pozostałych elementów (jeśli nie jest w aside, header i footer -> to znaczy, że jest main).

Dobry krok.

7sasklacz dnia 04.02.2013 o 14:42:

No nie wiem a co to zmienia tak wlasciwie ? Ja tam tych nowych tagow w ogole nie uzywam, jakos przyzwyczailem sie do divow :)

8Ender dnia 04.02.2013 o 14:45:

Jak to co zmienia? Jest bardziej semantycznie! ;P

A na poważnie: zamiast pisać div class="main" piszesz main - krócej, ładniej i przyjemniej.

9efka dnia 04.02.2013 o 15:39:

i przy zamykaniu nie pogubisz się który to div w divie... jeśli nie dodajesz komentarzy - wait, już nie musisz ;P

10MŻ dnia 04.02.2013 o 19:11:

A w tym przykładzie nie powinno być article zamiast section?

11Ender dnia 04.02.2013 o 19:17:

To jest w przykładzie akurat mało istotne, w sumie pasuje jedno i drugie, ale jak się ktoś uprze, to może być i article ;]

12Sudlik dnia 04.02.2013 o 20:03:

Tak jak cytowani przez @Comandeer`a Doktorzy uważam, że main nie wiele wniesie, bo po prostu zastąpi mi w jednym miejscu na stronie section... i tyle.



<header>...</header>

<section>...</section>

<aside>...</aside>

<footer>...</footer>

Ale skoro już ma być to niech się na coś przyda, niech będzie po prostu "ciałem" section



<body>

	...

	<main>

		<article>

			<header>Ostatnie prace</header>

			<main>

				<p>Lorem ipsum dolor sit amet...</p>

				<ul>

					<li>lorem</li>

					<li>ipsum</li>

				</ul>

			</main>

			<footer>lorem ipsum</footer>

		</article>

		<article>...</article>

		...

	</main>

	<aside>

		<header>O Autorze</header>

		<main>

			<p>Lorem ipsum...</p>

			<ul>

				<li>lorem</li>

				<li>ipsum</li>

			</ul>

		</main>

	</aside>

	...

</body>

BTW Body to w zasadzie szczególny przypadek section.
OT @Ender Article to szczególny przypadek section w przypadku rodzeństwa o takiej samej strukturze, więc ja stawiałbym na niego ;)

13Kamil dnia 08.02.2013 o 00:24:

@sasklacz: nowe tagi ulepszają semantykę dokumentu (jakiś czytnik z przyszłości może później zapytać osoby niewidomej: "Czy chcesz bym Ci odczytał menu główne strony?"; bez nowych elemntów/po samych klasach raczej ciężko byłoby mu stwierdzić co jest menu głównym, a co stopką). No i też łatwiej (bardziej intuicyjnie) się steruje takim dokumentem, zarówno z poziomu CSS, jak i JS.

Zamiast:
.main .header {}
.main .article {}
.main .footer {}

używasz sobie:
main header {}
main article {}
main footer {}

(przy okazji zaoszczędziliśmy sześć stuknięć w klawiaturę (kropki) ;d

14Tymoteuz dnia 27.02.2014 o 17:08:

Z tego co się orientuję to main używa się raz i wewnątrz niego nie powinien umieszczony wewnątrz article, nav, header, footer. Treść w nim zawarta powinna być powiązana z tytułem strony.

Main - propozycja nowego tagu HTML

O mnie

Kategorie:

Ostatnie komentarze:

Moje strony i serwisy: