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

55

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.

Madara Uchiha
źródło
17
Dodajesz informacje do komputera, a nie do człowieka.
8
@ ThorbjørnRavnAndersen: Naprawdę? Piszę stronę internetową dla ludzi do czytania, a nie dla komputerów. Chcę, żeby ludzie czytali moje treści i ostatecznie przyszli do mojego sklepu lub cokolwiek innego (mówiąc tutaj z perspektywy klienta)
Madara Uchiha
3
„dla ludzi do czytania, nie dla komputerów”. Cóż, w takim razie myślę, że przeczytają to w gazecie lub w magazynie?
1
@ ThorbjørnRavnAndersen: Touché, ale jeśli strona działa (jak w przypadku ludzkiej readabele), dlaczego miałbym dodawać fantazyjne elementy time?
Madara Uchiha
2
Rzeczywiście dlaczego. Jeśli nie widzisz takiej potrzeby, nie rób tego.

Odpowiedzi:

101

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.

Ben Brocka
źródło
10
„Jeśli chcesz semantyczny HTML za priorytet nad projektem, ty musisz przedstawić sprawę do niego.” - Lub pracuj dla osoby niewidomej! (Uwaga: nie sugeruję rzucania kwasu w twarz szefowi! Ale może zmusi go do noszenia opaski i korzystania z przeglądarki mowy).
Jörg W Mittag
34
I oczywiście GoogleBot jest w zasadzie ślepym niepiśmiennym trzylatkiem z zaburzeniami deficytu uwagi.
Jörg W Mittag,
2
Świetna odpowiedź. Dodałbym również, że utrzymanie kodu, w którym na początku wkładany jest „niepotrzebny” wysiłek, aby postępować zgodnie z najlepszymi praktykami, takimi jak ten, ułatwia utrzymanie kodu na późniejszym etapie (nawet jeśli jest to oryginalny projektant / programista, który go utrzymuje) .
Kenneth,
9
Na „wolne” funkcjonalność strony w przeglądarkach mobilnych również pozwalają na urządzenie do wyświetlania natywne widżety przeznaczone do wejścia telefonu (np <data> elementów)
Chris Cooper
1
@QmunkE to prawda, wiele osób zaniedbuje to, że przeglądarki mobilne często przekształcają fragmenty HTML w natywne elementy, takie jak widoki tekstu
Ben Brocka
9

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.

Gordon
źródło
Może to być najlepsza odpowiedź, ale biorąc pod uwagę, że każdy zakres / div jest spamowany semantycznie znaczącymi klasami i identyfikatorami, czy to nie jest pomocne?
Chris Pitman
Jakie są tego zalety? Czy maszyny mogą czytać mój kod?
Madara Uchiha
(Rozszerzanie do edycji) Dlaczego warto przejmować się domyślnym stylem przeglądarki? Używam własnego CSS (plus reset, aby wyeliminować te dokładne style) i działa dobrze. Pytanie skupia się głównie na nowych elementach HTML5. <time> <output> <address>
Madara Uchiha
@MadaraUchiha Im lepiej Google rozumie twoją treść, tym lepiej mogą przekierowywać wyszukiwarki na twoją stronę
Chris Pitman,
@Chris: Rzeczywiście, ale to nie jest wymóg? Mam na myśli, że wiele bardzo nie-semantycznych stron internetowych pojawia się na pierwszym miejscu w Google.
Madara Uchiha
5

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ą.

pgraham
źródło
2
Myślę, że to najważniejszy punkt z perspektywy dewelopera. Dostępność, bycie przyjaznym dla botów, SEO itp. Są ważne, ale jako twórca stron internetowych najbardziej mnie to interesuje.
yannis
3

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.

Levi Morrison
źródło
Dlaczego powinienem się przejmować, jeśli ktoś chce zeskrobać moją witrynę?
Madara Uchiha,
4
@MadaraUchiha, ponieważ sprzedajesz produkty w swojej witrynie, a wyszukiwarka indeksująca je zapewni dodatkowe połączenie z Twoimi produktami i prawdopodobnie zwiększy przychody.
Gordon
Weź również pod uwagę, że pewnego dnia ty, kolega lub przyszły opiekun może być zmuszony zrobić coś, co wymaga analizy witryny lub przeczytania kodu. Nie chcesz być facetem, o którym ludzie 10 lat później szepczą pod nosem, wyśmiewając się z twojego kodu i nienawidząc cię.
jmort253
Prawdopodobieństwo, że ktoś spodoba się edytowaniem 10-letniego kodu, jest niezwykle małe, bez względu na to, jak pięknie jest napisane. Ze względu na sposób, w jaki obecnie rozwijają się frameworki, ledwo mogę znieść spojrzenie na 5-letni kod.
Graham
1

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 :)

smonff
źródło
1

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.

Chris Moschini
źródło
0

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 .

Jukka K. Korpela
źródło
8
Najwyraźniej musisz przeprowadzić badania.
Kenneth,
2
-1 za ten kiepski link. (Pragmatyczny przewodnik po HTML: zasady)
Bruno Schäpper,
0

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.

Raj Kiran Singh
źródło
Chciałbym rozwinąć tę kwestię. Nie odpowiada bezpośrednio na pytanie i nie wydaje się dodawać do istniejących odpowiedzi.
walpen