Podstawy HTML – parę słów o układzie
Tak jak było obiecane, teraz będzie o podstawach HTML! Aby poznać język HTML, trzeba najpierw wiedzieć, jakie znaczniki on nam udostępnia. Co przekłada się na poznaniu ich przeznaczenia i gdzie można je umieszczać. Dzięki temu struktura naszej strony będzie na pewno czytelna, semantyczna, a także bardziej dostępna. A to już pełen sukces!
Nowe elementy HTML5 a układ strony
W HTML5 wprowadzono szereg nowych elementów, które służą do oznaczania fragmentów, czy też pewnych bloków, tworzących stronę. Mamy tutaj takie elementy, jak: <header>, <footer>, <nav>, <main>, <section>, <article>, <aside>.
Ich nazwy dokładnie oddają to, co powinny zawierać. Dlatego przed zaczęciem tworzenia strony ważne jest, żebyśmy wiedzieli, jaką treść chcemy na stronie umieścić, żeby odpowiednio stworzyć układ witryny. Wiadome jest, że nie każda strona będzie zawierała wszystkie te znaczniki. Przykład ich rozmieszczenia w <body> można zobaczyć na załączonym obrazku:
Nagłówek i stopka
Tak jak możesz w normalnym dokumencie, tak również w dokumencie HTML masz nagłówek <header> i stopkę <footer>.
<header> odpowiada za treść wprowadzającą do naszej strony. Mogą się tam znajdować elementy takie jak np. tytuł strony, logo, autora, wyszukiwarkę oraz głównej elementy nawigacyjne. Natomiast <footer> zazwyczaj zawiera informacje o twórcach strony, ich dane kontaktowe, ale również komunikat o prawach autorskich, czy linki do powiązanych dokumentów, jak polityka prywatności i regulamin.
Oba elementy można nie tylko używać dla całej strony, ale również dla samego artykułu. Czemu tak jest, to dowiecie się poniżej. Keep reading! 😀
Nawigacja
Nawigacja <nav> najczęściej znajduje się w <headerze>. Jednak może być ona użyta więcej niż raz w obrębie tego samego dokumentu, czasami można umieścić ją np. w footerze. Reprezentuje ona blok, w którym znajduje się zazwyczaj lista linków, służących do nawigowania po danej witrynie. Takim głównym przykładem, gdzie używa się tego tagu, to menu i spis treści.
Główna treść
<main> reprezentuje główną treść każdego dokumentu i znajduje się on w <body>. To ten znacznik obejmuje najważniejszy obszar całej strony, treści w niej umieszczone powinny ściśle nawiązywać do witryny. W związku w tym, że jest to główny element, to na stronie może on występować tylko raz.
W zależności od tego, co chcemy tam umieścić, to tag main może np. zawierać szereg sekcji. Sekcje tworzą one odrębne grupy tematyczne, jednak wciąż dotyczące tego, o czym jest dana strona. Za tworzenie sekcji odpowiada nam znacznik <section> i przeważnie zaraz po nim powinien znajdować się nagłówek, informujący, czego ona dotyczy. Dopiero potem powinna być wyświetlana treść.
Jeśli tworzymy, np. bloga, to przydatny okaże się tag <article>. I tak jak już zostało to wyżej wspomniane, ten znacznik może posiadać swój własny nagłówek i stopkę. Jest to związane z tym, że znacznik ten używany jest do elementów, które mogłyby istnieć samodzielnie. Tak jak, niezależnie od reszty strony, istnieje ten wpis. I jeśli byś spojrzała sobie w DevToolsy, to na pewno znajdziesz ten właśnie tag.
<article> zazwyczaj dotyczy treści, która służy do rozpowszechniania i jest wielokrotnego użytku. Przykładami mogą tu być właśnie wpis na blogu, ale także post na forum, artykuł w magazynie lub gazecie, karta produktu oraz komentarz przesłany przez użytkownika.
Inne treści
Bardzo często na stronach jest tzw. sidebar, czyli pasek boczny. W nim zazwyczaj znajdują się treści, które nie są bezpośrednio związane z główną treścią strony. Może to być, np. informacja o newsletterze 😉 , kilka słów o autorze, ale także nawołujące do akcji bannery, czy wszem obecne reklamy, które tak lubimy <3. Te wszystkie rzeczy powinny znaleźć swoje miejsce w znaczniku <aside>.
Jednak może tak się zdarzyć, że żaden z wyżej wymienionych tagów nie będzie oddawał tego, co chcemy w danym przypadku zamieścić. Wtedy też powinnyśmy używać dodatkowych znaczników, mających za zadanie grupować elementy, ale semantycznie nic nie znaczących.
Pamiętasz może, który to był? Yep, mowa o <div>. Innym takim tagiem jest <span>. Jak już pewnie wiesz ze wpisu o box model, każdy element, to takie pudełko. I jak to z pudełkami bywa, możesz je postawić obok siebie (elementy liniowe – inline) albo poukładać na stos (elementy blokowe – block) i tak samo dzieje się w HTML!
Istnieje też typ liniowo-blokowy (inline-block), który jest trochę takim kłamczuszkiem, bo jest elementem blokowym, ale zachowuje się jak liniowy, tj. wyświetla się w jednej linii.
See the Pen
span vs div by frontowisko (@frontowisko)
on CodePen.
I to co jest ważne, każdy element blokowy może mieć w sobie inne elementy blokowe, liniowe czy liniowo-blokowe. Natomiast element liniowy może w sobie zawierać tylko treść lub inne elementy liniowe! Dlatego to właśnie <div>, który jestem elementem blokowym, w przeciwieństwie do <span>, stosuje się do grupowania większości elementów strony.
Uffffff to mamy już załatwiony układ strony! To teraz co tam umieszczać? Możliwości jest wiele 😀 O tym następnym razem!
