« 1 2 »
Autor Zpráva
xlifer
Profil
Myslel jsem, že by se mělo dodržovat, aby v kódu byla posloupnost prvků H1-H6 postupná, tzn. že když si zobrazím kód HTML sránky, tak by NEmělo být, že např. je nejdříve H4, pak třeba H3 a H1. Ale správně postupně, tj. H1, H2, H3.

Zkoušel jsem si například náhodně zobrazit zdorjový kód jednoho článku na novinkách a tam to tak přesně mají - H2, H1, H4, H2, H3...

Je to tedy správně nebo nikoliv?

A tady zase píšou, že lze jednotlivé úrovně ještě rozvětvovat? K čemu je to dobré, když uzavřu veklý blok třeba H3 a do něho vložím další H2,H3,H4 třeba.

To mě přijde, že je docela nepřehledné. Je to asi i ten příklad článku na novinkách.
Marschmallow
Profil
xlifer:
Je to možné a vůbec to nevadí, že jsou úrovně nadpisů na "přeskáčku".
xlifer
Profil
Marschmallow:
Je to možné a vůbec to nevadí, že jsou úrovně nadpisů na "přeskáčku".
Tak logické to samozřejmě je, ale nevím proč jsem měl nějak zafixováno v hlavě, že by to tak být němělo, aby text měl nějakou posloupnost pro vyhledáváče atd. Holt, je to tak a tím je to uzavřená záležitost :-)

Akorát teda s tím rozvětvováním jsem se nesetkal, nevím zda to není spíše zmatek... Používáte to taky, v jaké situaci jako příklad? (to jen tak pro zajímavost)
Tomáš123
Profil
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.
xlifer
Profil
Tomáš123:
Ja osobne by som tie nadpisy tak nekombinoval.
Tak mě to taky jde pořád nějak proti srsti, ale chyba to není a asi je příčinou takové situace skladba webu, jako že např. web je složen v layoutu bloky třeba - hlavička, levé menu, pravé menu, obsah, patička atd. No a tím jak se následně poskládá tok HTML kódu vznikne přeházení pořadí nadpisů, protože v levém menu, které je v kódu třeba dříve použiju H2, ale následně v osbahu, který je až následně dám H1 jako nadpis článku atd.
juriad
Profil
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
jenikkozak
Profil
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.
Joker
Profil
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.
Jcas
Profil
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.
hlavní nadpis
     podkategorie
          podnadpis
          podnadpis
     podkategorie
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í:
<h3 style="font-size: 12px; color: red;"></h3>
<h1 style="font-size: 12px; color: brown;"></h1>
Plaváček
Profil
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ď. :)
xlifer
Profil
Jcas:
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í:
>
<h3 style="font-size: 12px; color: red;"></h3><h1 style="font-size: 12px; color: brown;"></h1><h3 style="font-size: 12px; color: red;"></h3>
<h1 style="font-size: 12px; color: brown;"></h1>
Podle mě pak ztáci používání nadpisů pro čtenáře význam, když je uděláš stejně velké přes font-size na 12px a jen změníš barvu. Orientace v nadpisech podle barevnosti je dost neštastné řešení.
Petr ZZZ
Profil
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
Profil
Jinak předpokládám, že takovýto zápis je zcela semantický? (H3 jsou pak nastavené jako inline-block a nulovým marginem).

<h1>Článek o zelenině</h1>

<p>Text...</p>

<h2>Přehled druhů zeleniny</h2>

<ul>
<li><h3>červená</h3>
<li><h3>zelená</h3>
</ul>

<p>Text...</b>
Joker
Profil
xlifer:
Z pohledu HTML to je formálně správně, z pohledu sémantiky podle mě „červená“ a „zelená“ nejsou nadpisy.
xlifer
Profil
Joker:
Z pohledu HTML to je formálně správně, z pohledu sémantiky podle mě ‚červená‘ a ‚zelená‘ nejsou nadpisy.
Upřesním, správně to mělo být prezentováno takto (neuvědomil jsem si nutnost sdělit souvislost):

<ul>
<li><h3>červená</h3> - text jedna se druh.... atd.
<li><h3>zelená</h3> - text tato barva je... atd.
</ul>

Tzn. že to jsou nadpisy těch jednotlivých bodů, jestli se správně vyjadřuji...
Joker
Profil
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
Profil
Joker:
V takovém případě (když mám seznam položek název-popis) bych místo ul/li volil dl/dt+dd
Aha, tohle se přiznám jsem nikdy nepoužíval... A ten výše uvedený příklad ul/li je tedy moc špatně nebo může být, ale dl/dt je lepší řešení?

Chtěl jsem, aby text pokračoval za H3 nadpisem na řádku (display:inline-block), resp. za pomlčkou a řešení přes DD je vždy jako další řádek, což nechci.

A jaké to má dt/dd řešení výhody oproti ul/li - zase jen z hlediska správnosti sémantiky?

<dl>
  <dt>První termín</dt>
  <dd>Výklad prvního termínu</dd>
  <dt>Druhý termín</dt>
  <dd>Výklad druhého termínu</dd>
</dl>
Plaváček
Profil
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?
juriad
Profil
xlifer:
Tak to přestyluj. http://kod.djpw.cz/xfeb
xlifer
Profil
Plaváček:
K tomu máš CSS. V čem vidíš problém?

Takže by to mohlo jít třeba takhle:

<dl>
  <dt style="float:left;">První termín</dt>
  <dd style="display:inline-block;"> - výklad prvního termínu</dd>
</dl>
Plaváček
Profil
xlifer:

Třeba. Výchozí formátování definičního seznamu mi ale přijde pro uživatele přehlednější.
xlifer
Profil
juriad:
Tak to přestyluj. http://kod.djpw.cz/xfeb
Díky, než jsem stihl přečíst odpověď, tak jsem zkoušel to svoje řešení, které je skoro stejné, ale není tak dokonalé s tim contentem, toto řešení moc neznám :-)

dt:after {
    content: " - ";
}



Plaváček:
Třeba. Výchozí formátování definičního seznamu mi ale přijde pro uživatele přehlednější.
Tak to už asi záleží na situaci, když je to pěkně naformátované a nechcete zbytečně roztahovat text na řádky, tak myslím, že to zase tak nepřehledné není....


Plaváček:
K tomu máš CSS. V čem vidíš problém?
A je možné DL nastylovat také jako LI list-style-image ? Kdybych chtěl, aby to mělo například nějaké pěkné odrážky?
Plaváček
Profil
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
Profil
Ješte je možné řešení, což by snad prošlo a mohl bych použít list-style-image na LI

<ul>
<li><b>červená</b> - text
<li><b>zelená</b> - text
</ul>

Nebo taky ne? :-)

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ě.
Plaváček
Profil
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. :)
Joker
Profil
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).
CZghost
Profil
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é.
Bubák
Profil
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í.
CZghost
Profil
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ě.
Petr ZZZ
Profil
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. :)
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: