Co to jest Semantic HTML i dlaczego warto z niego korzystać

Ważną zasadą ruchu Web Standards, która jest odpowiedzialna za branżę, którą mamy dzisiaj, jest pomysł wykorzystania elementów HTML do tego, czym są, a nie do tego, w jaki sposób mogą domyślnie wyświetlać się w przeglądarce. Jest to znane jako semantyczne HTML.

Co to jest Semantic HTML

Semantyczny HTML lub semantyczny znacznik to HTML, który wprowadza znaczenie na stronę internetową, a nie tylko na prezentację. Na przykład a

znacznik wskazuje, że załączony tekst jest akapitem.

Jest to zarówno semantyczne, jak i prezentacyjne, ponieważ ludzie wiedzą, jakie akapity i przeglądarki wiedzą, jak je wyświetlać.

Po drugiej stronie tego równania znaczniki, takie jak i nie są semantyczne, ponieważ definiują tylko sposób, w jaki tekst powinien wyglądać (pogrubiony lub kursywny) i nie mają żadnego dodatkowego znaczenia dla znaczników.

Przykłady semantycznych znaczników HTML obejmują znaczniki nagłówka

przez

,

, i . Istnieje wiele innych semantycznych znaczników HTML, które można wykorzystać podczas tworzenia witryny zgodnej ze standardami.

Dlaczego powinieneś zadbać o semantykę

Korzyści z pisania semantycznego HTML wynikają z tego, co powinno być celem każdej strony internetowej - chęcią komunikowania się. Dodając znaczniki semantyczne do dokumentu, podajesz dodatkowe informacje na temat tego dokumentu, co pomaga w komunikacji. W szczególności znaczniki semantyczne wyjaśniają przeglądarce znaczenie strony i jej zawartość.

Ta przejrzystość jest również komunikowana z wyszukiwarkami, zapewniając, że właściwe strony są dostarczane dla właściwych zapytań.

Semantyczne tagi HTML dostarczają informacji o zawartości tych tagów, które wykraczają poza to, jak wyglądają na stronie. Tekst zamknięty w ramce Tag jest natychmiast rozpoznawany przez przeglądarkę jako pewien rodzaj języka kodowania.

Zamiast próbować renderować ten kod, przeglądarka rozumie, że używasz tego tekstu jako przykładu kodu do celów artykułu lub samouczku online.

Używanie znaczników semantycznych daje więcej możliwości w zakresie stylizowania treści. Być może dziś wolisz, aby twoje próbki kodu wyświetlały się w domyślnym stylu przeglądarki, ale jutro chcesz wywołać je z szarym kolorem tła, a później chcesz zdefiniować precyzyjnie rozmieszczoną czcionkę lub stos czcionek do użycia dla twoje próbki. Możesz łatwo zrobić wszystkie te rzeczy, używając semantycznych znaczników i elegancko zastosowanego CSS.

Użyj znaczników semantycznych poprawnie

Jeśli chcesz używać znaczników semantycznych do przekazywania znaczenia, a nie do celów prezentacji, musisz uważać, aby nie używać ich niepoprawnie po prostu dla ich typowych właściwości wyświetlania. Niektóre najczęściej używane niewłaściwe znaczniki semantyczne obejmują:

• blockquote - Niektórzy używają

  tag dla wcięcia tekstu, który nie jest cytatem. Dzieje się tak dlatego, że cytaty bloków są domyślnie wcięte. Jeśli chcesz skorzystać z wcięcia, ale tekst nie jest cytatem blokowym, użyj zamiast tego marginesów CSS.

• p - Niektóre edytory stron internetowych używają (niezłamana przestrzeń zawarta w paragraofie), aby dodać więcej przestrzeni między elementami strony, zamiast definiować rzeczywiste akapity dla tekstu tej strony. Podobnie jak w przypadku wcześniej wspomnianego przykładu wcięcia, należy użyć właściwości stylu marginesu lub wypełnienia, aby dodać spację.
• ul - podobnie jak cytowanie bloku, zamykając tekst wewnątrz
  tag wcina ten tekst w większości przeglądarek. Jest to zarówno semantycznie niepoprawny i nieprawidłowy HTML, jak tylko
  • znaczniki są ważne w ramach
    etykietka. Ponownie użyj stylu marginesu lub wypełnienia do wcięcia tekstu.
  • h1-h6 - Znaczniki nagłówka mogą być używane do zwiększania i wyszarzania czcionek, ale jeśli tekst nie jest nagłówkiem, nie powinien znajdować się wewnątrz znacznika nagłówka. Jeśli chcesz zmienić rozmiar lub wagę określonego tekstu na stronie, użyj właściwości CSS czcionki i rozmiaru czcionki.

  Korzystając z znaczników HTML, które mają znaczenie, tworzysz strony, które przekazują więcej informacji niż otaczając wszystko

  tagi.

  Które znaczniki HTML są semantyczne?

  Chociaż prawie każdy znacznik HTML4 i wszystkie znaczniki HTML5 mają znaczenie semantyczne, niektóre znaczniki mają głównie charakter semantyczny.

  Na przykład HTML5 przedefiniował znaczenie i znaczniki są semantyczne. The znacznik nie ma większego znaczenia, ale tekst, który jest zwykle renderowany pogrubieniem. The znacznik również nie przekazuje dodatkowego znaczenia lub nacisku, ale raczej definiuje tekst, który zwykle jest pisany kursywą.

  Semantyczne znaczniki HTML

  	Skrót
  	Akronim
  	Długi cytat
  	Definicja
  	Adres autora (ów) dokumentu
  	Cytat
  	Odniesienie do kodu
  	Tekst teletekstu
  	Podział logiczny
  	Ogólny kontener stylowy
  	Usunięty tekst
  	Wstawiony tekst
  	Nacisk
  	Silny nacisk
  	Nagłówek pierwszego poziomu
  	Drugi nagłówek
  	Nagłówek trzeciego poziomu
  	Nagłówek czwartego poziomu
  	Nagłówek na piątym poziomie
  	Szósty poziom nagłówka
  	Przerwa tematyczna
  	Tekst wprowadzany przez użytkownika
  	Wstępnie sformatowany tekst
  	Krótka liniowa oferta
  	Przykładowe wyjście
  	Indeks
  	Napisany u góry
  	Tekst zmienny lub zdefiniowany przez użytkownika