Składnia dokumentu XHTML 1.0 Strict
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head> < meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> < title>Tytuł strony< / title> < /head> < body> Hello World! < /body> < /html>
< !doctype html> < html> < head> < meta charset="utf-8"> < title>Tytuł strony < /head> < body> Hello World! < /body> < /html>
• Nie musimy domykać znaczników np: < meta charset=„utf-8”> , < br > lub: < p> akapit …. < h1> nagłówek1 < /h1> < p> akapit drugi …. • Możemy pisać wersalikami np: < BODY>< /BODY> lub < DiV> • Atrybuty bez nawiasów ( musisz zachować – spójność!) • Dla JavaScript (domyślne dla HTML5) np.: < script src=„plik.js”>< /script>
< section>
• Grupowanie elementów, podobnie jak < div>. Może posiadać nagłówek, footer. < section>
• Elementy wewnątrz musza być ze sobą powiązane!
< article>
• Zamknięta całościowo treść – artykuł, wpis, notka na blogu. < article>
• Podobny do section, jednak powinien występować jako odrębna całość
< header>
• Głowa, która może występować w strukturze section bądź article, dzięki czemu < header> możemy rozdzielić treść w danym elemencie.
< aside>
• Panel boczny, kontener na treść odseparowaną od pozostałej < aside> części strony
< nav>
• Główna nawigacja na stronie (struktura linków)
< footer>
• Zawiera informacje o prawach autorskich, autorze itp. Może być < footer> częścią section lub article.
Outline
•To pewna struktura dokumentu, która jest odzwierciedlona w postaci skateryzowanego spisu elementów które się w nim znajdują.
Mówiąc prościej … stanowi swoisty „spis treści” dokumentu strony.
Na co to komu potrzebne?
Przejrzysty „spis treści” ma za zadanie komunikować się z przeglądarkami i urządzeniami.
Jak to działa?
Outline wiąże się ściśle z elementami typu: sectioning content oraz sectioning root
Czyli: article , aside , nav, section, body …
Jak sprawdzać outline?
Skrypt H5O (skrypt java) lub wtyczki HTML5 Outline dla przeglądarek
http://html5doctor.com/outlines/
http://gsnedders.html5.org/outliner/
Grupowanie Semantyczne / Tematyczne
1. Które z elementów stanowią odrębną całość?
2. Które z elementów mogły by występować jako całość po za naszą stroną?
3. Które z elementów są ściśle związane z tematyką strony?
Grupowanie Tematyczne – Strategia postępowania
< section>
• Zestaw treści zgrupowanych tematycznie
• Tworzy sekcje w outline dokumentu – korzystaj tylko wtedy,jeśli ich zawartość zasługuje na pozycje w „spisie dokumentu”
• Jeśli używasz section na potrzeby oscylowania to wybierz div
Przykład: Wyodrębnione news’y na stronie, sekcja danych kontaktowych itp.
< article>
• Odpowiada za treści, które możemy w całości wykorzystać w innym miejscu i będzie miała sens np. artykuł na blogu
• Tworzy sekcje w outline dokumentu
• Może zawierać header i footer
• Może wykorzystywać element time
*< time pubdate datetime=„2013-05-05T14:28-08:00”>
< aside>
• Reprezentuje treść, która może być traktowana jako odrębna w kontekście strony lub nie jest bezpośrednio związana z jej główną treścią
• Tworzy sekcje w outline dokumentu
• Nie powinniśmy używać tego elementu do wyróżnienia fragmentu treści powiązanej ze stroną.
Przykład: grupa linków, reklama (coś zewnętrznego)
< address>
Odnosi się do article, lub body i powinien zawierać dane kontaktowe(email)!
Nie powinno się stosować tego znacznika do adresów pocztowych – uznaniowo.
< figure>< figcaption>
co się znajduje w figure - (sectioning root!!)
może reprezentować listing kodu, diagram, ilustracja dodatek do artykułu/sekcji. Jest wycięty z głównego outline dokumentu!
Dodatki do figure: < code>
< strong> i < em>
zaznaczenie semantyczne ważnych elementów na stronie – powoduje pogrubienie tekstu, ma to wpływ na pozycjonowanie
< b> < i>
wraca do łask! Ale służy tylko do wyróżnienia stylistycznego!!
< mark>
zaznaczenie/wyróżnienie fragmentu tekstu (stosowany do wywołania, po wyszukiwaniu podświetla się treść słowo kluczowe które było wyszukiwane)