[ miljan9602 @ 04.02.2013. 10:08 ] @
U cemu je razlika izmedju taga <section> i <article>, da li su oni isti ? Moze li to neko malo blize da mi objasni, imam knjigu ali kad procitam objasnjenje opet nerazumem. :(
[ miljan9602 @ 05.02.2013. 19:55 ] @
Moze li taman neko i da mi malo pojasni <aside> tga :) tagodje imam objasnjenje ali mi nije jasno :(
[ plus_minus @ 05.02.2013. 20:55 ] @
"div" - rulez.
Koliko sam ja ukapirao, sekcija treba da se nađe kao sastavni deo nekog "artikla" ili članka. Sekcija tog i tog članka. A aside je dodatna navigacija, ili šta već. Može da bude ad tower, ad lista.. guest lista.. sam naziv govori.. aside content. U svakom slučaju, jasno izdvaja manje bitniji deo sadržaja stranice od glavnog sadržaja. Sad.. što to ne bega samo od sebe u stranu, to je druga priča. Draft, beta stage. itd.

Moj ti je savet da i dalje koristiš div > span ili dl dd ili p > span ... a onda kada html5 izađe iz draft moda, lako ćeš sve o istom, ne sekiraj se.

Code (html):


<article>
     <h1>Title</h1>
     <section>
          <h2>Section title</h2>
          <p>Content</p>
     </section>
     <section>
          <h2>Section title</h2>
          <p>Content</p>
     </section>
     <section>
          <h2>Section title</h2>
          <p>Content</p>
     </section>
</article>

 


[Ovu poruku je menjao plus_minus dana 05.02.2013. u 22:09 GMT+1]
[ miljan9602 @ 06.02.2013. 09:22 ] @
E hvala ti, radim ovo po nekoj knjizi pa ovde nije jos objasnjen <div> pa nzm jos uvek cemu sluzi :)
Mada ovde pise da <article> ide unutar <section> :D A za to <aside> ne kontam sta znaci, mada verovatno ima i drugih tagova koji mogu da zamene tag <aside> :)))
[ Dejan Carić @ 06.02.2013. 09:36 ] @
Article predstavlja deo stranice (logičku celinu) koja je nezavisna od ostatka sadržaja. Npr. blog post, novinski članak, komentar koji korisnici ostavljaju, odgovor na forumu, itd.
Code:
<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time datetime="2009-10-09">3 days ago</time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a href="?comments=1">Show comments...</a>
 </footer>
</article>

Na stranici možeš imati dosta sadržaja, ali ovaj članak (The Very First Rule of Life) predstavlja nezavisnu celinu, isto kao što tvoj post i moj post na ovoj temi predstavljaju dve nezavisne celine. Header i Footer elementi nisu obavezni.

Article element može da sadrži ugnježdene article elemenate i onda se oni odnose na sadržaj spoljašnjeg elementa.
Code:
<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time datetime="2009-10-09">3 days ago</time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article id="c1">
   <footer>
    <p>Posted by: George Washington</p>
    <p><time datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article id="c2">
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

U ovom primeru svaki komentar predstavlja jednu nezavisnu celinu ali se nalaze unutar glavnog article elementa. Kada Google bude parsirao ovu stranicu, znaće da se ova dva komentara odnose na na članak The Very First Rule of Life, a ne na bilo koji drugi članak koji se može nalaziti na stranici. Lista komentara opet predstavlja jednu logičku celinu/sekciju i zato se nalaze unutar Section elementa.

Evo još jedan primer:
Code:
<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

Ove imamo jedan članak koji govori o jabukama: Red Delicious i Granny Smith. Ove dve celine nisu izdvojene u posebne article (kao što je bio slučaj sa komentarima) jer nisu nezavisne od glavnog članka već samo predstavljaju njegov deo. Kao kada smo u osnovnoj školi morali da pišemo sastav iz srpskog jezika: sastav bi bio jedan article koji bi imao tri sekcije: uvod, razradu i zaključak. Takođe, vodi računa da ovde svaki section element može imati svoj h1 element jer h1 element koji pripada sekciji nije isto što i h1 element koji pripada članku.


HTML5 jeste zaživeo i Google odlično barata sa njim. Npr. ako na stranici nemaš meta description tag, ali imaš Article element, Google će koristiti tekst iz Article elementa u svojim rezultatima pretrage. Ako nemaš ni meta description tag ni Article element, onda će Google koristiti tekst koji se nalazi u Body elementu jer ne zna šta predstavlja navigaciju, a šta sadržaj koji je namenjen korisniku. Npr. za Google
Code:
<body>
   <div class="nav">
      <ul>
         <li><a href="#">Prvi link</a></li>
         <li><a href="#">Drugi link</a></li>
      </ul>
   </div>
   <div class="content">
      <p>Lorem ipsum dolor</p>
   </div>
</body>

nije isto što i ovo:

Code:
<body>
   <nav>
      <ul>
         <li><a href="#">Prvi link</a></li>
         <li><a href="#">Drugi link</a></li>
      </ul>
   </nav>
   <article>
      <p>Lorem ipsum dolor</p>
   </article>
</body>
[ plus_minus @ 06.02.2013. 14:48 ] @
Citat:
A za to <aside> ne kontam sta znaci, mada verovatno ima i drugih tagova koji mogu da zamene tag <aside> :)))


Aside = sa strane, izdvojeno.

"To put aside.. " / staviti po strani, za sad (itd.)

Jel' ti sad jasnije?
[ miljan9602 @ 07.02.2013. 22:10 ] @
Hvala vam mnogo, sada sam skontao za sta sluze aside, article i section, ovo mi je mnogo pomoglo i hvala vam puno.

Predpostavljam da je ovde najvaznije kako google vidi stranicu i na kom ce mestu ona biti, jer naravno ako bude na sto boljem mestu bice posecenija, a tu je potrebna samo praksa ?
[ plus_minus @ 08.02.2013. 01:22 ] @
Najvažnije od svega je da sajt i koncept imaju smisla i da ono što predstavljaš korisnicima/posetiocima takođe, ima smisla, da se nešto može saznati, eventualno proslediti neka informacija, zavisi od samog sajta, koja je primena, itd. A dal' će to da bude html5 ili će da bude html4 ili će da bude tranzicioni xhtml ili striktni.. to je najmanje bitno ukoliko je sve spakovano kako treba i na svom mestu (valid code/tag nesting itd.) Eto to ti je najbitnije. Ako ti skockaš sajt da bude po "pravilu službe" 101% i svi tagovi na svom mestu, al' zato sadržina identična ili se maltene podudara sa sadržinom nekog xyz sajta, nećeš videti svoj sajt duže od 2 dana među prvih 10 - 15 na listi u to budi siguran.
[ miljan9602 @ 09.02.2013. 14:07 ] @
Skonto sam to sto si sad rekao plus i sada mi je skroz jasno i hvala vam na tome
Jel bi vam bio problem da mi objasnite sta radi opcija display:block ? To vec spada u CSS ?

Hvala unapred.
[ plus_minus @ 09.02.2013. 22:25 ] @
Display: block == Prikaži kao blok; element u sebi može da sadrži i ostale, više njih koji su podešeni na display: inline; .. npr. Ako ti treba wrapper.. taj wraper, obmotač ili "kocka" koja u sebi drži dodatne elemente, neće sigurno da šljaka kako treba ako je pravilo : inline ili inline-block, .. u suštini prosto je, block element ima po default-u max-possible-width i height. Samo treba da kreneš da praviš nešto, da čačkaš neki css dokument i da snimiš, pa onda F5 u browseru, i kazaće ti se samo. I mene pravo da ti kažem mrzi da objašnjavam .. D:

Evo ovo ti može biti od koristi :: CSS Display and visibility
Citat:
CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.


Ključne reči za dalju pretragu slobodno mogu da budu ove iste kao za naziv linka.