Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie.
SECTION, ARTICLE
<section> treść </section>
sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy za pomocą sekcji logicznie dzielić całość treści i znaczniki <section> możemy w sobie zagnieżdżać w nieskończoność.
<article> treść </article>
artykuł jak sama nazwa wskazuje służy do przechowywania treści niezależnej od całości, która wyrwana z reszty tekstu nie traci swojego sensu.
Oto przykład zawierający oba znaczniki:
<article> <h1>Serwisy społecznościowe</h1> <section> <h2>Twitter</h2> <p>Treść...</p> </section> <section> <h2>Facebook</h2> <p>Treść...</p> </section> <section> <h2>Google+</h2> <p>Treść...</p> </section> </article>
ASIDE
<aside> treść </aside>
coś obok – element uzupełniający, nie jest wymagana do zrozumienia treści dokumentu. Gdybyśmy usunęli sekcję aside, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.
HEADER
<header> treść </header>
nie mylić z nagłówkiem, do tego służą znaczniki h1..h6. Jest to element, który zawiera nagłówkowe treści, logicznie uwidacznia kod nagłówkowy dla programisty. Stosujemy go jeżeli chcemy w kodzie zaznaczyć, że dany fragment treści zawiera elementy tytułowe np.
<header> a logo </header >
<header> <p>Witam na stronie...</p> <h1>Kurs języka HTML</h1> </header>
<header> <h1>Sekcja 1</h1> <p>Akapit sekcji 1</p> <h2>Podsekcja 1.1</h2> </header> <p>Akapit podsekcji 1.1</p> <h2>Podsekcja 1.2</h2> <p>Akapit podsekcji 1.2</p>
FOOTER
<footer>...</footer>
Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji – np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.
<footer> Some copyright info or perhaps some author info for an <article>? </footer>
NAV
<nav>...</nav>
sekcja nawigacyjna – zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem nav, zwykle bardziej właściwy do tego będzie element footer. Niewłaściwym miejscem dla nav będą linki umieszczone w środku treści tekstowej artykułu.
HGROUP
znacznik grupujący nagłówki:
<hgroup><h1>Main title</h1><h2>Secondary title</h2></hgroup>
MAIN
<main>...</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.
<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>
Na rysunku przedstawiłam przykładowy schemat budowy strony na bazie znaczników semantycznych:
znaczniki semantyczne i div
W skrócie – znacznika <div> używamy wszędzie tam, gdzie nie mamy możliwości zastosowania znaczników semantycznych.
DETAILS, SUMMARY
Służy do ukrywania większej partii tekstu, która pojawi się po kliknięciu na dany fragment tekstu.
- Panel domyślnie zamknięty:
<details> <summary>nagłówek</summary> ... </details>
- Panel domyślnie otwarty:
<details open> <summary>nagłówek</summary> ... </details>
Przykład:
Nagłówek panelu – kliknij, aby zobaczyć więcej…
Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede. Nam convallis metus aliquam sociis eu nec Curabitur gravida ipsum condimentum. Sed cursus sapien Aenean urna Sed diam volutpat urna auctor sapien. Auctor sociis diam In sem tellus tincidunt In risus ornare nibh. Condimentum sit In augue sit ultrices nibh iaculis sem Sed nec. In interdum a eget sit porta tempus lacinia Vestibulum Nam.
<details> <summary>Nagłówek panelu - kliknij, aby zobaczyć więcej...</summary> Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede... </details>
Ćwiczenie:
Przykładowe rozwiązanie ćwiczenia z tematu HTML5 – Formatowanie tekstu – pobierz.
