Je nutné, aby prvky H1 - H6 byly v kódu vždy po sobě?

xlifer:
Je to možné a vůbec to nevadí, že jsou úrovně nadpisů na "přeskáčku".

xlifer:
„Je to tedy správně nebo nikoliv?“
Môžem ti len povedať, že to nie je nesprávne...

Ale správne by to malo byť takto:
<h1> - nadpis prvej úrovne;
<h2> - nadpis druhej úrovne;
<h3> - nadpis tretej úrovne;
<h4> - nadpis štvrtej úrovne;
<h5> - nadpis piatej úrovne;
<h6> - nadpis šiestej úrovne;

Ja osobne by som tie nadpisy tak nekombinoval.

Jelikož je webová stránka dnes značně nelineární, tedy nejvýznamnější nadpis může být uveden ve zdrojovém kódu později než jiné méně důležité nadpisy, často to je správné řešení. Webová stránka prostě není strukturovaná stejně jako akademický článek. Všimni si však, že tyto „nelogičnosti“ se objevují především kolem a před vlastním textem, uvnitř textu je již obvyklá sestupná posloupnost od důležitých k méně důležitým.
Rozvětvování je naopak velice žádané a vhodné. Přece každá úroveň může být členěna na více než jednu menší.
Přiklad stránky, která má jeden h1 a spoustu menších nadpisů: http://info.cern.ch/hypertext/WWW/MarkUp/Connolly/recommended.html

xlifer:
„A tady zase píšou, že lze jednotlivé úrovně ještě rozvětvovat?“
Není to dobrý zdroj informací. Pokud je to v tvých silách, zapomeň, že ten web existuje.

xlifer:
V praxi na pořadí nadpisů moc nezáleží.
S ohledem na údržbu stránky je samozřejmě lepší mít nějakou logickou strukturu nadpisů, aby se v tom pak někdo vyznal.

Podle teorie se nadpisy vztahují k sekcím na webu, přičemž sekce umístěná uvnitř jiné sekce může pokračovat další nižší úrovní nadpisu (když ve vnější sekci jsem např. na úrovni <h3>, nejvyšší nadpis té vnitřní bude <h4>), nebo může mít vlastní nezávislý systém nadpisů (nejvyšší nadpis vnitřní sekce bude <h1> bez ohledu na úroveň nadpisu ve vnější sekci).

Zároveň z té odkázané části specifikace vyplývá, že přeskakování úrovní odkazů není ani podle teorie chyba.

Já to jako laik beru velice přímočaře. Je to obyčejný element, který má pouze nastavené nějaké default css hodnoty. Větší- menší. Výraznější - méně výrazný.
Které navíc můžu kdykoliv v css změnit dle libosti.

Takže je to pouze pomůcka pro tvorbu textů, abych si udržel nějakou strukturu a vzhled textu.
Ale nic mi nebrání v css to trochu proházet a zobrazovat dle toho, jak si přeji. Otázkou je, jak by takový web vypadal.

Takže je pouze jediná otázka.
Existuje mezi Nadpisy nějaká vazba-souvislost?
Krom toho, že mají nějaké default nastavení css od většího k menšímu. Myslím, že neexistuje a proto si s němi můžu dělat co chci.
Tím mám na mysli, že třeba jim nastavím stejnou velikost a pouze změním brarvu.
Potom se mi třeba jako hodí:

xlifer:

Hodně se na to zapomíná, ale i v roce 2014 je správné strukturování nadpisů důležité především z pohledu přístupnosti webové stránky (viz pěkný návod zde: http://poslepu.blogspot.cz/2010/01/jak-pristupne-strukturovat-web-pomoci.html).

Časy se sice mění, protože přichází WAI ARIA a koncept tzv. landmarků (více u Radka Pavlíčka zde http://www.zdrojak.cz/clanky/pristupnost-html5-strukturovani-obsahu/), přesto je dobré na handicapované uživatele nezapomínat a ctít zpětnou kompatibilitu, protože uživatelé se staršími screenreadery se často v dokumentu orientují právě podle struktury nadpisů.

Také je dobré vzpomenout si na potřeby běžného čtenáře, protože on je ten, pro něhož se webová stránka tvoří (k tématu má krátká glosa: http://www.zdrojak.cz/clanky/budiz-nadpis-reklo-seo/)

Tebou odkázaný článek na seo-24.cz je bohužel snůška nesmyslů, už tam nikdy nechoď. :)

To, že HTML-specifikace nabízí šest úrovní nadpisů, vnímám především jako jakousi „pojistku“ pro případ, že by jich někdo z nějakého předem těžko odhadnutelného důvodu skutečně tolik potřeboval. V praxi se málokdy použijí víc než dvě-tři úrovně a ty se mírným rozdílem velikosti a případně tučností nebo použitím jedné barvy odlišné od ostatního textu odlišit dají.

xlifer:
Z pohledu HTML to je formálně správně, z pohledu sémantiky podle mě „červená“ a „zelená“ nejsou nadpisy.

xlifer:
V takovém případě (když mám seznam položek název-popis) bych místo ul/li volil dl/dt+dd

xlifer:

„řešení přes DD se vždy zalomí až na další řádek, což nechci.“

K tomu máš CSS. V čem vidíš problém?

xlifer:
Tak to přestyluj. http://kod.djpw.cz/xfeb

xlifer:

Třeba. Výchozí formátování definičního seznamu mi ale přijde pro uživatele přehlednější.

xlifer:

„Kdybych chtěl, aby to mělo například nějaké pěkné odrážky?“

Použij raději obrázky na pozadí, to bude funkční všude.

xlifer:

Proč ne, klidně (i když bych raději použil STRONG). Jen tím přicházíš o kousek lepší přístupnosti.

xlifer:

Ani jedno není vysloveně špatně. Nicméně - z toho obecného, co víme, je definiční seznam asi tím nejlogičtějším řešením. :)

xlifer:
„Aha, tohle se přiznám jsem nikdy nepoužíval“
Já to taky dlouho ignoroval, ale pak jsem to v těch zmíněných situacích (mám seznam dvojic název-popis) naopak začal používat.

Asi nemá smysl mluvit o tom, že ul/li je nějak zásadně špatně, stejně se bavíme spíše teoreticky, ale podle mě má dl/dt+dd výhody.
Už tím, že mám jak název, tak popis hezky v tagu, který jde snadno zaměřit.
Než jsem pro seznamy dvojic začal používat <dl>, byl vždycky problém nejdřív v <ul> zrušit „seznamový“ styl (odebrat odrážky atd.) a pak to nastylovat jak jsem chtěl. Přičemž leckdy bych potřeboval mít i popis v jednom tagu, takže mi vzniklo <li><h3>název</h3><span>popis</span></li> - ta tady už to <li> je tak nějak navíc.
A používání větší škály HTML prvků i zjednodušuje údržbu webu. Sice většinu prvků jako nadpisy, odstavce, zvýraznění, atd. jde nahradit nastylovanými <div> a <span> a nějak to bude fungovat, ale s prvky přímo vymyšlenými pro použití v dané situaci je méně práce. Stránka je pak přehlednější a i styly a skripty jsou přehlednější.
Dám příklad:
Začnu s <li><h3>název</h3><span>popis</span></li> a chci tomu udělat nějaký vzhled. Jenže <ul> <li>, <h3> a <span> používám na stránce kde všude. Takže v CSS jednak specifikuji že to chci stylovat jen v obsahové části a jednak nejspíš tomu <ul> stejně musím dát nějakou CSS třídu. Jenže i pak je <span> hodně obecný, tak mu taky dám taky CSS třídu. No a vzniká otázka, jestli nadpis bude vždycky <h3>, nebo občas <h4> a podobně. Takže… mu radši taky dám CSS třídu?

Vyjdou mi styly typu: div.obsah ul.seznam li span.seznamPopisek, zatímco při použití definičního seznamu mám div.obsah dd (a možná by stačilo jen dd).

xlifer:
Definition list je semanticky vhodný pro tvůj výklad, s pomocí vlastností padding a background-image společně s background-position (nebo souhrnně přes vlastnost background) můžeš nastavit obrázek na pozadí v různých formátech (doporučoval bych pro odrážku formát vektorový - SVG, nebudeš se pak muset zabývat kvalitou zobrazení v mobilních prohlížečích, nebál bych se starších Explorerů, můžeš vytvořit podmínku pro Explorer menší nebo rovno 9, aby ukázal rastrový obrázek v přesně dané velikosti - musí být totožná s vektorovou verzí v pixelech). Tvoje řešení v [#24] je také možné, nicméně nesemantické.

CZghost:
„s pomocí vlastností padding a background-image společně s background-position (nebo souhrnně přes vlastnost background)“
Na to mám jednu starší ukázku: http://teststranek.kvalitne.cz/odrazky1/

„můžeš nastavit obrázek na pozadí v různých formátech (doporučoval bych pro odrážku formát vektorový - SVG“
Pokud se nebude nastavovat background-size, použil bych PNG, případně GIF. Pro úplnost, formát JPEG je na odrážky nehodí.

Bubák:
„Pokud se nebude nastavovat background-size, použil bych PNG, případně GIF. Pro úplnost, formát JPEG je na odrážky nehodí.“
Tím si ale trochu pobouříš milovníky smartphonů, kteří brouzdají častěji na mobilu. background-size ti totiž umožní nastavit menší rozměry a na displejích Retina a tomu podobných se ti obrázek ukáže jemnější než na klasickém desktopu. background-size nemusíš nastavovat, pokud použiješ nějaký obrázek nezávislý na kvalitě pixelů, což jsou obrázky vektorové (ve webovém prostředí tedy obrázek v XML formátu SVG). Tady narazíš u prohlížečů, které SVG vložené jako obrázek do stránky nebo na pozadí nějakého elementu nepodporují, což je IE 9 a menší, jenže ty na mobilu nejsou, tudíž mohu použít rastrový obrázek s odpovídajícími rozměry vektorové verze a nebude vadit, že je v horší kvalitě.

xlifer:
„Jinak teď jsem se do toho docela zamotal a nevím, které řešení mám zvolit, protože jestli správně chápu, tak ani jedno není špatně.“
Dávám hlas definičnímu seznamu, se kterým jsem se sice před čtyřmi lety trochu trápil, který ale má své kouzlo a který mám rád. :)