Autor Zpráva
jefitto44
Profil
S príchodom html 5 som sa rozhodol vytvoriť niečo (len tak, pre potešenie duše) za použitie <header><footer><article> a pod.

Moja otázka je, či je v pohode do seba tieto tágy zanorovať, to jest.

<header>Hlavný header stránky</header>
<article><header>Nadpís článku</header>
Text článku bla bla...
<footer>Footer článku</footer>
</article>
<footer>
Footer stránky
</footer>
</html>

V CSS potom vyberám takto:
header {bla bla;}
article {bla bla bla;}
footer {bla bla bla bla;}

article header {bla bla;}
article footer {bla bla bla;}

Je dobrý a správny, takýto zápis? Pretože pokiaľ v article header v CSS nezapíšem nič, tak si ten header berie vlastnosti z hlavného header... Je dobré, že sa to takto prepisuje?
Petr ZZZ
Profil
Řekl bych, že popsané chování má logiku, protože vlastnosti zapsané pro header platí pro jakýkoli <header>, tedy i pro <article> <header>, pokud je zápisem vlastností pro article header nepřebiješ. Dá se to i různě kombinovat, tedy zápisem header {color:green;} article header {font-weight:bold;} bude <header> zelený a <article><header> bude zelený a navíc ještě tučný.

Upozorňuji ale, že tebou uvedeným novým tagům z HTML 5 některé starší prohlížeče nerozumí. Místo <header> doporučuji tedy psát raději třeba <div class="header">. Kromě toho působí přinejmenším zvláštně použít „sémantické novinky“ nesémantickým způsobem — na nadpisy máme <h1><h6>.

„či je v pohode do seba tieto tágy zanorovať“
S dlouhým á se píše něco jiného.
Joker
Profil
jefitto44:
Přímo v HTML5 specifikaci u prvku <article> je příklad s takovým dělením.

Jinak prvky article, header a footer jsou flow-content a povolený obsah je taky flow-content, jen v <header> a <footer> nesmí být <header>, <footer> a <main>.
Dá se říci, že se v tomhle ohledu chovají stejně jako <div>, až na ty výjimky u <header> a <footer>.

Je dobrý a správny, takýto zápis?
Nebude fungovat v některých prohlížečích, o tom jsme se už bavili.
A z pohledu sémantiky nadpis článku by neměl být obalený prvkem <header>, ale některým z nadpisů.
Resp. „sémantický křižák“ by asi řekl, že v daném příkladu do článku místo <header> patří <h1> a že v <article>, <header> a <footer> by ani neměl být přímo text, ale další prvky.
jefitto44
Profil
Petr ZZZ:
na nadpisy máme

Do <header>, kde nastavujem výšku a pozadie, samozrejme potom nadpis stránky zanorujem do <h1>
Chamurappi
Profil
Reaguji na jefitta44:
Výšku? Jak můžeš vědět, jak bude nadpis vysoký, když je to text?

Proč bys chtěl nové elementy z HTML 5 používat? Jaké spatřuješ reálné výhody?
jefitto44
Profil
Lepšiu prehľadnosť a semantickosť kódu, ako keď sú všade len divy a spany

Nadpis som myslel tak, že určujem min-height:30px do headeru a farbu pozadia (gradient samozrejme)
Samozrejme, potom mám nastylovane

article header h1 {text-size, color, atď atď}
Chamurappi
Profil
Reaguji na jefitta44:
Lepšiu prehľadnosť kódu
Tu návštěvník nijak neocení. Stránku píšeš pro lidi, ne pro sebe. Ty tři elementy přehlednost moc nevytrhnou.

Lepšiu semantickosť kódu
Ta přináší jako reálné výhody?

určujem min-height:30px do headeru a farbu pozadia
Proč tyto vlastnosti nenastavuješ přímo nadpisu?
jefitto44
Profil
Chamurappi:
Proč tyto vlastnosti nenastavuješ přímo nadpisu?
Lebo potrebujem, aby bola hlavička v danej farbe až do konca, nikoliv len pod nadpisom... či ak by som nadpisu nastavil width: 100%; bolo by to to isté?
Chamurappi
Profil
Reaguji na jefitta44:
Nadpis je blokový element, stejně jako třeba <div> (nebo jen v nových prohlížečích ten <header>). Když mu nenastavíš šířku, roztáhne se přes celý řádek.
Kdyby nebyl blokovým elementem, šlo by mu nastavit display: block.

bolo by to to isté?
Příště si to místo ptaní můžeš sám vyzkoušet.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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