Zrozumieć strukturę HTML5 i Outline Algorytm

Pierwszą sprawą, o której należy pamiętać gdy mowa jest o HTML5 jest to, że cały czase jest w fazie eksperymentalnej. Co to oznacza? Oznacza to, że specyfikacja może się w każdej chwili zmienić. Mogą być to czasem zmiany kosmetyczne lub uszczegółowienie, ale należy mieć to na uwadze. Oczywiście nie oznacza to, że nie można go jeszcze używać.

Kiedy pierwszy raz próbowałam zrozumieć nowe elementy – nie będę kłamać – nie do końca mogłam zrozumieć niektóre z nich. Jednak kiedy zaczęłam czytać specyfikację W3C odnośnie HTML5, byłam zadowolona widząc, że HTML ma w końcu jakąś logikę. To nie są tylko, bądźmy uczciwi, elementy bez znaczenia jak <div> lub <p>, ale jest tam <nav>, <aside>, <header>, <article>, <section> dla których ważne jest to, aby zozumieć jak i kiedy je wykorzystywać. Jednocześnie niektóre elementy nie wymagają już tych niepotrzebnych atrybutów.

Myślę, że trochę minie czasu zanim ludzie przestaną “nie” myśleć w jaki sposób tworzą swoją strukturę html, a naprawdę przemyślą w jaki sposób chcą to zrobić i jakie elementy są właściwe. Przed HTML5 jedynym planowaniem, które należało wykonać było, w jaki sposób zagnieździć <div> w celu ostylowania ich w CSS oraz co powinno znaleźć się w tagu <h1>. Oczywiście są atrybuty o których nie należało zapominać, ale nie wszyscy pamiętali by o nich gdyby nie było to gdzieś w dobrych praktykach SEO. Tak czy siak, kiedy HTML5 jest już w progach naszych drzwi, nadszedł czas najpierw myśleć o strukturze i semantyce, a dopiero potem o divach i CSS.

Podstawową rzeczą o której trzeba pamiętać, kiedy tworzymy naszą strukturę, jest to, że istnieje coś takiego jak algorytm opisujący dokument (document outlining algorithm). html5doctor.com wyjaśnił go w artkule “Document Outlines” i oczywiście jest odpowiednia sekcja w samej dokumentacji. Jeśli chcesz, aby Twoja struktura była logiczna nie możesz o tym zapomnieć. Poza tym, jest wielu ludzi, którzy wykorzystują te informacje, np. za pomocą czytników ekranu. Tak więc bardzo istontne jest prawidłowe wykorzystywanie nagłówków. Jeśli nie rozumiesz dlaczego, powinieneś zobaczyć “Importance of HTML Headings for Accessibility“.

Teraz. Możesz przeczytać definicje dla każdego elementu w specyfikacji (to zawsze powinny być pierwsze Twoje kroki). Także html5doctor.com posiada naprawdę dobre materiały. Kiedy czytałam o nowych elementach, jak ich używać, kiedy i jak wpływają na ten cały outline, zdecydowałam się zwizualizować to. W infografice/arkuszu czy jakkolwiek to nazwiesz, “HTML5 i jego trzy twarze” przedstawione jest jak poszczególne części strony są z sobą powiązane i jak wpływają na outline. To nie wszystko. Kiedy tworzyłam kod źródłowy dla tego przykładu HTML5, dopisałam kilka informacji obok specyfikacji niektórych elementów. Być może będą one dla kogoś przydatne. Uwaga. To są moje notatki. Są trochę jak wskazówki. Jeśli ktoś ma jakieś sugestie lub znajdzie błąd, proszę dać mi znać.

Pobierz HTML5 i jego trzy twarze