HTML dokumenti - semantično pravilni, SEO pravilni

Živjo!

Eno vprašanje imam v zvezi s strukturo HTML dokumentov. Na CSS Tricks sem gledal strukturo lepega HTML5 dokumenta in mi je najbolj v oči padla struktura.

Sam sem bil namreč navajen začeti s h1 in nadaljevati s headingi po dokumentu, v tem primeru pa se h1 uporablja izključno za naslov članka, oz prispevka, kar se mi zdi pametno.

Sam namreč pišem dokumente takole:
- head
- body
-- header
--- h1 (logo)
--- navigacija
-- content
--- h2 (naslov)
--- h3 (rubrika)
--- p, img, (vsebina)
--- h4, h5, h6 (podnaslovi v vsebini)
-- sidebar
-- footer

V tem dokumentu pa me je presenetilo tole:
- head
- body
-- header
-- a id=logo (logo)
-- nav
-- section
--- article
---- h1 (naslov)
---- img, p (vsebina)
---- h2 (podnaslov)
-- aside
--- h3 (ime side boxa)
---- ul, dl, p ... (content)
--- -||- ... takih boksov je lahko več
-- footer
--- h4 (ime footer boxa)
---- ul, dl, p, ... (content)

Ko smo že pri HTML5, ko bodo kontejnerji (divi) takole lepo semantčini, da boš napisal <footer> bo res fino mar ne. Je kdo že uporabil HTML5 sintakso v živem projektu?

23 odgovorov

Hmm H1 je smatran kot kar pomemben za onsite optimizacijo.
Kot "glavni naslov" recimo, poleg HTML <title>.

Zatorej ga uporabiti za logo ni smiselno, ampak bolj za "Naslov posamezne strani" - torej v tem primeru članka.

2

Hja, potem sem imel prav ;)

1

Ima mogoce kdo kak link, kjer je razlozena struktura za php? Sicer mi sama koda deluje, vendar bi rad nekako locil, php kodo od html-ja, na ta nacin da bi samo v html-ju potem includal php spremeljivko iz fajla, kjer bi imel napisane funkcije.

<h1><?php echo $spremenljivka; ?></h1>

takole izpišeš spremenljivko, prej jo moraš pa seveda definirati. Torej v tvojem primeru v tem filetu s funkcijami in narediti return $spremenljivka;

upam, da sem pravilno razumel tvoj problem =)

@human @komac ... PHP? Res? Sem mislil, da govorimo o pravilnih HTML dokumentih, a očitno temu ni tako ;)

@human si najbrz zeli da bi svojo php kodo dal v cistilnico in ven dobil lepo urejeno in pravilno php kodo (hja tega bi si zelel marsikdo)

glede php ali html pa je tako ali tako vseeno - cilj je vedno isti - pravilna in urejena html koda

mprose7, Davorin ne govori o valid HTMLju, vprašanje je bilo, kakšna struktura je semantično najbolj pravilna in ne sintaktično.

2

HTML mora biti tako ali tako validen, to je jasno (hvala, Vini), zanimala me je samo organizacija, struktura, semantika samih dokumentov, ja ... Če noben nima mnenja (razen Jureta, da je h1 škoda), potem se bom v bodoče držal druge variante: h1 uporabi za res pomembno stvar!

Davorin, tukaj bi se strinjal z Juretom, h1 je pač glavni naslov dokumenta, kar je v primeru članka seveda naslov članka in ne ime sajta. V bistvu se težko strinjam z uporabo h3 in h4 v aside in footer, vendar je res, da kakšnega bolj semantično pravilnega taga za naslove v sidebaru, footerju in ostalih neumnostih ne poznam, se mi pa zdi, da zadeva nekako pokvari outline dokumenta, saj tisti naslovi, označeni s h3 in h4 nikakor niso del članka, kajne?

1

Po moje je stvar taka, če prav razumem, da je v HTML5 povsem semantično pravilno uporabiti več H1 tagov, za vsako sekcijo posebej, torej bi načeloma lahko naredil nekaj v stilu:

<header>
  <h1>Ime sajta</h1>
</header>
<article>
  <h1>Naslov članka</h1>
  <p>Besedilo članka...</p>
</article>
<aside>
  <h1>Stranski naslov</h1>
  <p>Besedilo...</p>
  <h1>Drugi stranski naslov</h1>
  <p>Besedilo...</p>
</aside>
<footer>
  <h1>Naslov v footerju</h1>
  <p>Besedilo v footerju</p>
</footer>

Ja? Se motim?