Dlaczego powinniśmy używać tagów takich jak tagi p, span, hx, jeśli zamiast tego możemy używać CSS?

Dlaczego powinniśmy używać tagów takich jak tagi p, span, hx, jeśli zamiast tego możemy używać CSS? Czy to ważne z punktu widzenia SEO?

Krótka wersja jest taka, że ​​różne tagi i CSS mają różne cele.

<h1>Whatever</h1>, na przykład, ma pewne znaczenie wraz z jego użyciem: „To jest nagłówek, ważny na pierwszym poziomie” i tak dalej. Niektóre parsery również używają tagów hx (i innych) do tworzenia konturu struktury dokumentu, który może być używany do wszystkiego, od przetwarzania danych po dostępność (np. Czytniki ekranu przeskakują do następnego pytania na stronie głównej webmasterów, przechodząc do następnej h3) .

Nie możesz odrzucić znaczników semantycznych w oparciu o to, co możesz zrobić z CSS i odwrotnie.
Możesz zastosować CSS do innego znacznika, aby wyglądał tak samo jak h1, np .: <span style="font-weight:bold;font-size:2em">Whatever</span>ale to wciąż nie czyni tego znacznika zakresu faktycznym nagłówkiem pod względem funkcji i semantyki. W tym przypadku zarys, który podłączyłem powyżej, byłby prawie niemożliwy, ponieważ te przęsła nie są nagłówkami, a jedynie tekstem, który arbitralnie utworzyłeś duży i odważny.

Znaczniki i prezentacja są różne

To trochę jak pytanie „dlaczego powinniśmy mieć ściany, kiedy mamy farby?” :)

Tagi HTML wskazują, jaka jest twoja treść - to jest nagłówek, to jest lista itp.

CSS oznacza, jak powinna wyglądać twoja treść - nagłówki powinny być niebieskie, listy powinny być tak wcięte, menu powinno znajdować się po lewej stronie itp.

Javsascript mówi, jak powinna wyglądać twoja strona - animacje itp.

Bez treści HTML CSS i Javascript naprawdę nie mają nad czym pracować.

Te kategorie nie są w 100% czarno-białe - na przykład CSS może teraz określać „przejścia”, które są animacjami - ale są one podstawowym pomysłem.

Zobacz poprzednie dyskusje na ten temat na StackOverflow tutaj i tutaj .

Dobry znacznik oszczędza mnóstwo wysiłku i działa lepiej

Jeśli chcesz, aby coś zachowywało się jak link, możesz użyć <span class="mylink">i użyć kilku CSS i JS, aby wyglądało i działało poprawnie. Lub możesz po prostu użyć <a>elementu i uzyskać wszystko za darmo, bez dodatkowego kodu do pobrania, ponieważ przeglądarki już wiedzą, co robić i mają logikę zaimplementowaną w szybkim, natywnym kodzie. Ponadto jest o wiele bardziej prawdopodobne, że będzie działać poprawnie w czytnikach ekranu, przeglądarkach mobilnych, wyszukiwarkach, agregatorach i innych przypadkach użycia, o których nie pomyślałeś.

Z tego też powodu powinieneś użyć akcji <button>do klikania, a <label>do oznaczenia <input>i oraz <main>dla głównej sekcji strony.

Jak dobry znacznik wpływa na SEO

Zasadniczo SEO polega na przekonaniu wyszukiwarek, że Twoja treść najlepiej pasuje do wyszukiwanego hasła. Oczywiście nikt w Google nie czyta osobiście każdej strony internetowej i nie klasyfikuje jej w rankingu.

Dlatego, aby wyszukiwarki wiedziały, jaka jest twoja treść, program musi ją przeanalizować.

I hej, patrz! Mamy cały język o nazwie HTML, który ma na celu oznaczanie treści w sposób zrozumiały dla maszyn! :)

Tak, wyczyszczenie znaczników pomoże wyszukiwarkom lepiej indeksować strony.

Na przykład, jeśli nagłówek Twojej strony był tak naprawdę zrobionym przez ciebie zdjęciem z gazety, może wyglądać interesująco, a ludzie mogliby go dobrze przeczytać, ale dla wyszukiwarki byłby to tylko obraz bez znaczenia . Podczas gdy <h1>Turtle Groomer 5000</h1>wyraźnie mówi wyszukiwarkom, że masz produkt, który ułatwia higienę ciążową.

Pomyśl także o osobach z upośledzeniem, które (na przykład) muszą używać czytnika brajlowskiego. W takich przypadkach tagi HTML mają znacznie większe znaczenie niż wizualne style css.

Su odpowiedziała na część semantyczną. Jeśli chodzi o SEO, przekonasz się, że wyszukiwarki przypisują elementowi h1 większą wagę niż inne tagi. Znaczniki h2 / b / strong mają nieco większą wagę niż zwykły tekst.

Większość innych tagów jest prawie równa, ale zawsze powinieneś używać najbardziej odpowiedniego tagu dla zadania. Google niedawno zaczął analizować tabele, gdy są używane do danych tabelarycznych, a inny właściwie używany HTML może dawać sygnały, dla których treść jest ważniejsza niż inne.

W przypadku HTML5 sprawdź pogrubienie i kursywę w HTML5 .

Podsumowanie:

Użyj, <b>gdy chcesz, aby tekst miał inny styl bez znaczenia kontekstowego, ale użyj, <strong>gdy chcesz, aby tekst miał dodatkowe znaczenie z punktu widzenia treści lub SEO.

Służy <i>do wyrównania nastroju tekstu, ale służy <em>do podkreślenia tekstu.

Ponadto: nie zapomnij o znaczeniu semantyki dla użytkowników niepełnosprawnych. Oprogramowanie do odczytu ekranu zależy od semantyki, aby przedstawić osobom niewidomym wymagany kontekst, w którym tracą z powodu swojej niepełnosprawności.

Po pierwsze, <hx>jest dość ważnym znacznikiem, ponieważ definiuje nagłówki, jak wspomnieli inni. Nagłówki są bardzo przydatne nie tylko ze względu na wygląd, ale ponieważ dzielą sekcje w sposób, w jaki nie jest w stanie wyglądać podobnie. Spójrz na przykład na Wikipedię. Niektóre programy polegają na tego rodzaju znacznikach do „dzielenia” dokumentów na części, a nawet tworzenia automatycznego spisu treści. Wyszukiwarka zakłada, że ​​tekst w <h1>znaczniku byłby ważniejszy, ponieważ jest to nagłówek - tytuł.

Następnie, podczas gdy arkusze stylów są świetne, niektóre urządzenia będą ignorować arkusze stylów i skupiać się tylko na HTML, w którym <em>przydatny jest taki tag . Jeśli arkusze stylów zostały wyłączone lub wystąpił problem z ładowaniem (np. Problemy z połączeniem internetowym), tekst nadal będzie sformatowany. <em>może także powiedzieć, że należy położyć nacisk na to słowo, podczas gdy sama kursywą może być wszystko, od tytułu filmu po zwykłe odróżnienie podpisu obrazkowego od zwykłego tekstu. Mogą to wykorzystać osoby korzystające z narzędzi dla osób niepełnosprawnych, które w innym przypadku ogólnie nie zdobywają nacisku.

<span>, z drugiej strony, jest w dużej mierze wbudowaną wersją <div>tagu, a jeśli już, może po prostu zaoszczędzić Ci konieczności wpisywania dodatkowej klasy (przy takim powiedzeniu, czy naprawdę chciałbyś użyć <span class="italic">zamiast <i>każdej instancji kursywy sprawia, że ​​kod jest trudniejszy do odczytania, mniej znormalizowany (przy szerokim założeniu, że większość ludzi użyłaby tego drugiego w porównaniu z pierwszym) i w żaden sposób nie ulepsza dokumentu.

<p>jest również przydatny dla osób niepełnosprawnych, ponieważ zapewnia, że ​​tekst można podzielić na łatwe do zarządzania akapity w sposób, który <br />nie jest możliwy.

Oczywiście możemy powiedzieć, że HTML nie był przeznaczony do stylizacji, ale istnieje delikatna granica między designem a stylem; i szczerze mówiąc, powiedziałbym, że należy to uznać za preferencję użytkownika. Niezależnie od tego, czy korzystasz, <i>czy <span class="italic">to zależy od Ciebie i nie będzie to miało znaczenia dla SEO. W końcu po co ograniczać nas do jednego sposobu robienia rzeczy? (na przykład, w jaki sposób możemy wybrać, czy używać średników na końcach wierszy w JavaScript - zawsze ich używam, podczas gdy inni nigdy ich nie używają i nie ma to żadnego znaczenia dla funkcjonalności).