HTML5 en iyi uygulamalar; bölüm/başlık/yana/makale etiketleri

SORU

24 Ocak 2011, PAZARTESİ

HTML5 en iyi uygulamalar; bölüm/başlık/yana/makale etiketleri

Web (ve ayrıca stackoverflow) HTML5 hakkında yeterince bilgi var, ama şimdi merak ediyorum "uygulamalar". en iyi Bölüm/headers/yazı etiketleri gibi yeni ve herkes bu etiketleri kullanmanız gerekir zaman hakkında farklı görüşler vardır. Siz de aşağıdaki düzeni ve kod hakkında ne düşünüyorsun?

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

satır 7. 2* *tüm sitede? Ya da sadece div?

satır 8. header section Her başlangıç?

satır 23. Bu div değil mi? ya bu section bir olmalıdır?

24 satır. Bölünmüş div/sağ sütun sol.

satır 25. article etiketi için doğru yer mi?

satır 26. 10 **-tag header-etiket koymak için gerekli midir?

hattı 43. İçerik ana madde ile ilgili değildir, bu section aside bir bitkidir karar verdim.

hattı 44. header olmadan H2

line 53. header olmadan section

line 63. (Sigara ile ilgili tüm haberlere Div

line 64. H2 header

line 65. , div section Hmm? Ya da div ve sadece bu kullanın çıkarın article-tag

hattı 105. :- Altbilgi)

CEVAP

29 HAZİRAN 2011, ÇARŞAMBA

Aslında, üstbilgi/altbilgi gelince çok haklısınız. Burada önemli HTML5 etiketlerinden/hakkında temel bilgiler kullanılmalıdır (tam kaynak altındaki bağlı okumanızı tavsiye ederim):

bölüm– Birlikte gruplandırma için kullanılan tematik ile ilgili içerik. Bir div öğesi gibi geliyor, ama değil. Div hiçbir anlam anlamı vardır. Senin div bölüm elemanları ile, her zaman bütün değiştirmeden önce kendinize sorun: tüm içerik “ilgili?”

kenara– Teğetsel ilgili içerikler için kullanılır. Bazı içerikler, sol görünüyor diye ya da sağ ana içeriği bir kenara unsuru kullanmak için yeterli sebep değil. Eğer bir kenara içeriği ana içeriği anlamını kaybetmeden kaldırılabilir olup olmadığını kendinize sorun. Pullquotes teğetsel ilgili içerik bir örnektir.

başlıkBaşlık element ve başlık genel kabul gören kullanım (ya da direk) arasında önemli bir fark var. Genellikle tek bir başlık ya da ‘künye’ sayfasında var. HTML5 istediğin kadar alabilirsin. Spec tanımlar “tanıtım veya seyrüsefer grubu”. Sitenizde herhangi bir bölümünde bir başlık kullanabilirsiniz. Aslında, muhtemelen bir bölümden en içinde bir başlık kullanmalısınız. Spec “genellikle bir başlık ile içerik tematik bir gruplandırma.” gibi bölüm elemanı açıklanır

nav– Önemli navigasyon bilgileri için tasarlanmıştır. Bağlantıları bir araya getirilmiş bir grup nav öğesini kullanmak için yeterli sebep değil. Diğer taraftan Site genelinde navigasyon nav elemanı aittir.

altbilgi– Pozisyon, ama onun bir açıklaması yok gibi görünüyor. İçeren öğesi hakkında bilgi içeren altbilgi öğeleri: kim yazmış, telif hakları, ilgili içerik, bağlantılar, vb. Biz genellikle tüm belge, HTML5 bize de altbilgi sağlar bölümlerinde için bir altbilgi var oysa.

Kaynak: 22**