Dlaczego ktoś miałby zawracać sobie głowę oznaczaniem poprawnie i semantycznie?

_{Zauważ, że próbuję oznaczyć tak semantycznie, jak to możliwe, ponieważ podoba mi się ich wygląd i sposób działania, ale nie dlatego, że jestem świadomy innych oszałamiających zalet. Chodzi mi o to, aby móc edukować innych}

Cóż, widziałem wiele artykułów i samouczków, które często mówią „Oznaczmy to w najbardziej semantyczny możliwy sposób”.

Ale przyszła mi do głowy dziwna myśl, dlaczego?

Dlaczego trzeba (lub chcieć) zawracać sobie głowę konkretnymi elementami, które przekazują prawidłowe znaczenie semantyczne? Konkretnie mam na myśli nowych elementów HTML5, takie jak <time>, <output>lub <address>. Zwłaszcza jeśli strona „działa” (ładnie renderuje się we wszystkich przeglądarkach).

Dlaczego miałbym chcieć używać elementów takich jak <time>lub <address>, w których nic (lub w najgorszym przypadku rodzajowy <span>) nie działa tak dobrze?

Pytam o to, ponieważ widzę wiele (bardzo popularnych) stron internetowych (w tym tej), które nie przestrzegają tak zwanych najlepszych praktyk.

Darmowa funkcjonalność

Prawidłowe użycie <label>s oznacza, że ​​możesz kliknąć etykietę, aby wprowadzić pole tekstowe. Wiele przeglądarek doda logiczną domyślną funkcjonalność do wielu tagów zgodnie z oficjalną specyfikacją, co oznacza, że ​​możesz użyć mniejszej liczby wtyczek JavaScript i pisać mniej kodu niż strona wykonana w całości z <div>s i <span>s.

Dostępność

Związana z bezpłatną funkcjonalnością, semantyka wiele znaczy dla oprogramowania czytnika ekranu. Tekst przed polem wejściowym nie będzie czytany w taki sam sposób jak <label>testament. Czytniki ekranu zignorują większość twojego CSS, więc zależy to głównie od struktury twojego HTML.

Logiczny CSS

Po co używać, div #headerkiedy możesz bezpośrednio używać <header>stylu i? Znaczniki semantyczne ułatwiają oznaczanie i sprawiają, że twój styl jest znacznie bardziej przenośny; jeśli masz określony styl przekreślenia i zawsze używasz <del>elementów, styl jest znacznie bardziej przenośny. <del>oznacza to samo dla wszystkich, ale wszyscy będą nazywać swoją .deletedTextklasę inaczej.

Pomaga także utrzymać wszystkich na tej samej stronie w dużych projektach; nikt nie lubi poznawać ezoterycznych konwencji nazewnictwa innych ludzi.

SEO

Wyszukiwarki takie jak Google częściej wykorzystują semantyczny HTML i metadane . Fragmenty rozszerzone Google wykorzystują również specjalne metadane przeznaczone do przesyłania treści semantycznych.

Dlaczego nie jest to takie powszechne

To wymaga pracy, a ludzie są przyzwyczajeni do oceniania witryny na podstawie jej wyglądu i działania . Często nie ma uwzględnienia semantyczności, ponieważ ludzie, którzy piszą uzasadnienie biznesowe dla aplikacji, nie rozumieją tego ani dlaczego jest to ważne.

Ludziom nietechnicznym bardzo trudno jest zrozumieć lub ocenić semantykę HTML.

Jeśli witryna wygląda dobrze i wydaje się działać, to po co martwić? Wiele osób może nawet nie wiedzieć, że jest w tym coś więcej. Podobnie jak w przypadku dostępności, jest to ignorowane, dopóki ktoś z twojego zespołu naprawdę tego nie zrozumie.

Jeśli chcesz semantyczny HTML za priorytet nad projektem, ty musisz przedstawić sprawę do niego. Pomocnym narzędziem jest również pokazanie zespołowi / szefowi, jak działa twoja strona w czytniku ekranu.

Odpowiedzią jest po prostu przekazanie informacji i uporządkowanie dokumentu .

Kiedy używasz rozpiętości i div, dokument nie ma struktury. Nie ma list, żadnych akapitów, żadnych tabel, żadnych hiperłączy. Nic. Naprawdę nie ma sensu wybierać HTML jako języka znaczników, a następnie zignorować słownictwo, które oferuje, aby wyrazić i uporządkować treść. Struktura jest tu ważnym słowem. HTML służy do strukturyzowania się nie wyświetla. Po to jest CSS.

Jeśli znacznikujesz swój kod semantycznie, dajesz ludziom i czytelnikom szansę na zrozumienie danych w swoich elementach. Jeśli użyjesz elementów span i div przez cały czas, nie będziesz mieć tych dodatkowych informacji i wywnioskowanie ich na podstawie samych wartości może nie być możliwe.

Podobnie, jeśli chcę zeskrobać strony internetowe i tylko wyodrębnić nagłówki, aby stworzyć dla nich Spis treści, mój pająk musiałby wiedzieć, jaki jest nagłówek. Nie da się tego zrobić bez odpowiednich elementów.

Last but not least, jeśli używasz tylko div i span, będziesz miał problemy ze stylizowaniem ich za pomocą CSS. Selektory CSS pracują nad strukturą twojego dokumentu, a jeśli jest to w większości niejednoznaczna struktura, reguły CSS są trudne do zastosowania. Jak decydujesz, czy div div divnaprawdę odnosi się do table tr tdczy body ul li? Musisz wtedy dodać klasy i identyfikatory, ale wtedy wymyślasz koło na nowo.

Zobacz także zalecenie W3C

Użycie odpowiednich elementów semantycznych sprawi, że struktura będzie dostępna dla klienta użytkownika. Wymaga to wyraźnego wskazania roli, jaką różne jednostki odgrywają w zrozumieniu znaczenia treści. W ten sposób można wskazać charakter treści jako akapit, nagłówek, wyróżniony tekst, tabelę itp. W niektórych przypadkach należy również wskazać relacje między jednostkami treści, na przykład między nagłówkami i podtytułami lub między komórkami tabeli. Agent użytkownika może następnie uczynić strukturę widoczną dla użytkownika, na przykład używając innej prezentacji wizualnej dla różnych typów struktur lub używając innego głosu lub wysokości w prezentacji słuchowej.

Aby dodać do i tak dobrych odpowiedzi tutaj, jedną rzeczą, o której nie widziałem, jest kompatybilność do przodu . W miarę rozwoju specyfikacji możliwe jest określenie dodatkowej funkcjonalności dla niektórych elementów semantycznych. Jeśli twój kod jest poprawny semantycznie, będzie mógł skorzystać z tej funkcji bez lub z minimalną konserwacją.

Jednym z powodów, dla których nie widzisz wielu witryn doskonale przestrzegających semantyki, jest to, że nie ma uzasadnienia biznesowego przez większość czasu. Jeśli napędza sprzedaż (lub pokrewną kategorię, taką jak ekspozycja), to warto ich pieniądze napisać semantyczny HTML.

Najlepszy przypadek semantycznego użycia tagów to przypadek, gdy konsumujesz lub używasz HTML z narzędziem. Na przykład użycie znaczników semantycznych pozwala bezpośrednio stylizować elementy bez obawy o dodanie lub usunięcie stylów z czegoś innego. Dodatkowo, jeśli kiedykolwiek będziesz musiał parsować HTML za pomocą skrobaczki lub czegoś podobnego, z pewnością docenisz dobrze sformułowany i semantyczny HTML, ponieważ łatwiej jest pisać zapytania XPath i DOM, aby znaleźć to, czego potrzebujesz.

Powinienem zauważyć, że klasy nie są bezpośrednim zamiennikiem znaczników semantycznych. Mam klasy wielokrotnego użytku, [error, information, warning]które przekazują różne znaczenia, a zatem style oparte na znaczniku, do którego są dołączone.

Ponieważ może być przydatny lub potrzebny do przeszukiwaczy i usług internetowych (komputery AKA komunikujące się z komputerami). Jeśli napiszesz:

<span class="time">Sep 16 at 2:17</span>

... robot indeksujący nie musi rozumieć tego jako daty, rzeczy czasu. Lub będzie znacznie trudniej znaleźć go jako informację o dacie.

Jeśli użyjesz:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... wszystkim robotom łatwiej będzie znaleźć i przeanalizować te rzeczy.

Kiedy mówię roboty, nie mam na myśli wyszukiwarek :)

Prowadzę małą firmę konsultingową, a naszym obecnym podejściem jest nieużywanie nowych tagów HTML5, ponieważ próbujemy zrównoważyć wiele czynników. W tym przypadku równowaga między użytecznością, użytecznością i SEO:

• SEO: Co mówią inne odpowiedzi tutaj - może to trochę pomóc w SEO, chociaż z mojego doświadczenia wynika, że ​​im bardziej oczywista jest strategia SEO, tym mniejsze prawdopodobieństwo, że pomoże.

• Użyteczność # 1: Rozsądne jest założenie, że tagi HTML5 dają jakąś korzyść użyteczności. Dla niewidomych jest pewne, że cokolwiek zapewni im awaria dostępnej przeglądarki, będzie lepsze niż cokolwiek, co będę w stanie zapewnić. Dla typowego użytkownika jest o wiele bardziej dyskusyjny. Być może korzystanie z nieskinowanego odtwarzacza multimedialnego udostępnianego przez przeglądarkę jest łatwiejsze w użyciu niż mniej znany widget, który w przeciwnym razie umieściłbym tam. A może domyślna przeglądarka to bzdury (podobnie jak domyślny odtwarzacz MP3 systemu Windows Chrome po prostu przestaje działać okresowo).

• Użyteczność # 2: Stara IE. Stara IE wymaga kilku podkładek HTML5, które powodują wzdęcie strony, aby dowolny z tych tagów działał. Musisz dodać skrypt do tagów head, które wywołują funkcję CreateElement () w pętli między wszystkimi używanymi tagami HTML5. Jeśli nie zamierzasz przeczesywać każdej strony pod kątem używanych tagów, oznacza to każdy tag HTML5. To musi działać na każdej stronie, w linii, co oznacza brak buforowania. I zła wiadomość: stara IE jest najwolniejsza do uruchamiania Javascript, więc podczas ładowania tworzy ładny mały ruch. Następnie musisz zagłębić się w garść starych skryptów JavaScript i CSS tylko dla IE, a często Flasha, aby wszystkie nowsze nieobsługiwane elementy były renderowane poprawnie. Możesz włączyć funkcję wykrywania przed podjęciem decyzji o załadowaniu starego kodu IE, ale wtedy „ Ponownie każe starym użytkownikom IE czekać na załadowanie wystarczającej liczby skryptów, aby wykryć tę funkcję, zanim zaczną żądać wszystkich rzeczy, które powodują, że te tagi działają. Przeglądarka może wykrywać i wysyłać tylko stare elementy IE do użytkowników z tymi przeglądarkami, ale może to utrudnić lub uniemożliwić buforowanie w zależności od platformy. Dostarczenie różnych kodów różnym użytkownikom oznacza również, że testowanie jest bardziej skomplikowane - czy kiedykolwiek miałeś błąd asynchroniczny? A może taki, który występuje tylko w określonej przeglądarce? I tylko w produkcji? Zapisz mnie. Prawdopodobnie po prostu wyślesz to wzdęcie wszystkim. Dostarczenie różnych kodów różnym użytkownikom oznacza również, że testowanie jest bardziej skomplikowane - czy kiedykolwiek miałeś błąd asynchroniczny? A może taki, który występuje tylko w określonej przeglądarce? I tylko w produkcji? Zapisz mnie. Prawdopodobnie po prostu wyślesz to wzdęcie wszystkim. Dostarczenie różnych kodów różnym użytkownikom oznacza również, że testowanie jest bardziej skomplikowane - czy kiedykolwiek miałeś błąd asynchroniczny? A może taki, który występuje tylko w określonej przeglądarce? I tylko w produkcji? Zapisz mnie. Prawdopodobnie po prostu wyślesz to wzdęcie wszystkim.

Do czasu śmierci IE8 wartość tych nowszych tagów HTML5 po prostu nie jest wystarczająco wysoka dla problemów z wydajnością. Nadal pracujemy z publicznością, w której jest to nawet bliski śmierci *, ale któregoś dnia.

* Nasze najnowsze dane pokazują IE8 na poziomie 6% dla witryny z najmniejszą liczbą odwiedzających IE8 i 24% z największą liczbą odwiedzających IE8. Daleko, daleko od umarłych.

Krótka odpowiedź brzmi: „Bez uzasadnionego powodu w praktyce”. Prawie wszystkie argumenty na rzecz znaczeń „semantycznych” są jedynie przemyśleniami na temat tego, co może lub powinno się zdarzyć, a nie czymś namacalnym. Na przykład często wyszukiwane są wyszukiwarki, ale nie ma publicznych dowodów na to, że troszczą się o timelub outputlub address.

Pośrednio możemy wywnioskować, że nie będzie ich to obchodzić w dającej się przewidzieć przyszłości. Witryna schema.org , prowadzona przez niektóre wiodące wyszukiwarki, wyraźnie preferuje konkretne podejście do „znaczników semantycznych” oparte na czymś zupełnie innym, a mianowicie mikrodanych ( itemscopei powiązanych atrybutach). I robią to głównie dla dużych witryn komercyjnych lub społecznościowych.

Używanie spanlub divdziała ładniej niż nowości HTML5, ponieważ te ostatnie nie są rozpoznawane przez stare wersje IE nawet do celów stylizacji. Potrzebujesz więc sztuczek, aby „działały” nawet jako elementy kontenera.

Istnieją jednak pewne elementy „semantyczne”, które mają prawdziwe znaczenie przypisywane im przez przeglądarki, oprogramowanie wspomagające lub wyszukiwarki. Użycie h1nagłówka głównego zawsze było dobrą praktyką z takich powodów. Używanie labeletykiet pól formularza ma realny wpływ na użyteczność i dostępność. I tak dalej; zobacz Pragmatyczny przewodnik po HTML: Zasady .

HTML to nie tylko język interfejsu użytkownika, to także język struktury danych. Został zaprojektowany, aby pomóc heterogenicznym maszynom w jednym wspólnym sposobie identyfikowania rodzaju informacji przychodzących do serwera. Stąd tak wiele różnych tagów. Strony HTML należy traktować jako struktury danych.