Dlaczego warto używać znaczników semantycznych HTML5 takich jak headers section nav article zamiast po prostu div z preferowanym css do tego. Stworzyłem stronę internetową i użyłem tych tagów, ale nie różnią się one od div. Jaki jest ich główny cel. Czy dotyczy to tylko odpowiednich nazw znaczników podczas korzystania z niego, czy więcej? Wyjaśnij, że przeszedłem przez wiele witryn, ale nie mogłem znaleźć tych podstaw.
Odpowiedzi:
67 dla odpowiedzi № 1Jak sama nazwa wskazuje, służy to celom semantycznymtylko. Ma to na celu poprawę zautomatyzowanego przetwarzania dokumentów. Zautomatyzowane przetwarzanie odbywa się częściej niż zdajesz sobie sprawę - ranking każdej witryny z wyszukiwarek pochodzi z zautomatyzowanego przetwarzania całej witryny.
Jeśli odwiedzasz stronę internetową, jako czytelnik możesz od razu (wizualnie) rozróżnić wszystkie elementy strony, a co ważniejsze Rozumiesz Treść.
Jednak maszyny są głupie i nie mogą tego zrobić: Wyobraź sobie, że robot indeksujący lub przeglądarka ekranu próbuje analizować twoją stronę za pomocą div wszędzie. Skąd mają wiedzieć, jaką część dokumentu zamierzałeś być nawigacją lub głównym artykułem, czy też nie tak ważnym sidenotem? Mogliby odgadnąć analizując strukturę dokumentu przy użyciu wspólnych kryteriów, które są wskazówką dla konkretnego elementu. Na przykład. na ul lista linków wewnętrznych jest najprawdopodobniej rodzajem nawigacji strony. Jednak jeśli zamiast tego a nav element zostanie użyty, maszyna natychmiast wie, jaki jest cel tego elementu.
Przykład: Ty, jako użytkownik (czytając stronę, nie widząc rzeczywistego znacznika), nie przejmujesz się, czy element jest zamknięty w <i> lub <em> etykietka. Prawdopodobnie w większości przeglądarek będzie renderowany jako kursywą, a jeśli tylko wyróżnia się z tekstu, aby łatwo go rozpoznać, nie przeszkadza ci to.
Istnieje jednak większa różnica pod względem semantyki: <i> oznacza po prostu kursywę - jest to wskazówka prezentacyjna dla przeglądarki i niekoniecznie zawiera głębsze informacje semantyczne. <em> oznacza jednak podkreśl, co semantycznie wskazuje na ważną informację. Teraz przeglądarka nie jest związana z italski instrukcja już, ale mogłaby to zrobićwizualnie kursywą, pogrubioną czcionką lub podkreśloną lub w innym kolorze ... Dla osób niedowidzących czytniki ekranu mogą podnieść głos - dowolna metoda, która wydaje się najbardziej odpowiednia w konkretnej sytuacji, aby podkreślić tę ważną informację.
// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>
10 dla odpowiedzi nr 2
Jest ładny mały artykuł na temat semantyki HTML5 HTML5Doctor.
Semantyka była częścią HTML w takiej czy innej formie. Pomaga zrozumieć, co się dzieje na stronie.
Wcześniej kiedy <div> był używany do prawie wszystkiego, wciąż implementowaliśmy semantykę, nadając jej „semantyczną” nazwę klasy lub nazwę identyfikatora.
Te tagi pomagają w prawidłowej strukturze i zrozumieniu układu.
Jeśli zrobisz,
<div class="nav"></div>
w przeciwieństwie do
<nav></nav>
LUB
<div class="sidebar"></div>
w przeciwieństwie do
<aside></aside>
nie ma nic złego, ale to drugie pomaga zapewnić lepszą czytelność dla Ciebie, a także dla robotów indeksujących, czytelników itp.
1 dla odpowiedzi nr 3
W tagu div musisz podać identyfikator, który mówio tym, jaki rodzaj treści zawiera, treść, nagłówek lub stopka itp. podczas gdy w przypadku elementów semantycznych HTML5 nazwa wyraźnie określa, jaki rodzaj kodu trzyma i dla jakiej części strony internetowej.
Elementy semantyczne są <header>, <footer>, <section>, <aside>itp.