frontend-guide

# Semantyczna struktura dokumentu HTML

# Podział contentu dokumentu HTML

  • Metadata content
    Zawiera w sobie informacje dotyczące dokumentu ale nie będącego jego treścią, dane na temat relacji dokumentu z innymi dokumentami
    Wykorzystywane znaczniki: base, command, link, meta, noscript, script, style, title
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantyka HTML</title>
</head>
1
2
3
4
5
  • Flow content
    Zawiera zasadniczą treść dokumentu skupioną w body. Elementy flow content powinny zawierać w swoim wnętrzu, lub wenątrz elementów w nim zagnieżdzonych text-node (kawałek tekstu) nie będący białym znakiem lub element z grupy embeded content
    Wykorzystywane znaczniki: a, abbr, address, area (w przypadku gdy jest dzieckiem tagu map), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, ,details, dfn, div, dl, em, embed, fieldset, figure, footer, form,h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input,ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output,p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, (gdy ma atrybut scoped) sub, sup, svg, table, textarea, time, u, ul, var, video, wbr, text (text node)
<div class="row">
    <div class="col">
        <p>Flow content ..</p>
    </div>
    <div class="col">
        <img src=".." alt="..">
    </div>
</div>
1
2
3
4
5
6
7
8
  • Sectioning content
    Znaczniki słuzace do grupowania tresci w spójne pod względem contentu bloki. Wydziela sekcje dokumentu, każda sekcja może mieć własny header i footer (tworzy nowy węzeł w HTML outline)
    Wykorzystywane znaczniki: article, aside, nav, section
<section>
    <h1>Sectioning content</h1>
    <p>Sectioning content is ..</p>
</section>
1
2
3
4
  • Heading content
    Heading content słuzy do wyodrębniania spojnych pod względem contentu treści.
    Tworzy nagłówki sekcji w HTML outline jeżeli został użyty w elemencie sectioning content, w przeciwnym wypadku tworzy nowy węzeł w HTML outline i nadaje mu nazwę.
    Wykorzystywane znaczniki: h1, h2, h3, h4, h5, h6, hgroup
<h1>Postawy semantyki HTML</h1>
1
  • Phrasing content
    Elementy phrasing content są to elementy które mozna osadzać na równym poziomie ze standardowym tesktem (text node). W praktyce oznacza to, ze jest to grupa znaczników w przypadku których poprawnym semantycznie jest wplatanie ich w zdania.
    Wykorzystane znaczniki: a (w przypadku gdy zawiera w sobie tylko phrasing content), abbr, area (w przypadku gdy jest dzieckiem tagu map), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (w przypadku gdy zawiera w sobie tylko phrasing content), dfn, em, embed, i, iframe, img, input, ins (w przypadku gdy zawiera w sobie tylko phrasing content), kbd, keygen, label, link*, map (w przypadku gdy zawiera w sobie tylko phrasing content), mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text (text node)
<p>Phrasing <a href=#>Content</a></p>
1
  • Embeded content
    Elementy, których treścią mogą być inne zasoby - importowane wenątrz lub z zewnątrz serwisu
    Wykorzystywane znaczniki: audio, canvas, embed, iframe, img, math, object, svg, video
<img src=".." alt="..">
1

# HTML outline czyli "spis treści" strony internetowej

HTML outline jest wizualizacją struktury serwisu. Tworzy się on automatycznie w oparciu o używane znaczniki, których semantycznym znaczeniem jest porządkowanie i hierarchizacja treści.

Podgląd outline jest mozliwy przy zastosowaniu narzędzi słuzących do jego wizualizacji, są to min.:

Przykładowy HTML outline w podglądzie HTML validator'a HTML outline - przykład

# Elementy tworzące HTML outline

HTML outline tworzony jest automatycznie na podstawie struktury dokumentu HTML. Elementami tworzącymi jego strukturę są znaczniki z grup sectioning content oraz heading content.

# Top level elements

Elementy najwyzszego rzędu w HTML outline tworzone są przez nagłówki najwyzszego rzędu, czyli takie nagłówki, który znajdują się w body, nie znajdując się jednocześnie wewnątrz elementów z grupy sectioning content; elementy najwyszego rzędu muszą być nagłówkami najwyszej wagi - h1!

<body>
    <h1>Semantyka HTML</h1> <!-- Top level element w outline -->
    <section>
        <h1>Najtrudniejsze są początki..</h1> <!-- Element nizszego rzedu, poniewaz znajduje się w elemencie sectioning content -->
        <p>Jest tematem łatwym ale trudnym</p>
    </section>
    <!-- Element nizszego rzedu, poniewaz nie jest to h1 -->
    <h2>Podsumowanie</h2>
</body>
1
2
3
4
5
6
7
8
9

HTML outline dla powyzszej sytuacji:

HTML outline - przykład

# Nested elements

Elementy podrzędne, pozostające w relacji tematycznej z elementami najwyzszego rzędu, tworzone są przez znaczniki z grup sectioning content oraz heading content. Będąc w zakresie top level elementu, podrzędne bloki treści powinny być wyznaczane przez albo przez kolejny w hierarchi nagłówek (czyli h2) albo przez tagi z grupy sectioning content. Przy czym najbardziej poprawnym jest ich wyznaczanie przez tagi sectioning content.
W sekcji nizszego rzedu mozna tworzyc kolejne wcięcia w outlinie, w tym celu nalezy korzystać ponownie z heading content (przy czym na etapie zagniezdzenia warto korzystać z kolejnego nagłówka w hierarchii, w przypadku pierwszego zagniezdzenia z elementu h2) lub elementów sectioning content (np. element section wenątrz elementu article).

<body>
    <h1>Semantyka HTML</h1>
    <section>
        <h2>Najtrudniejsze są początki..</h2>
        <p>..</p>
        <h3>Trochę szczegółów</h3>
        <p>..</p>
        <h3>Podsumowanie</h3>
        <p>..</p>
        <h2>Najtrudniejsze są zakończenia..</h2>
    </section>
    <h1>Ciekawszy temat</h1>
    <section>
        <h2>Wrpowadzenie</h2>
        <p>..</p>
    </section>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

HTML outline dla powyzszej sytuacji:

HTML outline - przykład

# Podsumowanie

Jedną z cech HTML'a jest porządkowanie treści oraz nadawanie jej odpowiedniej wagi i znaczenia. Struktura treści dokumentu odzwierciedlana jest w html outline, a kluczową dla jej tworzenia jest odpowiednie stosowanie nagłówków oraz elementów sectionign content.

# Materiały:

  • https://validator.w3.org/
  • https://www.w3.org/TR/2011/WD-html5-author-20110809/content-models.html
  • https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
  • https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html

← Dane strukturalne (dane uporządkowane, rich snippets) →