Podstawy HTML5
To nie jest kurs ani poradnik HTMLa. Chciałem poruszyć tylko kilka kwestii, które być może nie zawsze są jasne.
Dzisiejszy wpis będzie raczej dla laików jeśli chodzi o HTML5. Mimo, że sama piąka htmla już trochę istnieje to do tej pory można bez problemu znaleźć strony, które źle z niej korzystają lub w dalszym ciągu mieszają z xHTML. Postaram się przedstawić podstawy składni, sktrukurę etc. Jeżeli nie wiesz dlaczego właśnie HTML5 a nie jego podobna wersja xHTML to zapraszam do wpisu „Czy HTML5 jet naprawdę taki fajny?”
Podstawowa struktura
[html]
<!DOCTYPE html> <!– linijka mówi o tym, że owy dokument jest dokumentem typu HTML–>
<html>
<head> <!– nagłówek –>
<meta charset="utf-8"> <!– kodowanie strony, w 90% przypadów będzie to UTF-8 –>
<title>Tytuł strony</title> <!– tytuł strony –>
</head> <!– koniec nagłówka nagłowka –>
<body>
zawartość strony…
</body>
</html>
[/html]
Strukturę pewnie zna każdy, ale żeby dopełnić formalności kilka linijek, które standardowo umieszcza się w sekcji nagłowka:
[html]<meta name="description" content="">[/html]
– opis strony (widoczny w Google), ma wpływ na pozycjonowanie
[html]<meta name="keywords" content="">[/html]
– słowa kluczowe, ma wpływ na pozycjonowanie
[html]<meta name="viewport" content="width=device-width, initial-scale=1">[/html]
– linijka dodawana gdy strona ma być responsywna (aby zwyczajnie nam się automatycznie nie zmniejszała na innych urządzeniach)
[html]<link rel="stylesheet" href="style.css">[/html]
– link do naszego pliku CSS
[html]<script src="main.js"></script>[/html]
– link do pliku JS
[html]<link href="img/favicon.png" type="image/x-icon" rel="shortcut icon">[/html]
– link do favicona (czyli ikonki wyświetlanej na kartach przeglądarki)
To są takie stałe, podstawowe elementy, które znajdują się praktycznie na każdej stronie. Tego jest w internetach bardzo dużo, więc żeby się nie powtarzać przejdźmy do czegoś konkretniejszego…
Domykać czy nie domykać?
Do tej pory istnieje pozostałość po języku xHTML czyli zamknięte tagi krótkie, np. <br/> <img…./> <input /> również wszystkie meta tagi w nagłówkach były domykane, np. <meta charset=”utf-8″ …/>. HTML5 nie jest kontynuacją xHTMLa, ale jest z nim kompatybilny, dlatego zamykanie tagów nie jest wymagane (ale wciąż dozwolone). Oznacza to więc, że zarówno <br/> jak i <br> są poprawne.
Uwaga bo to nie wszystko, możemy nawet nie domykać kilku tagów DŁUGICH, np. tagu <p>. Taki kod będzie w dalszym ciągu poprawny:
[html]
<div>
<p>ala ma kota
</div>
[/html]
Kod jest poprawny jednak osobiście polecam takie tagi zamykać, ze względu na czytelnosć.
Do pewnego etapu większość osób i tak zamykała tagi KRÓTKIE ponieważ nie wszystkie przeglądarki wspierały HTML5. Jest to raczej przeszłość i jeżeli chcesz tworzyć strony w ładnych, czystym HTML5 to nie używaj zamkniętych tagów.
Duże czy małe litery
To jakie litery zastosoujemy w tagach to czysta formalność. Nie ma żadnego znaczenia na działanie kodu. Czyli wszystkie poniższe kombinajce będą działające:
[html]
<Section>…</SECTION>
<SECTION>…</section>
<section>…</section>
[/html]
Jednak dobrze trzymać się liter małych, z kilku powodów. Kod będzie czytelniejszy, łatwiejszy do pisania, domyślnie przyjęło się, że piszemy je małymi literami. To samo tyczy się atrybutów (class, id..).
Za dużo divów
Częstym błędem (który chyba opisałem w darmowym mini poradniku) jest nadużywanie divów. HTML5 wprowadził nam nowe tagi aby ten kod był bardziej logiczny. Dla tego dostaliśy takie znaczniki jak:
<header> nagłówek strony/sekcji
<section> jakaś sekcja, zbiór powiązanych ze sobą elementów
<article> jak się można domyśleć, jakaś treść, często obejmuje wpisy na blogach
<nav> nawigacja
<aside> treść niezwiązana ze stroną (mogą to być reklamy)
<footer> stopka strony/elementu
<main> główna treść na stronie
Ok. Skoro mamy tyle tagów to dlaczego tak wiele osób używa wyłącznie <div> <div> <div>?
Użyj tych znaczników raz, drugi, trzeci a będzie to już dla Ciebie normą. Przy ich stosowaniu nawet dla samego kodera jest to ułatwienie ponieważ dużo łatwiej rozeznać się w kodzie.
Strona bez html, body, head?
Na koniec mniej popularna ciekawostka. HTML5 pozwala nam na pominięcie tagów html, body i head. Czy taka konstrukcja będzie poprawna:
[html]
<!doctype html>
<title>Moja strona w HTML5</title>
<h1>Witaj na mojej stronie</h1>
<p>Lorem ipsum….</p>
[/html]
Piszę to jako ciekawostka, ponieważ o ile jest to teoretycznie dozwolone to póki co nie do końca zalecane.