DTD w HTML5

4programmers.net tez na HTML5 chodzi aczkolwiek nie ma w kodzie nowych znacznikow <nav>, <header> itp. Po prostu wiekszosc przegladarek i tak tego nie obsluguje. Ale mozna ostylizowac te znaczniki w CSS.

Niemniej jednak, znaczniki dostepne w HTML4, istnieja w HTML5 (z pewnymi wyjatkami), wiec nic nie stoi na przeszkodzie, aby ich uzywac. Mozesz przy tym korzystac z innych dobrodziejstw HTML5, pod warunkiem, ze sa wspierane przez przegladarki (HTML5 to nie tylko nowe znaczniki).

@jajcek:
Google pewnie korzysta z DOCTYPE-u HTML5 dla wydajności. Deklaracja jest po prostu krótsza, a włącza w przeglądarkach tryb zgodności ze standardami. Jeśli chodzi o poprawność, to na nich nie patrz -- oni się tym nigdy nie przejmowali i na ich stronach zdarzają się liczne błędy.

Ja czasami także używam HTML-a 5 bez nowych tagów. Po pierwsze -- czemu nie? Samo to, że mogę wpisać DOCTYPE z palca i nie muszę go przeklejać już jest plusem (no dobra: prawdę mówiąc to i tak startuję od gotowego szablonu, który przygotowałem sobie wcześniej). Po drugie, HTML5 umożliwia parę ciekawych rzeczy nawet bez użycia nowych tagów, np.:
-Nie wymaga atrybutu type w elementach takich jak script.

Starsze wersje HTML-a:
<script type="text/javascript" src="skrypt.js"></script>
HTML5:
<script src="skrypt.js"></script>

-Meta-tag określający kodowanie otrzymuje skróconą formę.

Starsze wersje HTML-a:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5:
<meta charset="utf-8">

-W HTML-u 5 możesz wstawiać w kod własne atrybuty o dowolnych nazwach rozpoczynających się od data-. Dokument pozostanie poprawny. Te atrybuty mogą nieść dodatkowe semantyczne znaczenie, do wykorzystania przez Twoje skrypty. Wygląda to więc tak:

<input type="text" data-require="agreeInput" />

Tutaj dodałem sobie atrybut data-require. Wymyśliłem sobie, że będę w nim przechowywał wartość atrybutu name jakiegoś pola wyboru, które musi być zaznaczone, by powyższe pole tekstowe zostało pokazane. Zadbają o to moje skrypty. Po załadowaniu strony, moje skrypty przejrzą drzewo dokumentu, poszukają atrybutu data-require (i innych, które sobie wymyśliłem) i poukrywają co trzeba i podepną odpowiednie zdarzenia.
W poprzednich wersjach HTML-a wprowadzenie własnych atrybutów powodowało błędy walidacji.

-W HTML-u 5 linki mogą otaczać nawet elementy blokowe. Możesz więc sprawić, by np. całość skróconego newsa była linkiem:

<div class="news">
  <a href="url-newsa">
    <h3>Tytuł newsa</h3>
    <p>Pierwszy paragraf...</p>
  </a>
</div>

Wcześniej w element a nie wolno było pakować elementów blokowych, takich jak h3 czy p. Musiałbyś więc zakodować to jakoś tak:

<div class="news">
  <h3><a href="url-newsa">Tytuł newsa</a></h3>
  <p><a href="url-newsa">Pierwszy paragraf...</a></p>
</div>

Czyli masz dwa linki zamiast jednego. Przeczy to zasadzie DRY (braku powtórzeń) w kodzie , łamie zasadę usability mówiącą, by ograniczać sytuacje, w których na stronie jest wiele linków w to samo miejsce.

To są niby drobnostki, ale są pewnymi ułatwieniami i działają we wszystkich przeglądarkach. Nie korzystają z nowych tagów -- co najwyżej atrybutów.

Pamiętaj też, że w HTML-u 5 niektóre elementy i atrybuty są już niedozwolone. Ich listę znajdziesz tutaj: http://www.w3.org/TR/2011/WD-html5-diff-20110113/#absent-elements . To są starocia, których i tak się nie używa w nowoczesnym kodzie, więc ich brak nie powinien być uciążliwy -- chyba że CMS strony zawiera edytor WYSIWYG, który wypluwa kod z tymi elementami/atrybutami. Wtedy może być problem.

A tak -- korzystaj z HTML-a 5 nawet bez użycia nowych tagów. Parę rzeczy ułatwi, a w niczym nie powinien przeszkodzić.

tak sobie wróciłem przypadkiem do tego tematu i spodobało mi się to, że w linkach można pakować elementy blokowane, jednak chciałbym się upewnić, że takie bloki jak div też można tam wstawiać? Może głupie pytanie bo to przecież też jest element blokowy jednak chciałbym aby ktoś mi to jeszcze raz potwierdził.

"Upewniania się" nie zaczynaj od pytania się nas, jajcku. Zerknij najpierw do specyfikacji na w3.org . Ewentualnie stwórz dokument HTML5 i zwaliduj go na http://validator.w3.org/ . My Ci zawsze możemy podpowiedzieć źle. Pamiętaj, że profesjonalni, dobrze poinformowani webdeveloperzy są w zdecydowanej mniejszości -- w naszej profesji byle kto może zacząć "składać stronki" i wypowiadać się na forach. Zresztą, nawet osoba doświadczona może się pomylić.

Zacznijmy od specyfikacji HTML5, konkretnie od jej części poświęconej atrybutowi a:
http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element

Zobaczmy na to, jaką zawartość (ang. content) może mieć element a:

Content model:
Transparent, but there must be no interactive content descendant.

Co to jest to transparent? W specyfikacji to link. Przejdźmy za nim do odpowiedniej definicji w dokumencie ( http://www.w3.org/TR/2010/WD-html5-20100304/embedded-content-0.html#transparent
):

Some elements are described as transparent; they have "transparent" in the description of their content model.

When a content model includes a part that is "transparent", those parts must not contain content that would not be conformant if all transparent elements in the tree were replaced, in their parent element, by the children in the "transparent" part of their content model, retaining order.

W uproszczeniu chodzi o to, że element z modelem zawartości transparent może zawierać dowolne elementy, ale tylko takie, które pasowałyby do elementu nadrzędnego, gdyby element z modelem transparent został usunięty i zamiast niego wstawiona by była tylko jego zawartość. Chodzi o to, że cały kod musi pozostać poprawny nawet po tym, jak usuniemy element z modelem zawartości transparent i zamiast niego wstawimy po prostu jego dzieci. Najłatwiej to zrozumiesz na przykładzie, który jest umieszczony w wyjaśnieniu.

Chodzi o to, że element a może zawierać praktycznie cokolwiek, a więc i div-a, ale tylko jeśli element nadrzędny elementu a może zawierać to cokolwiek, czyli tego diva. Czyli takie coś będzie OK:

<ul>
  <li>
    <a href=...>
      <div>Coś tam</div>
    </a>
  </li>
</ul>

Bo gdyby usunąć element a, kod div trafiłby bezpośrednio do li:

<ul>
  <li>
    <div>Coś tam</div>
  </li>
</ul>

Czy div może być w li? Na wszelki wypadek sprawdźmy.

Fragment specyfikacji dla li:
http://www.w3.org/TR/2010/WD-html5-20100304/semantics.html#the-li-element

Model zawartości jest tam opisany jako flow content. flow jest linkiem, podążamy za nim:
http://www.w3.org/TR/2010/WD-html5-20100304/dom.html#flow-content

Tutaj podana jest lista elementów, które zaliczają się do flow content. div jest na liście. Więc div może być w li. Więc gdybyśmy usunęli z naszego kodu znaczniki <a ...> oraz </a>, kod pozostałby poprawny -- więc w tym wypadku możemy wstawić diva do a.

Przykład z drugiej strony:

<!-- UWAGA! Zły kod! -->
<p>
  Lorem ipsum <strong><a href=...><div>dolor sit amet</div></a></strong> adipiscing elit
</p>

Tutaj mamy paragraf. W nim mamy strong, w nim nasz a, a w środku div. Od razu wygląda to podejrzanie. div znajduje się tak naprawdę wewnątrz strong, a to już jest głupie. O tym właśnie mówi zasada o zawartości transparent elementu a: kod nie może wyglądać głupio (tj. być niepoprawny) gdy usuniemy znaczniki a.

Przeprowadźmy więc nasz sprawdzian i usuńmy na chwilę te znaczniki a:

<!-- UWAGA! Zły kod! -->
<p>
  Lorem ipsum <strong><div>dolor sit amet</div></strong> adipiscing elit
</p>

Doświadczonego developera to aż kłuje gdy widzi div-a wewnątrz strong, ale sprawdźmy na wszelki wypadek specyfikację.
http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-strong-element

Model zawartości to phrasing content, podążamy za linkiem:
http://www.w3.org/TR/2010/WD-html5-20100304/dom.html#phrasing-content

Na liście elementów pasujących do phrasing content nie ma div-a. Więc div -- jak się domyślaliśmy -- nie mógłby się znaleźć w strong. Więc nie możemy oszukać, wstawiając do strong element a i dopiero w element a wstawiając div-a.

Podsumowując: możesz wstawiać div-y do a, ale tylko gdy nie "oszukujesz". Tj. div musiałby pasować również wtedy, gdyby umieścić go w danym miejscu zamiast elementu a.