Podstawy układu semantycznego HTML5
Cześć wszystkim Tak rozpoczęła się długo oczekiwana Olimpiada. Życzę wszystkim uczestnikom wielkiego sukcesu i powodzenia, i oczywiście jestem fanem Rosji, ponieważ Sam jestem Rosjaninem. A teraz do tematu postu. W tym artykule porozmawiamy o nowoczesnym znaczniku HTML5, o jego zaletach i znaczeniu w ogóle. Nadal nie mogłem przejść do html5, myślałem, że w ogóle jest to nowy, nie wszystkie przeglądarki obsługują, w szczególności IE 7-8. Ale wszystko okazało się nie tak.
Obecnie HTML5 dla znaczników stron internetowych jest używany z pełną szybkością i prawie wszystkie nowoczesne przeglądarki obsługują ten znacznik, chociaż uważa się, że specyfikacja HTML5 jest wciąż rozwijana. Jeśli chodzi o wersję Internet Explorer 7-8, istnieje dla nich specjalna kulka, składająca się z małego javaScript. Moim zdaniem bardzo wygodnie jest pisać na html5 Przede wszystkim html5 to semantyka. Wykorzystuje się tutaj pewne elementy strukturalne, za pomocą których struktura dokumentu staje się łatwo czytelna i zrozumiała nie tylko dla osoby, ale również dla robota wyszukiwania.
Przełammy krok po kroku znaczniki HTML5 i zacznijmy od samego początku dokumentu - Doctype. Doctype w html5 jest już napisany o wiele łatwiej, dzięki czemu można go łatwo zapamiętać.
<! doctype html>
Oznaczenie kodowania jest napisane w następujący sposób.
<meta charset = "utf-8" />
I tak było
<meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
Poczuj różnicę? Kod stał się znacznie łatwiejszy i jest również bardzo łatwy do zapamiętania. Ponadto podczas łączenia skryptów i stylów nie ma już potrzeby określania typu.
<link rel = "arkusz stylów" href = "style.css" /> <skrypt src = "javascript.js"> </ script>
Następnie definiujemy język:
<html lang = "ru">
było:
<html lang = "ru" dir = "ltr" class = "client-nojs" xmlns = "http://www.w3.org/1999/xhtml">
Następną rzeczą, którą robimy, jest połączenie małego javascript, aby IE zrozumiał nowy znacznik.
<! - [if IE]> <script> document.createElement ('header'); document.createElement ('nav'); document.createElement („sekcja”); document.createElement („artykuł”); document.createElement („na bok”); document.createElement („stopka”); </ script> <! [endif] ->
Ten skrypt można również pobrać z serwera Google.
<! - [jeśli IE]> <skrypt src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif] ->
Następnie wymieniamy główne elementy strukturalne:
<sekcja> </ sekcja> - grupuje wszystkie bloki tematyczne (tworzone są sekcje), obsługiwane jest również zagnieżdżanie tego elementu
<nagłówek> </ nagłówek> - definiuje obszar nagłówka sekcji lub strony. Bardzo często w układzie ten tag jest otoczony nagłówkiem witryny.
<footer> </ footer> - określa stopkę sekcji lub strony. Zwykle ten tag oznacza piwnicę witryny, która zawiera informacje o prawach autorskich, kontaktach, warunkach użytkowania itp.
<nav> </ nav> - oznacza łańcuch nawigacji witryny. Może istnieć menu strony, blok okruchów chleba itp.
<article> </ article> - określa główną treść strony, na przykład oddzielny artykuł.
<aside> </ aside> - zawartość dodatkowa na stronie. Zazwyczaj te elementy oznaczają paski boczne.
Należy zauważyć, że nowe elementy HTML5 mają charakter wbudowany, tj. aby wyświetlić je poprawnie, musisz je utworzyć w blokach.
nagłówek, nav, sekcja, artykuł, na bok, stopka {display: block}
Na podstawie powyższego można naszkicować układ strony w HTML5
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> Przybliżony znacznik na html5 </ title> <link rel = "arkusz stylów" href = "style.css" /> < ! - [jeśli IE]> <skrypt src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif] -> </ head> <body > <header> Nagłówek strony <nav> Menu strony </ nav> </ header> <section id = "content"> <article> Artykuł </ article> <aside> Sidebar (sidebar) </ aside> </ section > <footer> Site Basement </ footer> </ body> </ html>
Jak widać, HTML5 ma wyraźną przewagę nad HTML4, zarówno pod względem znaczników, jak i SEO. O rozmowie CEO poniżej.
Oprócz głównych znaczników często używane są następujące znaczniki:
symbol zastępczy (symbol zastępczy = „Tekst”) - wyświetla napis w polu wprowadzania, a podczas pisania automatycznie znika. Ten atrybut pojawił się w html5, teraz nie ma już potrzeby używania dodatkowych skryptów do wyświetlania tekstu w polu, na przykład w polu wyszukiwania.
<mark> </ mark> - wybór ważnego słowa lub frazy. Zwróć uwagę na żółty kolor tła.
<adres> </ adres> - te znaczniki służą do wyświetlania adresu, na przykład adresu organizacji.
<video> </ video> - wyświetla wideo na stronie za pomocą standardowego odtwarzacza przeglądarki.
<audio> </ audio> - wyświetla nagranie audio na stronie przy użyciu standardowego odtwarzacza przeglądarki
Jedną z kluczowych cech HTML5 i moim zdaniem najważniejsza jest separacja wszystkich bloków przez ich robot wyszukujący pod względem ich znaczenia, tj. segmentacja stron internetowych. W html4 nie można było tego zrobić, ponieważ Standardowy znacznik div nie dodaje znaczenia elementowi wewnątrz znacznika. Dzięki użyciu nowych elementów nagłówka, artykułu, na bok, stopki, wszystko się zmienia. To znaczy z grubsza mówiąc, „mówią” robotom wyszukiwarek, do których elementów przywiązywać wagę, a które pomijać. Na przykład bot wyszukiwania łatwo zrozumie, że informacje zawarte między tagami <footer> </ footer> to prawa autorskie i podobne informacje dla użytkownika.
Elementy wpływające na indeksowanie wyszukiwarek
<article>
Tag artykułu jest jednym z najważniejszych przy segmentowaniu stron w witrynie. Ten znacznik wyraźnie wskazuje wyszukiwarkom, gdzie znajduje się główna treść witryny. Wszyscy wiemy, że treść jest przede wszystkim tym, do czego odwiedzający odwiedzają witrynę. Zakłada się, że PS zwróci maksymalną uwagę na zawartość zawartą między tagami <article> </ article>, odrzucając lub usuwając inne elementy do tła.
<sekcja>
Element sekcji dzieli wszystkie znaczniki na różne sekcje. Co to daje? Roboty wyszukiwania są dobrze zorientowane na dobrze zorganizowanej stronie internetowej. Jeśli poprawnie użyjesz znacznika <section>, możesz łatwo zbudować hierarchię informacji w dokumencie, a to z kolei poprawi indeksację witryny jako całości.
<header>
Używając tagu nagłówka, roboty wyszukiwania mogą łatwo znaleźć logo, nazwę strony, hasło, główną nawigację (menu główne) na stronie.
<nav>
Ten znacznik określa strukturę nawigacji na stronie.
Linki
W przeciwieństwie do HTML4 w HTML5, linki mają bardziej znaczące atrybuty.
Oto podstawowe atrybuty linków w HTML5:
alternate - linki do alternatywnych adresów tej samej strony
autor - linki związane z autorem strony internetowej
zewnętrzne - linki wskazujące na zasoby zewnętrzne
pomoc - linki do stron pomocy
następny - link prowadzący do następnej części strony
nofollow - link nie jest potwierdzony przez tę stronę
prev - link prowadzący do poprzedniej części strony
Pozostałe atrybuty można przeglądać. tutaj .
Oto mały przegląd znaczników HTML5. Jeśli chodzi o mnie, już dawno przeszedłem na układ z użyciem znaczników HTML5, a większość szablonów na moich stronach została już przetłumaczona na HTML5, ale dopiero teraz nie osiągają tego bloga.
To wszystko. Cześć wszystkim Do zobaczenia w następnych postach.
Czy przełączasz się na HTML5?
Sprawdzanie pisowni
Co to daje?Czy przełączasz się na HTML5?