Div vs header etc.

Question

Witam

Od jakiegoś czasu interesuję się tworzeniem stron internetowych i zauważyłem, że często ludzie miewają odmienny styl "pisania". Np. Pan Mirosław w kursie HTML oraz CSS posługiwał się głównie div'ami natomiast inni użytkownicy,  których oglądałem posługiwali się czymś takim jak np. header, nav, section itd.  Moje pytanie brzmi czym różnią się te elementy i czy "opłaca się" je stosować.

 

Domyślam się że header nav i inne te elementy "mówią" użytkownikowi (?)  co zawiera ta część strony w przeciwieństwie do div'a.

Answer 1

Domyślam się że header nav i inne te elementy "mówią" użytkownikowi (?)  co zawiera ta część strony w przeciwieństwie do div'a.

Użytkownika nie interesuje co się znajdzie w kodzie strony, dla niego ważne jest to co widzi i co może z tym zrobić. Jest to głównie informacja dla wyszukiwarek, robotów (i innego oprogramowania), aby wiedziały czym dany fragment strony jest w rzeczywistości. Użytkownik pozna to bardzo prosto, jak widzisz nagłówek czy menu nawigacyjne to wiesz od razu co to jest. Ale na przykład dla robota wyszukiwarki strona to już jest tylko html (zwykły tekst, który musi odpowiednio sparsować), z którego musi wydobyć najistotniejsze informacje.

 Moje pytanie brzmi czym różnią się te elementy i czy "opłaca się" je stosować.

Jak najbardziej opłaca się stosowanie tych znaczników. Umiejętne korzystanie z tych znaczników pozwoli dobrze zoptymalizować stronę, dzięki czemu, np, łatwiej ją będzie znaleźć w wyszukiwarce.

Google, np. bardziej lubi strony, które są poprawnie i semantycznie napisane w HTML5.

Comments

Nieprawda, że użytkownika nie interesuje! Pomijasz niezwykle istotną kwestię dostępności, gdzie dla osób z niepełnosprawnościami tego typu oznaczenia w kodzie są niezwykle istotne. Czytniki ekranowe używają tych tagów do dzielenia strony na regiony i odpowiednio to oznajmiają.

---

Oczywiście, że prawda. Użytkownika nie interesuje to co siedzi w kodzie, interesuje go to co widzi i słyszy oraz to jakie czynności na danej stronie może wykonać.

Wcale nie pominąłem kwestii dostępności. Napisałem ogólnie, że te tagi są głównie dla wyszukiwarek, ale też i innego oprogramowania. Osoby niepełnosprawnej nie interesuje jak jest zbudowana strona, ją interesuje to, aby ten czytnik poprawnie stronę przetłumaczył i w sposób wygodny dla tej osoby.

Ciebie i mnie może interesuje jak jest zbudowana strona. Sam często zaglądam do źródeł. Jednak większość użytkowników internetu nie ma pojęcia jak strony są zbudowane i czym w ogóle jest html. Ich to nie interesuje. Po prostu, ktoś chce sobie pooglądać śmieszne koty, to wchodzi na daną stronę i wizualnie rozróżnia czym jest dany element. A to że strona jest przystosowana dla osób niepełnosprawnych jest tylko udogodnieniem w kierunku takich osób.

---

Z tym, że podejście "głównie dla wyszukiwarek" jest tym, co sprawia, że w Polsce do kwestii dostępności nie przywiązuje się żadnej wagi. Google jest ważniejsze od "śmiesznych niepełnosprawnych". W tym kraju prawie nikt nie zna standardu WCAG, co jest po prostu przykre…
Dlatego uważam, że w przypadku semantyki kwestię SEO należy albo całkowicie pomijać, albo przedstawiać jako wtórną w stosunku do kwestii dostępności.
Mam wrażenie, że dla Ciebie również dostępność to "dodatkowe udogodnienie". Z tego typu myśleniem po prostu nie mogę się zgodzić, bo podążając tą drogą bardzo łatwo dojść do momentu, w którym semantyka jest tylko "wartością dodaną". I tak traktuje ją większość agencji interaktywnych w Polsce, błędnie uważając, że wizualny aspekt strony to wszystko. Nie, nie jest. Wizualny aspekt strony to właśnie owa wartość dodana i po prostu trzeba mieć tego świadomość.

---

Ale filozofujesz. Nie doszedłeś jeszcze do formy po sylwestrze? 

---

No bo dbanie o to, by Sieć była dostępna dla wszystkich, to mrzonka… i właśnie przez tego typu podejście jest tak, jak jest.

---

No trudno. Nic nie poradzę na to, że tak mało się o tym mówi.

Napisałem "głównie", bo taka jest rzeczywistość. 

---

Może zabrzmię jak całkowicie obłąkany, ale mam zamiar tę rzeczywistość zmienić.

---

Może zabrzmię jak całkowicie obłąkany, ale mam zamiar tę rzeczywistość zmienić.

Ja nie twierdzę, że to źle. Wręcz przeciwnie, to bardzo dobrze.

Proponuję, abyś popełnił więcej jakiś ciekawych artykułów na te tematy. No chyba, że masz coś ciekawego twojego autorstwa, to mógłbyś podrzucić linka.

---

Właśnie nie mam niestety… postaram się coś popełnić w najbliższym czasie.

Answer 2

http://tutorials.comandeer.pl/html5-blog.html

Polecam przeczytać, a także pogooglować na ten temat.

Answer 3

Z tego co mi wiadomo to znaczniki typu "header, article, section" to znaczniki HTML5 i chyba nie wiele różnią się od zwykłych divów.
Chętnie też bym się czegoś o tym dowiedział.

Comments

Te znaczniki niosą wartość semantyczną w przeciwieństwie do divów, które są używane wyłącznie do stylowania, przez co (domyślnie) nie mają żadnej wartości semantycznej. Więcej na ten temat napisałem w swoim tutku, który jest podlinkowany w jednej z odpowiedzi.

Answer 4

header, footer, article, section itd. to nowe elementy wchodzące w skład HTML5. Zamiast takiego diva z id="header", czy "footer" możesz wstawić element <header>, czy <footer> a w nich dopiero <div> czy <section>. Większość koderów używała tych nazw w "id" stąd te nazwy. Z tego, co mi wiadomo -roboty goole podczas przeszukiwania strony, natrafiając na nowe znaczniki uważają je w hierarchii za "ważniejsze" i łatwiej chwytają, co gdzie jest na Twojej stronie ; )

Comments

Te znaczniki niosą wartość semantyczną i są częścią drzewka dostępności strony. Fakt, że używają ich wyszukiwarki, jest całkowicie wtórny.