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?
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
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**
Kendinden kapanış etiketleri HTML5 geç...
Nasıl matplotlib şekil başlık ve eksen...
Hangi HTML5 etiketleri tarayıcı uyumlu...
HTML5 uygulamalar peer-to-peer yapmak ...
Bölüm vs Makalede, HTML5...