1. Więc jaka jest odpowiedź?
2. Jak mogę stwierdzić, z jakich przeglądarek korzystają moje witryny?
3. Więc jak zacząć z HTML5?
4. Dlaczego programiści powinni być podekscytowani znaczeniem semantycznym?
5. Element <header>
6. Element <footer>
7. Element <nav>
8. Element <menu>
9. Element <article>
10. Element <sekcja>
11. Element <aside>
12. Więc czym jest Big Deal dla SEO?
13. I oczywiście…. Wady
14. streszczenie

Jeśli jeszcze tego nie zauważyłeś, sieć jest stale zmieniającym się i płynnym środowiskiem.

Nowe pomysły zmieniają sposób przeglądania stron internetowych. Ale w jaki sposób te zmiany zmieniają sposób, w jaki Google i inne popularne wyszukiwarki wyświetlają Twoją witrynę?

Wiele już napisano o tym, czy większość programistów powinna zacząć wykorzystywać HTML5 w witrynach swoich klientów. Niektórzy, jak ja, odpowiadają zdecydowanym „tak”, podczas gdy inni chcą czekać, aż HTML5 zostanie ogłoszony jako oficjalny obsługiwany standard internetowy przez W3C (World Wide Web Consortium).

Więc jaka jest odpowiedź?

Niestety, nie ma odpowiedzi, a zalety HTML5 różnią się w zależności od projektu. Na przykład, jeśli większość ruchu w sieci pochodzi z przeglądarek, takich jak starsze przeglądarki, takie jak Internet Explorer 7/8, może nie być najlepszym rozwiązaniem. Jeśli jednak większość ruchu w witrynie to doświadczona publiczność, która korzysta z nowoczesnych przeglądarek, takich jak Chrome, Safari i Firefox, powinieneś zastosować te nowe technologie, aby nie tylko poprawić swoje wrażenia podczas przeglądania, ale także wyznaczyć tempo dla innych nieżyjących już użytkowników.

Jak mogę stwierdzić, z jakich przeglądarek korzystają moje witryny?

Google Analytics na ratunek! Na szczęście możesz uzyskać wszystkie potrzebne dane z zestawu danych odbiorców> Technologia> Przeglądarka i system operacyjny w Analytics. Zobacz poniższy zrzut ekranu obszaru, do którego nawiązuję poniżej:

Więc jak zacząć z HTML5?

Rozpoczęcie pracy jest bardzo proste.

Jeśli już znasz HTML, nadszedł czas, aby zrozumieć, dlaczego znaczniki semantyczne oferowane przez HTML5 są tak atrakcyjne z punktu widzenia SEO.

Dlaczego programiści powinni być podekscytowani znaczeniem semantycznym?

Znaczniki semantyczne najlepiej określa się za pomocą specjalnych znaczników HTML, które opisują, jaki rodzaj zawartości zawiera. W bardzo prostych słowach: oferuje bardzo czysty kod - coś, co uwielbiają wszyscy SEO i programiści.

Aby zilustrować zalety oferowane przez HTML5, zastanów się, w jaki sposób elementy <h1> i <p> są używane do rozróżniania oddzielnych rodzajów tekstu na stronie. Te tagi <h1> i <h2> mają kluczowe znaczenie dla SEO na stronie. Są na górze łańcucha żywnościowego znaczników HTML i teoretycznie powinny opisywać bieżący temat stron.

HTML5 przenosi semantykę o kolejne tagi HTML dla większych części stron internetowych. Spójrz na niektóre z nich poniżej:

<header> </header> <nav> </nav> <menu> </menu> <article> </article> <section> </section> <aside> </aside> <footer> </footer>

Najprawdopodobniej można odgadnąć, do czego niektóre z powyższych znaczników powinny być używane na stronie internetowej.

Jeśli nie, tutaj jest bardzo krótki podział:

Element <header>

Element header jest używany do przechowywania elementów nagłówka dowolnego bloku powiązanej treści. Na przykład, globalny nagłówek strony internetowej, która zawiera logo witryn lub nawigację, byłby podstawowym przykładem tego, gdzie użyć tego tagu.

Element <footer>

Ten element jest używany w taki sam sposób jak element nagłówka, ale dla wspólnych elementów stopki bloku pokrewnej treści. Przykładem mogą być łącza do narzędzi w stopce witryny.

Element <nav>

Ten jest dość prosty, ale może być również nadużywany. Ma to na celu zdefiniowanie głównych obszarów nawigacji na stronie, aw większości przypadków będą to grupy linków. Pamiętaj, że tylko dlatego, że kilka linków może znajdować się blisko siebie, nie kwalifikuje się do użycia elementu <nav> .

Element <menu>

Ten element jest podobny do elementu <nav> , ale jest bardziej zrelaksowany. Ten element może być użyty do grupowania linków, które działają jako pod-nawigacja. Innym użytkownikiem są ikony mediów społecznościowych, które prowadzą do stron mediów społecznościowych witryny.

Element <article>

Ten element jest używany do samodzielnych kompozycji strony internetowej. Na przykład lista postów w blogu witryny będzie zawierać tag <article> . Może to być również wykorzystywane do innych rodzajów treści. Po prostu pamiętaj o jego samodzielnym użytkowaniu.

Element <sekcja>

Element <section> jest często nadużywany. Większość ludzi pomyślałaby o użyciu znacznika sekcji jako elementu poziomu bloku kontenera, który zawierałby część witryny. To jest niepoprawne.

Prawdziwym sposobem użycia elementu sekcji jest myślenie o nim w kategoriach grupowania określonych części treści. W sekcji możesz mieć wiele nagłówków, aby zawęzić zakres sekcji i może być wiele sekcji wewnątrz określonego fragmentu treści. Whew! Jeśli czujesz się zdezorientowany (wiem, że byłem pierwotnie), nie martw się. Możesz sprawdzić ten artykuł Bruce'a Lawsona, aby uzyskać bardziej szczegółowy widok elementu sekcji: Prognoza elementu sekcji HTML5 .

Element <aside>

To kolejny często niewłaściwie używany element. Większość ludzi myśli o tym elemencie jako kontenerze paska bocznego. Lepszym sposobem zrozumienia tego, jak używać elementu <aside> , jest zarezerwowanie go dla treści powiązanych stycznie poza artykułem. Jednym ze sposobów, w jaki możesz go użyć, jest posiadanie elementu paska bocznego, który zawiera blok reklamy nad panelem blogroll. Blogroll jest stycznie powiązany z artykułem na blogu, ale blok reklamy nie jest powiązany stycznie z artykułem. Dlatego użycie znacznika <aside> dla całego paska bocznego nie opisuje dokładnie jego zawartości.

Więc czym jest Big Deal dla SEO?

Jest to dla nas nie tylko łatwe do zrozumienia, ale także znacznie łatwiejsze do indeksowania i indeksowania przez Google Bot ze względu na czysty znacznik. Tradycyjne metody definiowania kontenerów nagłówka i stopki składały się ze znaczników <div> z unikalnymi identyfikatorami, aby kierować je za pomocą CSS do stylizacji. Chociaż jest to skuteczny sposób robienia rzeczy, jest znacznie bardziej chaotyczny niż używanie określonych tagów dla każdego obszaru treści.

Spójrz na przykład poniżej, jak wiele bieżących witryn używa tagów <div> do utworzenia podstawowego dwuzakresowego układu z nagłówkiem i stopką:

<div id = ”header”> <ul id = ”nav”> </ul> <! - End #nav -> </div> <! - End #header -> <div id = ”treść ”> <Div id =" blogpost "> <h1> To jest mój blogpost </h1> <p> To jest mój pierwszy akapit. </p> </div> <! - End #blogpost -> </ div> <! - End #content -> <div id = ”sidebar”> <div id = "blogroll"> <p> Moja zawartość blogroll. </p> </div> <! - Koniec #blogroll -> </div> <! - End #sidebar -> <div id = ”footer”> <p> Moja zawartość stopki. </p> </div> <! - End #footer ->

Poniżej znajduje się ten sam układ z wykorzystaniem znaczników HTML5:

<header> <nav> </nav> </header> <div id = ”content”> <article id = "blogpost"> <section> <h1> To jest mój blogpost </h1> <p> To jest mój pierwszy akapit. </p> </section> </article> <! - End #blogpost -> </div> <! - End #content -> <div id = ”sidebar”> <id na bok = "blogroll"> <p> Moja zawartość blogroll. </p> </aside> <! - Koniec #blogroll -> </div> <! - Koniec #sidebar -> <footer> <p> Moja treść stopki. </p> </footer>

Chociaż marża może wydawać się krótsza, zdecydowanie jest bardziej semantyczna. Elementy <div> w pierwszym przykładzie nie mają znaczenia semantycznego poza podanymi atrybutami ID. Podczas gdy drugi przykład wykorzystuje nowe znaczniki semantyczne HTML5, aby lepiej opisać treść i ogólny układ strony. Będzie to łatwo zrozumiałe dla Google Bot lub czytnika ekranu ze względu na jego logiczne znaczniki.

I oczywiście…. Wady

Niestety, z powodu braku standaryzacji między przeglądarkami, obecnie te tagi mogą być interpretowane inaczej lub całkowicie ignorowane. Najczęściej dzieje się tak w starszych wersjach programu Internet Explorer. Na szczęście istnieją metody, aby „nauczyć” przeglądarkę, czym są te nowe tagi, aby odpowiednio je stylizować za pomocą CSS. Wystarczy umieścić ten skrypt w sekcji <head> znaczników, aby umożliwić korzystanie z nowych tagów dla starszych przeglądarek:

<! - [jeśli IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <! [endif] ->

** Kod dzięki uprzejmości Remy'ego Sharpa Projekt HTML5 Shiv

Bez nadmiernego przygotowania technicznego, po uruchomieniu powyższego skryptu jQuery tworzy on nowe elementy wewnątrz modelu obiektu dokumentu (DOM) programu Internet Explorer, aby zrozumieć nowy znacznik. Najważniejsze jest to, że działa i to wszystko ma znaczenie dla większości ludzi. Jedyną cechą, którą niektórzy ludzie mają w odniesieniu do powyższej poprawki, jest to, że jest ona zależna od JavaScript. Jednak odsetek użytkowników przeglądających z wyłączoną obsługą JavaScript spada od kilku lat i jest bardzo małą częścią ogólnej liczby użytkowników w sieci.

Krótko mówiąc, niemożliwe jest zaspokojenie każdego środowiska w sieci. W zależności od odbiorców może to być czas, aby przestać zaspokajać potrzeby ludzi, którzy nadal używają przestarzałych technologii, takich jak IE6, i zacząć nagradzać użytkowników, którzy nadążają z duchem czasu: D.

streszczenie

Jako zwolennicy optymalizacji, czystego kodu i nowatorskich stron internetowych, w miarę możliwości zalecamy używanie znaczników HTML5.

Czemu? Aby wyprzedzić krzywą i zacząć wdrażać wcześnie, aby w pełni wykorzystać nową, gorącą technologię, którą możemy udoskonalić na długo zanim stanie się standardem.

Zrozumiałe jest, że ludzie mogą być zmęczeni używaniem tych nowych technologii z obawy, że ich środowisko przeglądarki użytkowników nie będzie się z nimi dobrze bawić. Istnieje jednak wiele narzędzi, które pomagają oswoić różne sposoby korzystania z elementów HTML5 przez starsze przeglądarki.