Rozumiem, jak możesz użyć CSS ze znacznikami span lub p, aby udawać tagi hx, ale jak byś użył CSS do stylizowania tekstu bez nawet znaczników p lub span?
joshuahedlund
Półnarożna, półpoważna odpowiedź brzmi: spróbuj się bez nich obejść. Używaj <span>do wszystkiego i sprawdź, czy możesz osiągnąć to, czego chcesz, korzystając wyłącznie z CSS. Prawdopodobnie wiele się nauczysz, próbując celować we właściwe zakresy i sprawić, by zachowywały się jak inne elementy. (Chociaż najbardziej prawdopodobną lekcją jest „nie rób tego”)
Nathan Long
Odpowiedzi:
67
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.
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ą.
„Dlaczego mielibyśmy mieć ściany, kiedy mamy farby?” ~ To wspaniałe pytanie? Dzięki!
Evik James
Myślę, że nazwy znaczników są mylącą częścią znaczników - H1, H2 itp. Mogą być używane przez czytniki ekranu, a także osoby, które je oglądają. Powiedziawszy to, 99% świata zobaczy stronę, a zatem tak bardzo, jak to denerwuje miłośników SEO, tagi H są wizualnymi znacznikami, tak jak <b>kiedyś oznaczono pogrubienie.
Chris S
@ChrisS - Nie sądzę, że jest to mylące. Tagi są zawsze przeznaczone do odczytu przez maszyny; który obejmuje przeglądarki tak samo jak czytniki ekranu. I nie, naprawdę <h1>nie jest wizualnym znacznikiem. Większość przeglądarek wyświetli duży i pogrubiony tekst, jeśli nie powiedziano inaczej, ale style strony lub preferencje użytkownika mogą to zmienić. <h1>jest wskaźnikiem znaczenia: „to mój główny nagłówek”. Jeśli witryna lub użytkownik chce, aby główne nagłówki były małe i pomarańczowe, to właśnie to zobaczą.
Nathan Long
1
„tak jak <b> kiedyś oznaczało pogrubienie” - czy ktoś zmienił znaczenie słowa, <b>nie mówiąc mi o tym? To wciąż oznacza pogrubienie, prawda? Oczywiście wolę tagi semantyczne <em>i <strong>…
ghoppe
13
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.
@ user606723 która część? Pierwszy akapit to podstawowa wiedza na temat SEO, o której wspomina własny przewodnik SEO firmy Google (PDF). Nie wiem, czy tabele są gdzieś udokumentowane, ale widziałem to kilka razy w wynikach wyszukiwania - zawierają one 2-4 wiersze z tabeli na stronie docelowej.
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.
Nie. <b> i <i> są przestarzałe. Jeśli chcesz, aby Twój tekst wyglądał na rygorystyczny / kursywą, użyj CSS. Jeśli chcesz przekazać znaczenie pogrubionego / kursywy, użyj <strong> i <em>.
Mircea Chirea
4
@iconiK Przestarzałe przez kogo? Rozumiałem również, że w standardzie HTML5 był on „przestarzały”. I nie bez powodu - istnieje wiele tradycyjnych zastosowań kursywy innych niż wyróżnienie [na przykład tytuły książek lub słowa obce] - wyraźne oznaczenie „kursywa” [zamiast znacznika semantycznego] nie różni się od bezpośredniego wstawiania wielkich liter i interpunkcja. Jeśli jednak chcesz użyć <span class="proper-name"><span class="question-sentence">...
Random832
1
jest przestarzałe, ponieważ HTML nie powinien w ogóle definiować formatowania prezentacji. Dlatego piszemy css w plikach css (a nie inline), więc mamy odrębne style dla człowieka, drukarki, czytnika ekranu, telefonu komórkowego, itp. Czytnika ebooków, czytnika safari itp.
sod
3
@sod Nie pytałem, dlaczego jest przestarzałe, kwestionowałem twierdzenie, że w ogóle jest przestarzałe. I nie jest jasne, dlaczego kursywą jest bardziej „formatowanie prezentacji” niż wielkie litery i znaki interpunkcyjne. To część treści.
Random832
2
@iconiK, „praktycznie przestarzałe” nie ma wpływu na stwierdzenie, czy coś jest przestarzałe. Biorąc pod uwagę, że są one przewidziane w specyfikacji HTML5 i w żaden sposób nie wymieniony jako przestarzałe , chciałbym <strong> Stan ly że oni nie przestarzałe.
zzzzBov
1
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).
<span>do wszystkiego i sprawdź, czy możesz osiągnąć to, czego chcesz, korzystając wyłącznie z CSS. Prawdopodobnie wiele się nauczysz, próbując celować we właściwe zakresy i sprawić, by zachowywały się jak inne elementy. (Chociaż najbardziej prawdopodobną lekcją jest „nie rób tego”)Odpowiedzi:
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.źródło
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ą.źródło
<b>kiedyś oznaczono pogrubienie.<h1>nie jest wizualnym znacznikiem. Większość przeglądarek wyświetli duży i pogrubiony tekst, jeśli nie powiedziano inaczej, ale style strony lub preferencje użytkownika mogą to zmienić.<h1>jest wskaźnikiem znaczenia: „to mój główny nagłówek”. Jeśli witryna lub użytkownik chce, aby główne nagłówki były małe i pomarańczowe, to właśnie to zobaczą.<b>nie mówiąc mi o tym? To wciąż oznacza pogrubienie, prawda? Oczywiście wolę tagi semantyczne<em>i<strong>…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.
źródło
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.
źródło
W przypadku HTML5 sprawdź pogrubienie i kursywę w HTML5 .
Podsumowanie:
źródło
<span class="proper-name"><span class="question-sentence">...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.
źródło
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).źródło