Analiza outline html5

Outline w HTML5

Co to jest Outline w HTML5? Dlaczego warto pamiętać o tym algorytmie? Specyfikacja nowej wersji języka hipertekstowego html przyniosła wiele ciekawych nowości. Dla developerów to kolejne elementy, które należy uwzględniać. Czy w SEO też jest to ważne?

Co to jest outline?

Outline html5 – Jest to kategoryzowany spis elementów, które znajdują się na naszej stronie.

Czym jest Outline w HTML5?

Podstawową rzeczą o której trzeba pamiętać, kiedy tworzymy  strukturę nowej witryny – jest to, że istnieje coś takiego jak pewnego rodzaju algorytm. Opisuje on  dokument html. (document outlining algorithm). W specyfikacji HTML5 jest o tym osobna sekcja.  Nazywa się: Outline. Jeśli chcesz, aby Twoja struktura była logiczna nie możesz o tym zapomnieć.  Jeśli nie rozumiesz dlaczego, powinieneś zobaczyć ten film:

Po co jest ten cały outline w html5 ?

Wszyscy, którzy czytali całą (ciągle rozwijaną) specyfikacje html5 zastanawia się na co to jest potrzebne. W pierwszej chwili jest to jeden z elementów, który nie rzuca przełomowych zmian. Jest jednak wielu ludzi, którym outline dokumenu jest potrzebny. Wykorzystują te informacje, np. za pomocą czytników ekranu. Tak więc bardzo istotne jest prawidłowe wykorzystywanie nagłówków – jeśli chcemy mówić, że piszemy strony w html5.

 Jak sprawdzić outline witryny?

Najlepiej sprawdzimy to wtyczką HTML5 Outliner w Google Chrome. Jednak tu bardzo ważna uwaga. Strona musi być online. Nie sprawdzimy za pomocą tej wtyczki strony offline z naszego lokalnego komputera.

outline

Do tego posłuży nam inne narzędzie np. https://gsnedders.html5.org/outliner/  lub inne wbudowane Twój edytor kodu.

Wchodzimy na dowolną stronę internetową, po kliknięciu w przycisk wtyczki na pasku, pojawi nam się natychmiast outline naszej witryny.

outline html

Jak wygląda dobry outline dokumentu html5?

Poprawny outline to ten nie zawierających sztucznie napchanych tam słów kluczowych, oraz taki – który nie posiada wpisów:

Untitled

Co oznacza, że nie mamy nagłówka – który jest wymagany w danej sekcji strony lub:

No text content inside

Co oznacza, że nie mamy treści w nagłówku. Wszystkie podpunkty muszą być wypełnione. Inaczej outline jest niekompletny.

Jak tworzy się outline dokumentu html5?

Wszystkie znaczniki wg. specyfikacji html5 które są w kategorii Sectioning content oraz root są objęte tzw. outline’m.

Content model HTML5

To oznacza, że każdy taki znacznik generuje nam pusty wpis w liście outline dokumentu. Musimy więc w nim zawrzeć nagłówek, aby wpis nie został pusty.

Najlepiej przetestować to na poniższym przykładzie w narzędziu: https://gsnedders.html5.org/outliner/

<doctype html>
<title>Hello, world!</title>
<body>

<h1>This is a section</h1>


<section>
<h1>And this a subsection!</h1>
</section>


<h1>Piestrzynski.pl articles</h1>


<article>

<h3>The section element</h3>

</article>


<article>

<h3>The article element</h3>

</article>


<nav>Nawigacja</nav>

</body>
</html>

Efekt zobaczymy taki:

Wynik outliner

Jak już może się domyślasz w znaczniku nav nie umieściliśmy żadnego nagłówka. Z racji, że należy on do Sectioning content musimy tam go wstawić – chcąc mieć prawidłowy outline. Jak nazwiać nawigacje? Czy umieszczamy w niej nagłówki?

Zazwyczaj w takiej sytuacji developerzy wpisują nagłówek h2 o treści „Główna nawigacja”. Oczywiście skrzętnie go ukrywając w CSS. Jak donoszą testy, ukrycie pojedynczego nagłówka bez słowa kluczowego nie ma znaczenia w kontekście SEO. Dawniej stosowano text-indent: -9999px jednak teraz najczęściej przyjmuje się specjalną klasę .hide { display: none; }

Podsumowując, używanie właściwie nagłówków przyda nam się nie tylko w kontekście SEO –  ale też aby zadbać o prawidłowy outline dokumentu html5.

Przykładem strony z zadbanym outline html5 jest ta strona.

4.8/5 - (17 votes)

Autor

Dominik

Zajmuje się tworzeniem stron internetowych i realizacją działań SEO na rzecz dużych i małych przedsiębiorstw. Pracowałem między innymi dla Semahead czy wydawnictwa HELION. Prowadzę szkolenia z zakresu HTML5 i SEO. Każdego dnia odkrywam nowe możliwości, tak by rozwijać Twój biznes w sieci.

2 komentarze do “Outline w HTML5”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *


The reCAPTCHA verification period has expired. Please reload the page.