Czym są sekcje w HTML5

HTML5 wprowadził podział na sekcje, które mają pomóc dokładniej zorganizować układ stron. Sektory te ułatwiają pracę niejednemu programiście, a dodatkowo współpracują z innymi technologiami uprawnionymi do interpretowania dokumentu takimi jak chociażby czytniki ekranu. Wprowadzenie sekcji znacznie ułatwia rozpoznanie przez czytnik informacji głównych oraz pobocznych.

Stary dobry div

W starszej wersji HTML tagiem, który dzielił nam strukturę dokumentu był div, każdemu nadawano odpowiednią klasę, dzięki której łatwiej manipulowało się poszczególnymi działami strony i która miała na celu sugerowanie czego dokładnie dotyczy dany dział. Nie oznacza to jednak, że div wyszedł z użycia, wręcz przeciwnie. Nadal stanowi ważny element każdego kodowania, jednak nie musi on brać na siebie odpowiedzialności za wszystkie sekcje

Podział na sekcje:

HTML Header tag <header> jest to ta część storny, gdzie znajdziemy logo, tytuł oraz część nawigacyjną strony. Z założenia znajduje się ona na górze strony, bądź przy bocznej krawędzi i jest elementem stałym, nie znikającym podczas scrollowania.

HTML Navigation tag <nav> jak sama nazwa wskazuje ta część strony jest odpowiedzialna za hiperłącza, linki czyli ogólnie rzecz biorąc przysłowiowe menu.

HTML Article tag <article>  ten element zawiera spójny zbiory treści, które nie muszą być zależne od innych na stronie. Często używany jako tag dla komentarzy oraz widgetów.

HTML Section tag <section> definiuje grupę tekstów związanych ze sobą semantycznie. Zawiera tytuł, a często także śródtytuły. Porównywany do podrozdziału w książkach.

HTML Aside tag <aside> tworzy część boczną dokument, często wykorzystywany w sferze blogowania jako miejsce udostępniania ostatnich postów, lub informacji o autorze. Aside może również pełnić rolę przypisów.

HTML Footer tag <footer> czyli stopka dokumentu, odpowiedzialna za linki oraz prawa autorskie. Może także zawierać informacje o stronie, adresy czy mapkę, a także rozwinięte menu.

HTML5 uczynił kodowanie zdecydowanie prostsze i przyjemniejsze jeśli chodzi o strukturę dokumentu. Warto używać tych tagów, ponieważ są one czytelniejsze nie tylko dla innych programistów, ale także dla wyszukiwarki, czytników ekranu czy asystentów mowy. Teraz skoro już wiesz czym różni się każdy element od siebie pozostaje tylko usiąść i zacząć kodować.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *