Mumcio
8/17/2017 - 10:46 AM
User interface development.md
HTML5
materiały
Semantyka
| Znacznik | Zastosowanie | Reużywalność |
|---|---|---|
header | Nawigacja, nagłowek strony lub sekcji - tytuł, kontener treści wprowadzającej. | Tak |
nav | Tworzy nawigacje, Nie wymaga headera jako rodzica. | Tak |
main | Treść główna, pełni role kontenera. Powinien znajdować się po znaczniku body. Można zagnieżdzać w div. | Nie, tylko raz. |
article | Ma zawierać autonomiczną treść, po wyciągnięciu tego elementu z naszej strony i umieszczeniu go samotnie ma on być sensowny. Zastosowany może być do postów na blogu, forum, komentarzy. | Tak |
section | Zgrupowana tematycznie zawartość. Tytuł sekcji powinien być zamieszczony w elemencie header. Element section stanowi część większej całości - zawsze jest coś wyżej co łączy inne sekcje. | Tak |
aside | Zawiera treści marginalne związane z danym tematem, zawartością np. polecane źródła, reklamy, okienko tweetera, podział na kategorie, powiązane wpisy. | Tak |
footer | Informacje o autorze, informacje o wpisach, publikacjach autora, social media. Można go zastosować np. w sekcji komentarzy i umieścić zasady dotyczące sposobu komentowania. Głowny footer znajduje się poza tagiem main | Tak |
figure | Znacznik nadający się do dodawania grafik w głównej treści. | Tak |
figcaption | Etykieta tekstowa do znacznika figure | Tak |
details | Znacznik umożliwiający dodawanie rozwijalnych i zwijalnych szczegółów na stronie np. dodatkowe informacje dla użytkownika. | Tak |
summary | Widoczny nagłówek wyświetlany przed rozwinięciem szczegółów - details. | Tak |
time | Maszynowe odczytywanie daty i godziny. Przyjmuje atrybut datatime. | Tak |
Prawidłowa struktura strony w HTML5
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł strony</title>
</head>
<body>
<header>Tytuł strony</header>
<nav>
<ul>
<li><a href="/podstrona1.html">Link do podstrony 1</a></li>
<li><a href="/podstrona2.html">Link do podstrony 2</a></li>
<li><a href="/podstrona3.html">Link do podstrony 3</a></li>
</ul>
</nav>
<main>
<section>
<p>Sekcja stron...</p>
</section>
<article>
<header>
<h1>Tytuł pierwszego artykułu</h1>
<span>dodano przez Jana Nowaka</span>
</header>
<p>Treść artykułu pierwszego...</p>
<figure>
<img src="/obrazek.jpg" />
<figcaption>Opis obrazka</figcaption>
</figure>
<p>Dalsza treść artykułu pierwszego...</p>
</article>
<article>
<header>
<h1>Tytuł drugiego artykułu</h1>
<span>dodano przez Adama Kowalskiego</span>
</header>
<p>Treść artykułu drugiego...</p>
<video width="320" height="240" controls>
<source src="/filmik.mp4" type="video/mp4">
<source src="/filmik.ogg" type="video/ogg">
Twoja przeglądarla nie obsługuje podanych formatów filmika.
</video>
<p>Dalsza treść artykułu drugiego...</p>
</article>
</main>
<aside>
<h2>Kategorie</h2>
<nav>
<ul>
<li><a href="/kategoria1.html">Kategoria 1</a></li>
<li><a href="/kategoria2.html">Kategoria 2</a></li>
<li><a href="/kategoria3.html">Kategoria 3</a></li>
</ul>
</nav>
<h2>Tagi</h2>
<section>
<a>tag 1</a> <a>tag 2</a> <a>tag 3</a> <a>tag 4</a>
</section>
</aside>
<footer>
<p>Informacje kontaktowe, copyright, itp.</p>
</footer>
</body>
</html>
<details>
<summary>Summary Goes Here</summary>
...this is hidden, collapsable content...
</details>