Układ strony semantycznej, pomaga robotowi zrozumieć Twoją witrynę

1. Czym jest układ semantyczny?
2. Dlaczego układ semantyczny strony jest tak ważny?
3. Jak wdrożyć układ strony semantycznej?
4. Znaczniki struktury dokumentu
5. Tagi tekstowe
6. Tagi multimedialne
7. Znaczniki korelacji

Im głębiej studiujesz HTML i tworzenie stron internetowych, tym częściej słyszysz tajemnicze słowo „semantyka”. W tym artykule rozwiążemy zagadkę i określimy układ semantyczny. Przeanalizujmy główne tagi używane do opisu struktury semantycznej.

Czym jest układ semantyczny?

Układ semantyczny to badanie znaczeń słów i wyrażeń. W html nic więcej niż pisanie elementów ze znaczeniem. Element semantyczny jasno opisuje jego znaczenie zarówno dla przeglądarek, jak i programistów.

Spójrzmy na różnicę między elementem semantycznym a zwykłym.

Na przykład div lub span - proste elementy, patrząc na nie, nie możemy zrozumieć, jakiego rodzaju treści zawierają. Może to być tylko tekst, zdjęcie lub inne znaczniki.

Teraz forma semantyczna, tabela i artykuł to zupełnie inna sprawa. Dopiero po przeczytaniu nazw możemy łatwo zrozumieć, co znajduje się w tych znacznikach. Przykład zwykłego i semantycznego składu:

<! - regularny układ bloków ->

<div class = "content">

<img src = "/pictures.jpg" alt = "">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis. </ p>

<a href = ""> Czytaj dalej </a>

</ div>

<! - układ semantyczny ->

<article>

<img src = "/pictures.jpg" alt = "">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxim quod dolor exerciseum, perspiciatis laborum, sunt, magnum illo ipsam molestiae ullam amet adipisci et omnis! </ p>

<a href = ""> Czytaj dalej </a>

</ article>

Mam nadzieję, że na tym etapie zauważysz różnicę między typami tagów. Chcę od razu zauważyć, że nie są to jedyne tagi, jest ich wiele, ale wraz z pojawieniem się HTML5 stało się jeszcze bardziej. Następnie poznajemy ich.

Dlaczego układ semantyczny strony jest tak ważny?

Dobrze napisany CSS może ukryć kiepski układ HTML przed oczami użytkownika. Ale nie możemy tego ukryć przed robotami wyszukującymi, wtyczkami do przeglądarek, e-czytnikami i innymi narzędziami i urządzeniami.

Na tej podstawie układ semantyczny jest obowiązkowy, jeśli chcesz, aby Twoja witryna była dostępna dla wszystkich odwiedzających z różnych urządzeń, a także w rankingu wyszukiwarek. Nie zapominaj o tekście, który również powinien być dobrze skonstruowany, aby użytkownicy czuli się swobodnie czytając.

Jak wdrożyć układ strony semantycznej?

Jest jedna reguła, kiedy piszemy, musimy użyć znaczników, które w konkretnym przypadku mogą najdokładniej przekazać wartość i rodzaj treści, wyszukiwarki i programy. Jeśli nie ma odpowiednich tagów, używamy zwykłych tagów. div

Możemy pogrupować najpowszechniejsze i najważniejsze elementy w cztery grupy:

• Znaczniki struktury dokumentu
• Tagi tekstowe
• Tagi multimedialne
• Znaczniki korelacji

Znaczniki struktury dokumentu

W przeszłości głównym elementem, z którego został utworzony, był element div struktura dokumentu html W3C zauważył, że programiści używali słów nagłówek, stopka, menu itp. W nazwach id i klas. Który opisał semantyczną zawartość elementu. W ten sposób pojawiły się nowe znaczniki semantyczne w HTML5.

nagłówek: element używany jako pojemnik na logo, nazwę strony i menu. Również do definiowania nagłówków, artykułów itp.

stopka: Używany głównie do opisania dolnej części strony, zazwyczaj zawiera informacje o autorze, kontaktach, prawach autorskich, dodatkowym menu i przycisku prowadzącym na górę strony.

main: element wysokiego poziomu, używany jako kontener dla unikalnej zawartości na stronie, która nie powtarza się na innych stronach witryny.

nav: element do tworzenia nawigacji w witrynie. Nav zazwyczaj znajduje się w nagłówku (stopce) i stopce, a także może być użyty na boku (pasku bocznym) witryny.

sekcja: Opisuje sekcje dokumentu, powinien zawierać tytuł h1 - h6

na bok: Używany do identyfikacji treści powiązanej z główną treścią na stronie. Na przykład element na bok może zawierać definicję terminu w artykule, reklamy, dodatkowe informacje na stronie.

artykuł: Jest to samodzielny element, który jest używany do opisania artykułu na stronie, blogu oraz publikowania na forum. Może zawierać element nagłówka i stopki.

Tagi tekstowe

Istnieje wiele tagów do pracy z tekstem na stronie, ale nie wszystkie z nich są semantyczne. Na przykład, możesz użyć spanu do nadania stylu tekstowi, ale nie przesyła on informacji o treści do przeglądarki.

h1, h2, h3, h4, h5 i h6: używane do oznaczania nagłówków. Najwyższy lub najważniejszy poziom to h1, a następnie poziom h2 - h6 w kolejności malejącej ważności.

strong: znacznik dołączony do ważnego tekstu, z reguły jest pogrubiony.

znak: używany do zaznaczania tekstu w określonym kontekście. Na przykład można go użyć do podświetlenia każdego wystąpienia klucza wyszukiwania na stronie wyników wyszukiwania.

cytuj: tagi są zwykle oznaczone nazwami książek, piosenek, filmów i programów telewizyjnych.

blockquote i q: elementy służą do wstawiania cytatów z tekstu z innego źródła.

czas: znacznik może być użyty do poinformowania przeglądarki, wyszukiwarek i innych urządzeń, że określony fragment treści reprezentuje czas i datę.

Tagi multimedialne

HTML5 zawiera również trzy znaczniki, które definiują rodzaj zawartości multimedialnej. Tagi informują przeglądarkę dokładnie, jak wyświetlić tę treść. jak również nadają znaczenie treści.

audio: Służy do dodawania jednego lub więcej dźwięków do strony, wyświetlanej jako odtwarzacz audio.

wideo: jest podobny do znacznika audio, ale służy do dodawania treści wideo do dokumentu.

picture: element obrazu daje programistom możliwość bardziej elastycznego wyświetlania obrazu na stronie. Często używany w układzie adaptacyjnym, ponieważ może zawierać kilka obrazów jednocześnie, które są wyświetlane w określonych warunkach multimedialnych.

Znaczniki korelacji

Niektóre znaczniki są używane do tworzenia połączeń między innymi elementami. Na przykład znacznik listy punktowej ul mówi przeglądarce, że elementy li są powiązane i powinny pojawić się w określonej kolejności. Więcej tagów:

ol: numerowany znacznik listy, podobny do tagu ul

rysunek: używany do grupowania takich treści jak obrazy, grafika, może zawierać tytuł fig.

adres: opisuje informacje kontaktowe na stronie. I łączy go z autorem artykułu lub strony.

Jeśli jesteś nowym użytkownikiem HTML, spróbuj zastosować wszystkie te znaczniki, aby utworzyć semantyczny układ strony w następnym projekcie. Nie używaj elementów, jeśli nie jesteś pewien, czy jest tam potrzebny, czy nie, użycie właściwego tagu jest bardzo ważnym punktem. Lepiej poświęć trochę czasu na dogłębne przestudiowanie. Przyniesie owoce w przyszłości.