- DOCTYPE i meta tagi w tytule strony
- Tytuł strony
- Nawigacja strony
- Treść na stronie
- Projekt artykułu
- Kolumna paska bocznego lub widżetu
- Znacznik sekcji
- Piwnica witryny stopki
- Wniosek
Dzisiaj porozmawiamy o semantyce w HTML5. Napisałem już mały przeglądowy artykuł o nowe znaczniki semantyczne w HTML5 . Polecam zapoznać się z nim przed przeczytaniem tego artykułu. Teraz zajmiemy się tym zagadnieniem bardziej szczegółowo, w jaki sposób poprawnie i poprawnie utworzyć strukturę semantyczną dokumentu HTML5.
W tym artykule stopniowo stworzymy stronę html i udekorujemy ją znacznikami semantycznymi HTML5.
Obraz - struktura semantyczna dla strony HTML5.
DOCTYPE i meta tagi w tytule strony
Zacznijmy od standardowego szablonu dokumentu HTML5 i dodaj metatagi do głowy:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Tytuł strony </ title> <meta name = "słowa kluczowe" content = "Słowa kluczowe i frazy oddzielone przecinkami "> <meta name =" description "content =" Opis zawartości strony, 1-2 zdania. "> </ head> <body>Dodałem tag <meta name = "keywords" content = "">, który odpowiada za słowa kluczowe. A tag <meta name = "description" content = "">, który odpowiada za opis strony. W celu optymalizacji SEO te znaczniki są wymagane. Wymagane również, aby poprawnie wypełnić tag <title>. Tytuł strony powinien być unikalny dla całej witryny i zawierać w tytule całą istotę strony, dla której jest wymieniony.
Chodź. HTML5 ma nowe znaczniki, które służą do znaczeń semantycznych dokumentu. Są to tagi nagłówka, nawigacji, głównego, artykułu, na bok, stopki itp. Mapując, działają tak jak zwykłe znaczniki <div>, czyli są to elementy blokowe. Ale jeśli <div> nie ma obciążenia semantycznego, to nagłówek, nav, main i inne już muszą być używane tylko w sensowny sposób.
Tytuł strony
Nagłówek strony jest tworzony w tagu nagłówka. Zauważ, że tytuł strony jest zapisany za pomocą znacznika h1.
<! - Strony nagłówka -> <nagłówek> <h1> Tytuł strony </ h1> </ header>Jeśli mamy również hasło obok tytułu, umieść je w p, div lub span.
<! - Strony nagłówka -> <header> <h1> Tytuł strony </ h1> <p> hasło strony </ p> </ header>Komentarz tagu H1
Należy zauważyć, że w HTML5 znacznik H1 jest używany do określenia nagłówka kontenera, w którym się znajduje (może to być nagłówek, sekcja, artykuł itp.)
Przed pojawieniem się tagów HTML5 semantyka była nieco inna i inna. W HTML4 na stronę może być tylko jeden nagłówek H1! Z reguły był to tytuł artykułu lub tytuł strony (na przykład, jeśli jest to strona rubryczna wyświetlająca kilka artykułów). H2 został użyty do napisów lub do sekcji głównego artykułu. H3 dla podsekcji i tak dalej.
Nawigacja strony
Projekt nawigacji głównej witryny powinien znajdować się w tagu nav. Należy również pamiętać, że dobrą praktyką jest organizowanie nawigacji według elementów listy.
<! - Nawigacja na stronie głównej -> <nav> <ul> <li> <a href="#"> Strona główna </a> </ li> <li> <a href="#"> Portfolio < / a> </ li> <li> <a href="#"> Galeria </a> </ li> <li> <a href="#"> Kontakty </a> </ li> </ ul > </ nav>Treść na stronie
Główna treść strony jest rysowana w głównym znaczniku. Może to być jeden artykuł lub kilka podglądów artykułów, jeśli chodzi o stronę blogu z kilkoma postami. W głównym znaczniku nie można umieścić paska bocznego, nagłówka strony, stopki ani głównej nawigacji!
<! - Główna zawartość stron -> <main> ... główna zawartość strony ... </ main>Projekt artykułu
Tag artykułu służy do pakowania artykułów. Ogólnie rzecz biorąc, ten tag zawiera blok treści, który można wyjąć z kontekstu strony i użyć oddzielnie w innym miejscu. Może to być artykuł (pełny artykuł lub podgląd), post na forum itp.
W poniższym przykładzie pokazałem projekt artykułu w kontekście, wewnątrz głównego znacznika. Artykuł zawiera blok nagłówka z tytułem artykułu. Data publikacji artykułu jest ustawiana przez specjalny znacznik czasu, który jest wyświetlany jako zwykły element wstawiany. Znacznik czasu ma specjalny atrybut, w którym czas publikacji musi być określony w formacie maszynowym. Może to być tylko data datetime = "2015-09-30" lub wskazujące godziny, minuty i sekundy datetime = "2015-09-30T15: 25: 55". Parametr pubdate wskazuje, że artykuł został opublikowany w tym samym czasie, w którym został napisany. Jeśli jest to wiadomość, może się zdarzyć, że czas wiadomości jest jeden, a czas publikacji jest inny, w tym celu należy dwukrotnie podać znacznik czasu i opublikować tylko pubdate tag.
<main> ... <! - Article -> <article> <! - Nagłówek artykułu, jeśli w nagłówku mamy więcej niż nagłówek -> <header> <! - Tytuł artykułu -> <h1> Artykuł title </ h1> <! - Data publikacji artykułu -> <time datetime = "2015-09-30T15: 25: 55" pubdate> 30 września </ time> </ header> <p> Lorem ipsum dolor sit amet , consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <! - Podtytuł strony -> <h2> Podtytuł artykułu </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde? </ P> <footer> <a href="#"> Czytaj więcej </a> <a href="#"> Komentarze </a> </ footer> </ article> ... </ main>Z powyższego przykładu widać, że znaczniki nagłówka i stopki zostały użyte w artykule, aby podświetlić nagłówek i stopkę artykułu.
Kolumna paska bocznego lub widżetu
Dla każdego elementu paska bocznego używamy bloku bocznego. W środku tworzymy nagłówek ze znacznikiem h1. Tak więc kolumna paska bocznego może wyglądać tak:
<! - Pasek boczny -> <div class = "sidebar"> <! - Widget paska bocznego -> <aside> <h1> Tytuł widgetu </ h1> ... </ aside> <! - Widget na pasku bocznym -> <aside> <h1> Ostatnie wpisy </ h1> ... </ aside> <! - Widżet paska bocznego -> <aside> <h1> Popularne komentarze </ h1> ... < / na bok> </ div>Znacznik sekcji
Znacznik sekcji jest używany do reprezentowania grupy lub sekcji tematycznie powiązanych treści, a jej użycie jest podobne do artykułu, z główną różnicą polegającą na tym, że w elemencie <section> nie ma znaczenia treści poza kontekstem samej strony. Zaleca się używanie znaczników (<h1> - <h6>) w celu oznaczenia tematu sekcji.
Na przykład artykuł, który aktualnie czytasz, może zawijać każdy akapit w tagu <section>. Na przykład z tagiem sekcji możesz wybrać bloki treści na stronie docelowej. Brzmi jak definicja elementu div, który jest często używany jako kontener treści. Różnica polega na tym, że div nie ma znaczenia semantycznego i nic nie mówi o treści w nim zawartej. Znacznik sekcji, przeciwnie, jest używany do wyraźnego pokazania, że treść w nim jest powiązana w znaczeniu. Możesz zastąpić niektóre ze swoich znaczników div sekcją sekcji, ale zawsze odpowiedz na pytanie: „Czy ta treść jest związana, czy nie?”
Przykład użycia znacznika sekcji na liście z listą miast:
<h1> Oddzielne wydarzenie </ h1> <sekcja> <header> <h2> Miasta </ h2> </ header> <p> Dołącz do nas w tych miastach w 2010 r. </ p> <sekcja> <nagłówek> < h3> Seattle </ h3> </ header> <p> Podążaj drogą żółtej cegły. </ p> </ section> <section> <header> <h3> Boston </ h3> </ header> <p> To Beantown swoim przyjaciołom. </ P> </ section> <sekcja> <header> <h3> Minneapolis </ h3> </ header> <p> Jest tak <em> miły </ em>. </ P> < / sekcja> </ sekcja> <mała> Zakwaterowanie nie jest przewidziane. </ small>Piwnica witryny stopki
Stopka witryny jest oznaczona tagiem <footer>
<! - Stopka witryny -> <footer> <p class = "copyright"> © 2015 Rightblog.ru Prawa autorskie </ p> </ footer>Wniosek
Możesz użyć narzędzia do sprawdzenia struktury strony. Zarys HTML5 . Pokazuje strukturę strony dla bloków i nagłówków.
Semantyka w HTML5 nie ogranicza się do powyższych znaczników w artykule. Ale korzystając z powyższych przykładów, możesz odświeżyć znaczniki i uczynić witrynę bardziej przyjazną dla wyszukiwarek, co wpłynie na wyższy ranking witryny w wynikach wyszukiwania.
Kontynuując temat, możesz odkrywać inne nowe znaczniki HTML5. Jak również mikro formaty do formatowania i strukturyzacji danych, takie jak na przykład schema.org
Ważna uwaga dotycząca używania tagów HTML5. Specyfikacja nie określa ścisłych reguł dotyczących używania znaczników semantycznych, wskazane są tylko zalecenia dotyczące ich użycia. Jeśli nie rozumiesz lub nie wiesz, gdzie i który tag HTML5 ma zostać użyty, lepiej jest użyć div - aby nie zaszkodzić ani nie zakłócić struktury dokumentu.
Artykuły i materiały na ten temat:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp
Adipisci beatae eaque unde?
Możesz zastąpić niektóre ze swoich znaczników div sekcją sekcji, ale zawsze odpowiedz na pytanie: „Czy ta treść jest związana, czy nie?