Jak stowrzyć dobry szkielet artykułu za pomocą HTML5? Poniżej znajduje się proponowany standard. Pozwola on na wprowadzenie większej semantyczności do artykułów w sieci. Pozwala zapewnić również wysoką jakość treści bez używania zbędnych znaczników. Dzięki kilku prostym zasadom możemy pomóc uczynić treści znajdujące się w internecie trochę bardziej czytelnymi.

Te wskazówki wynikają z pewnych specyfikacji, głównie mikroformatu hNews , jak również dostepności nowych elementy dostarczonych przez HTML5. Jeśli coś jest niejasne, zajżyj do  specyfikacji hNews, jak również  przewodnika po semantycznych elementach HTML5, z wprowadzenia do HTML5 Marka Piligrima.

<article class="hentry">
  <header>
    <h1 class="entry-title">But Will It Make You Happy?</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>08-07-2010</time>
    <p class="byline author vcard">
        By <span class="fn">Stephanie Rosenbloom</span>
    </p>
  </header>

  <div class="entry-content">
      <p>...article text...</p>
      <p>...article text...</p>

      <figure>
        <img src="tammy-strobel.jpg" alt="Portrait of Tammy Strobel" />
        <figcaption>Tammy Strobel in her pared-down, 400sq-ft apt.</figcaption>
      </figure>

      <p>...article text...</p>
      <p>...article text...</p>

      <aside>
        <h2>Share this Article</h2>
        <ul>
          <li>Facebook</li>
          <li>Twitter</li>
          <li>Etc</li>
        </ul>
      </aside>

      <div class="entry-content-asset">
        <a href="photo-full.png">
          <img src="photo.png" alt="The objects Tammy removed from her life after moving" />
        </a>
      </div>

      <p>...article text...</p>
      <p>...article text...</p>

      <a class="entry-unrelated" href="http://fake.site/">Find Great Vacations</a>
  </div>

  <footer>
    <p>
      A version of this article appeared in print on August 8,
      2010, on page BU1 of the New York edition.
    </p>
    <div class="source-org vcard copyright">
        Copyright 2010 <span class="org fn">The New York Times Company</span>
    </div>
  </footer>
</article>

article

Użyj tagu article jako kontenera wpisu. Jest on semantyczye i czytelny. hentry jest specyficzny dla hAtom, i oznacza początek artykułu. Niestety article przechodzi obecnie kryzys tożsamości. Prawidłowo powinien być rozumiany jako samodzielny element treści. Niekoniecznie jako tekst artykułu. Oznacza to, że takie rzeczy jak komentarze czy widgety, mogłoby być uznane za teksty teksty z semantycznego punktu widzenia. Oto zalecenie: article używaj wszędzie tam, gdzie jest to rozsądne :)

entry-title

entry-title oznacza tytuł artykułu.

time, pubdate

Data, do wyświetlenia, kiedy artykuł został opublikowany. Atrybut ‚updated’  jest wymagany przez hAtom i opisuje, kiedy artykuł został zaktualizowany. Domyślnie to mogą być taka sama data jak pubdate. Jeśli chcesz, możesz go zmienić na inną datę.

byline, author, vcard

Byline vcard oznacza, kto napisał artykuł. Zazwyczaj dotyczy osoby. Jeśli znajduje się w nim „fn” oznacza pełną nazwę osoby.

entry-content

Klasa entry-content, wskazuje główną część artykułu. W przypadku znalezienia będzie uważane jako body.

figure and figcaption

Znaczniki te powinny być wykorzystywane do oznaczania mediów artykułu. To pozwalaw łatwy sposów wyseparować media artykułu. W większość zawiera obrazy, ale także inne media są dozwolone, jak podaje specyfikacja w3c:

„element może być używany do opisywania ilustracji, wykresów, fotografii, listingów, etc.”

Zwróć uwagę, że zależy to od preferencji użytkownika.

aside (oraz header, nav i footer)

Używając tego tagu można określić, co nie jest główna treścią strony.

.entry-content-asset

Jest to specjalna klasa, która wyraźnie mówi czytnikom (i innym parserom), że treści w nim jest związana z zawartością. Jest to szczególnie przydatne w przypadkach, gdy masz zawartość, która powinna być w tagu figure, ale nie może jeszcze przejść na HTML5.

.entry-unrelated

Jest to specjalna klasa, która  mówi czytnikom (i innym parserom), aby zignorować treści znajdujęce się w nim. Można ją stosować na każdym elemencie.

source-org

Źródłem tego artykułu jest organizacja lub grupa twórców artykułu.