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

546

Web'de (ve stackoverflow'ta) HTML5 hakkında yeterli bilgi var, ancak şimdi "en iyi uygulamalar" ı merak ediyorum. Bölüm / başlıklar / makale gibi etiketler yenidir ve herkesin bu etiketleri ne zaman / nerede kullanmanız gerektiği konusunda farklı görüşleri vardır. Peki, aşağıdaki düzen ve kod hakkında ne düşünüyorsunuz?

Web sitesi düzeni

  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>

hat 7. sectiontüm web sitesi etrafında? Yoksa sadece bir div?

satır 8. Her biri sectionbir header?

satır 23. Bu divdoğru mu? ya da bu bir section?

satır 24. Sol / sağ sütunu a ile bölün div.

satır 25. articleEtiket için doğru yer ?

satır 26. h1-tag'inizi -tag içine koymak gerekli headermi?

satır 43. İçerik ana makale ile ilgili değildir, bu yüzden bunun bir sectiondeğil de olduğuna karar verdim aside.

44. satır H2 olmadan header

satır 53. sectionolmadanheader

satır 63. Div (tüm ilgili olmayan) haber öğeleriyle

64. satır headerh2 ile

satır 65. Hmm, divveya section? Veya bunu kaldırın divve yalnızca article-tag öğesini kullanın

satır 105. Altbilgi :-)

html  header  article 
— Bas van Dorst
kaynak
— Christophe Roussy

Yanıtlar:

486

Aslında, üstbilgi / altbilgi konusunda oldukça haklısınız. Aşağıda, önemli HTML5 etiketlerinin her birinin nasıl kullanılabileceği / kullanılması gerektiğine dair bazı temel bilgiler verilmiştir (Altta bulunan tam kaynağı okumayı öneririm):

bölümü - Tematik olarak ilişkili içeriği birlikte gruplamak için kullanılır. Div öğesi gibi görünüyor, ama değil. Div'in anlamsal bir anlamı yoktur. Tüm div'lerinizi bölüm öğeleriyle değiştirmeden önce her zaman kendinize şunu sorun: “Tüm içerik alakalı mudur?”

kenara - Teğetsel olarak alakalı içerik için kullanılır. Bazı içeriğin ana içeriğin solunda veya sağında görünmesi, bir yana öğesini kullanmak için yeterli neden değildir. Ana içeriğin anlamını azaltmadan bir taraftaki içeriğin kaldırılıp kaldırılamayacağını kendinize sorun. Çekme tırnaklar teğetsel olarak alakalı içeriğe bir örnektir.

başlık - Başlık öğesi ile genel olarak kabul edilen başlık (veya masthead) kullanımı arasında önemli bir fark vardır. Bir sayfada genellikle yalnızca bir başlık veya 'masthead' bulunur. HTML5'te istediğiniz kadar olabilir. Spesifikasyon, “bir grup tanıtım veya seyrüsefer yardımcıları” olarak tanımlar. Sitenizdeki herhangi bir bölümde üstbilgi kullanabilirsiniz. Aslında, bölümlerinizin çoğunda muhtemelen bir başlık kullanmalısınız. Spesifikasyon, bölüm öğesini “tipik olarak bir başlığı olan tematik bir içerik grubu” olarak tanımlar.

nav - Önemli navigasyon bilgileri için tasarlanmıştır. Gruplandırılmış bir grup bağlantı, nav öğesini kullanmak için yeterli bir neden değildir. Site genelinde gezinme ise bir gezinme öğesine aittir.

footer - Kulağa bir pozisyon açıklaması gibi geliyor, ama değil. Altbilgi öğeleri, içerdiği öğeyle ilgili bilgiler içerir: bunu kim yazdı, telif hakkı, ilgili içeriğe bağlantılar, vb. Genel olarak, bir belgenin tamamı için bir altbilgimiz olmasına rağmen, HTML5 bölümler içinde de altbilgiye sahip olmamızı sağlar.

Kaynak : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Ayrıca, articleyukarıdaki kaynakta bulunmayan bir açıklama :

makale - Bağımsız, bağımsız içerik belirten öğe için kullanılır. Bir makale tek başına mantıklı olmalıdır. Tüm div'lerinizi makale öğeleriyle değiştirmeden önce, kendinize şunları sorun: “Web sitesinin geri kalanından bağımsız olarak okumak mümkün mü?”

— Nathan JB
kaynak
68
Bu cevabın nasıl bu kadar çok oy aldığı bana bir bilmece: <article>unsurlardan bahsetmiyor, bahsi geçen unsurlardan farklı değil, onları da gruplandırmıyor. Bu sorunun cevabı “en iyi uygulama” ya da OP'nin açık sorularının hiçbirine cevap vermiyor.
— Robert Siemer
2
@RobertSiemer Bana göre yorumunuzu nasıl 24 upvotes ve soru sadece 6 downvotes var bir bilmece ...
— Veger
@RobertSiemer harika görünüyor, ne düşünüyorsun? Yorumunuzu kontrol edip bir sonraki cevapla onaylayana kadar kötü olduğuna dair hiçbir fikrim yoktu.
— Det
238

Ne yazık ki şu ana kadar verilen cevaplar (en çok oylananlar dahil) ya "adil" sağduyu, yalın yanlış ya da en iyi ihtimalle kafa karıştırıcıdır. Önemli anahtar kelimelerin hiçbiri 1 açılır!

3 cevap yazdım:

  1. Bu açıklama (buradan başlayın).
  2. OP'nin sorularına somut cevaplar.
  3. Geliştirilmiş ayrıntılı HTML.

Burada tartışılan html öğelerinin rolünü anlamak için bazılarının belgeyi bölümlediğini bilmeniz gerekir. Her html belgesi, içindekiler tablosu (TOC) için bir anahat (“veya”) oluşturmak amacıyla HTML5 anahat algoritmasına göre bölümlere ayrılabilir. Ana hat genel olarak görünmez (bu günlerde), ancak yazarlar html'yi, sonuçta ortaya çıkan anahat niyetlerini yansıtacak şekilde kullanmalıdır.

Tam olarak bu öğelere sahip bölümler oluşturabilir ve başka bir şey oluşturamazsınız :

  • alt bölümler oluşturma
    • <section> bölümler
    • <article> bölümler
    • <nav> bölümler
    • <aside> bölümler
  • kardeş bölümler veya alt bölümler oluşturmak
    • <h*>2 ile belirtilmemiş tipte bölümler (hepsi bunu yapmaz, aşağıya bakınız)
  • seviyeyi yükseltmek için geçerli açık (alt) bölümü kapatın

Bölümler şu şekilde adlandırılabilir:

  • <h*> oluşturulan bölümler kendilerini adlandırır
  • <section|article|nav|aside>bölümler, <h*>varsa birinci tarafından adlandırılacaktır
    • bunlar <h*>kendileri bölüm oluşturmayanlar

Bölümlerde bir şey daha var: aşağıdaki bağlamlar (örn. Öğeler) "anahat sınırları" oluşturur. İçerdikleri bölümler kendilerine özeldir:

  • belgenin kendisi ile <body>
  • tablo hücreleri ile <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>Ve<figure>
  • başka bir şey yok

Başlık

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Bu iki soruyu gündeme getiriyor:

Arasındaki fark nedir <article>ve <section>?

  • her ikisi de şunları yapabilir:
    • iç içe olmak
    • farklı bir bağlam veya yuvalama düzeyinde farklı bir fikir edinir
  • <section>kitap bölümleri gibiler
    • genellikle kardeşleri vardır (belki farklı bir belgede?)
    • birlikte bir kitaptaki bölümler gibi ortak bir şeyleri vardır
  • bir yazar, bir <article>, en azından en düşük düzeyde
    • standart örnek: tek bir blog yorumu
    • bir blog girişinin kendisi de iyi bir örnektir
    • bir blog girişi <article>ve onun yorumları <article>da bir<article>
    • bazı "tam" bir şey, benzer bir dizinin parçası değil
  • <section>Bir s <article>bir kitaptaki bölümler gibi
  • <article>bir <section>in bir ciltte şiirler gibidir (bir seri içinde)

Nasıl <header>, <footer>ve <main>fit?

  • bölümleme üzerinde sıfır etkiye sahiptirler
  • <header> ve <footer>
    • her bölümün bölgelerini işaretlemenize izin verir
    • bir bölüm içinde bile birkaç kez sahip olabilirsiniz
    • bu bölümdeki ana bölümden ayırmak
    • sadece yazarın beğenisiyle sınırlıdır
    • <header>
      • bu bölümün başlığını / adını işaretleyebilir
      • bu bölüm için bir logo içerebilir
      • bölümün üstünde veya üstünde olmak zorunda değildir
    • <footer>
      • bu bölümün kredilerini / yazarını işaretleyebilir
      • bölümün en üstüne gelebilir
      • hatta bir <header>
  • <main>
    • sadece bir kez izin verilir
    • üst düzey bölümün ana bölümünü işaret eder (yani belge, <body>yani)
    • alt bölümlerin kendileri için ana bölümleri yoktur
    • <main>hatta belgenin bazı alt bölümlerinde “gizlenebilir”, ancak belge <header>ve <footer>olamaz (bu işaretleme o alt bölümün üstbilgisini / altbilgisini işaretler)
      • ancak <article>bölüm 3'te izin verilmiyor
    • "gerçek olanı", belgenin üstbilgisi olmayan, altbilgisi olmayan, ana olmayan içeriğinden ayırt etmeye yardımcı olur, eğer durumunuzda mantıklıysa ...

1 akla gelir: anahat, algoritmasını, örtük olarak kısımlara
2 Ben kullanımını <h*>için kısaltma olarak <h1>, <h2>, <h3>, <h4>, <h5>ve <h6>
3 ne olduğu <main>izin <aside>veya <nav>, ama bu sürpriz değildir. - Aslında: <main>yalnızca (iç içe) azalan <section>bölümlerde gizlenebilir veya en üst düzeyde, yani<body>

— Robert Siemer
kaynak
33
Cevap bir şiir gibi. En sevdiğim kısım: sections in an article are like chapters in a book, articles in a section are like poems in a volume- gördüğüm en iyi ve en sezgisel articlevs sectionaçıklama!
— Sergey Lukin
1
Bu, birkaç mermi noktasında özetlenmemiş geniş bir bilgi birikimidir. Paylaşım için teşekkürler! Bazen SO'da en iyi cevap ne kabul edilir ne de en yüksek puandır.
3
Bunun klişe olduğunu biliyorum, ama "Bu kabul edilen cevap olmalı!". Dipnotlar ve her şey! Teşekkürler!
— Eugene
Eugene ve ft veya haklısın. Buna cevap verirken eksik ve yanlış cevapları oylayabileceğinizi unutmayın. Yazarları için bir suç değil, en iyi cevapların önce görülmesini sağlamanın maliyeti. Robert'ın seçilen cevap hakkındaki yorumuna ek olarak, web'den başka bir yerden de intihal (eksik) olduğu için beğenmedim.
— IAmNaN
Bu çok ayrıntılı cevap ve birçok şeyi netleştirdi, teşekkürler!
— Alaeddine
111

Div öğeleri yeni öğelerle değiştirilebilir: üstbilgi, gezinme, bölüm, makale, bir yana ve altbilgi.

Söz konusu belgenin işaretlemesi aşağıdaki gibi görünebilir:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Bu makalede A List Apart hakkında daha fazla bilgi bulabilirsiniz .

— cilerler
kaynak
25
Bu kazan plakası yapısı bu sayfadaki boşluğa değmez. 1) Bahsedilen HTML öğelerinin hiçbiri bir belgedeki herhangi bir konuma bağlı değildir. 2) Yanlış bir şekilde <header> ve <footer> 'ın belge seviyesi unsurları olduğu ima edilmektedir. 3) Yanlış bir şekilde <bölüm> 'ün sadece <parçacık> -çocuk olarak tasarlandığını ima eder. @DanDascalescu
— Robert
2
Daha fazla anlaşamadı @RobertSiemer. Bu hala HTML5 öğeleri hakkındaki en yaygın yanlış anlamalardan biridir ve sevgili biçimlendirme dilimiz için semantik bir handikap haline geliyor.
— kano
@RobertSiemer Re: 2), Bölümler içinde olduğu gibi belge düzeyinde öğeler olamaz <header>ve <footer>olamaz <section|article|nav|aside>?
— Flimm
1
@Flimm, evet yapabilirler. Demek istediğim: Cevap yanlış değil - çok fazla cevap vermiyor.
— Robert Siemer
63

HTML5 yapılandırması hakkında W3 wiki sayfasını okumanızı öneririm :

<header>Bir sitenin başlık içeriğini içermek için kullanılır. <footer> Bir sitenin altbilgi içeriğini içerir. <nav>Gezinme menüsünü veya sayfa için diğer gezinme işlevlerini içerir.

<article>
Bir RSS öğesi olarak bir araya getirildiğinde anlamlı olabilecek bağımsız bir içerik parçası, örneğin bir haber öğesi içerir.

<section>Farklı makaleleri farklı
amaçlara veya konulara gruplamak veya tek bir makalenin farklı bölümlerini tanımlamak için kullanılır.

<aside> Etrafındaki ana içerikle ilgili olan, ancak akışının merkezinde olmayan bir içerik bloğu tanımlar.

Bunlar bir resim burada temizledik ettik:

html5

Kodda, bu şöyle görünür:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

HTML5 öğelerinden bazılarını daha ayrıntılı olarak inceleyelim.

<section>

<section>Elemanı işlevi veya kobaylar alanının farklı farklı alanları ihtiva eden, ya da farklı bölümler halinde bir madde ya da katlı kesiliyor içindir. Bu durumda: "kenar çubuğu1" sitenin her sayfasında "RSS'ye abone ol" ve "Mağazadan müzik satın al" gibi çeşitli yararlı bağlantılar içerir. "ana", bu sayfanın blog yayınları olan ana içeriğini içerir. Sitenin diğer sayfalarında bu içerik değişecektir. Oldukça genel bir elementtir, ancak yine de düz eski olandan çok daha anlamsal bir anlamı vardır <div>.

<article>

<article>ile ilgilidir <section>, ancak belirgin şekilde farklıdır. Oysa <section>içeriğin veya işlevselliğin farklı bölümlerini gruplamak <article>için kullanılırken, tek tek blog gönderileri, videolar, resimler veya haber öğeleri gibi ilgili bağımsız içerik parçalarını içermek içindir. Bu şekilde düşünün - her biri kendi başına okumak için uygun olacak ve bir RSS özet akışında ayrı öğeler olarak sendikasyon yapmak mantıklı olacak birkaç içerik öğeniz varsa <article>, bunları işaretlemek için uygundur. Örneğimizde <section id="main">blog girişleri var. Her blog girişi RSS beslemesinde bir öğe olarak sendikasyon için uygun olur ve kendi başına, bağlam dışında okunduğunda mantıklı olur, bu nedenle <article> onlar için mükemmeldir:

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

Basit ha? Yine de, makalelerin içine bölümleri yerleştirmenin de mantıklı olabileceğini unutmayın. Örneğin, bu blog yayınlarının her birinin farklı bölümlerden oluşan tutarlı bir yapısı varsa, makalelerinizin içine de bölümler koyabilirsiniz. Bunun gibi bir şey olabilir:

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> ve <footer>

daha önce de belirttiğimiz gibi, <header>ve <footer>öğelerinin amacı sırasıyla üstbilgi ve altbilgi içeriğini sarmaktır. Özel örneğimizde, <header>öğe bir logo resmi <footer>içerir ve öğe bir telif hakkı bildirimi içerir, ancak isterseniz daha ayrıntılı içerik ekleyebilirsiniz. Ayrıca, her sayfada birden fazla üstbilgi ve altbilgiye sahip olabileceğinizi ve az önce tartıştığımız üst düzey üstbilgi ve altbilginin olabileceğini , her birinin içinde iç içe bir <header>ve <footer>öğeniz <article>olabileceğini unutmayın. belirli bir makale. Yukarıdaki örneğimize ek olarak:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

<nav>Eleman geçerli sitenin farklı sayfalarında veya geçerli sayfanın farklı alanlarda götürecek gezinme bağlantılarını ya da diğer yapılar (örneğin bir arama formu) işaretlerken içindir. Sponsorlu bağlantılar gibi diğer bağlantılar dikkate alınmaz. Elbette başlıklarını ve diğer yapılandırma öğelerini dahil edebilirsiniz <nav>, ancak zorunlu değildir.

<aside>

<aside>2. kenar çubuğunu işaretlemek için bir öğe kullandığımızı fark etmiş olabilirsiniz : en son konserleri ve iletişim bilgilerini içeren. Bu, <aside>ana akışla ilgili olan ancak doğrudan ona uymayan bilgi parçalarını işaretlemek için olduğu gibi mükemmel bir şekilde uygundur . Ve bu durumda ana içerik tamamen grupla ilgili! Diğer iyi seçimler <aside>, blog yayınlarının yazarı, bir grup biyografisi veya albümlerini satın almak için bağlantılar içeren bir grup diskografisi hakkında bilgi olacaktır.

Nereye gidiyor <div>?

Yani, sayfalarımızda kullanılacak tüm bu harika yeni unsurlarla, mütevazi günler <div>kesinlikle numaralanıyor mu? HAYIR. Aslında, <div> hala mükemmel bir kullanım alanı var. Bir içerik alanını gruplandırmak için uygun başka bir öğe olmadığında, genellikle içeriği stil / görsel amaçlar için birlikte gruplamak için bir öğe kullandığınızda kullanılacak olan başka bir öğe olmadığında kullanmalısınız. Yaygın bir örnek, <div>sayfadaki tüm içeriği sarmak için a ve ardından tarayıcı penceresindeki tüm içeriği ortalamak için CSS kullanmak veya içeriğin tamamına belirli bir arka plan görüntüsü uygulamaktır.

— Justin
kaynak
1
Ancak iç içe bölümler için, kullanımı daha mantıklı olmaz <section class="summary">ziyade <section id="summary">? Bir sayfada birden fazla makaleniz varsa, ikinci yöntem aynı sayfada yinelenen kimliklere (HTML taklit pasına) neden olur. Sağ?
— JP Lew
Evet, muhtemelen bu örnekte sınıfları kullanırdım.
— Justin
1
Bahsettiğiniz tüm etiketlerin daha sonra "gövde" ye eklenen bir "ana" etikete sarılmaması gerekir mi?
— Francisco Aguilera
1
mainEtiket eklemek iyi olurdu. Nereye konulacağına, sayfadaki benzersiz içeriğe göre karar verilir. Bu örnekte, sanırım sadece merkezin etrafına koyacağım section. Daha fazla bilgi için: w3.org/TR/2012/WD-html-main-element-20121217 "Bir dokümanın ana içerik bölümü, söz konusu dokümana özgü içeriği ve site gibi bir doküman kümesinde tekrarlanan içeriği hariç tutar gezinme bağlantıları, telif hakkı bilgileri, site logoları, afişler ve arama formları. "
— Justin
hala MDN belgeleri kadar belirsiz
— oldboy
23

[ ana cevabımdaki açıklamalar ]

hat 7. bölüm tüm web sitesi etrafında? Yoksa sadece bir div mi?

Ne. Stil için: kullanın, <body>zaten orada. Bölümleme / anlambilim için: örnek HTML'mde ayrıntılandırıldığı gibi , etkisi kullanışlılığa aykırıdır. Zaten sarılmış içerik için ekstra sarmalayıcılar iyileştirme değil gürültüdür.


satır 8. Her bölüm bir başlık ile başlar?

Hayır, yazarın tercihi "başlık" olarak özetlenen içeriğin nereye konacağıdır. Üstbilgi içeriği fazladan işaretleme yapılmadan açıkça tanınıyorsa, mükemmel bir şekilde işaretsiz kalabilir <header>. Bu aynı zamanda yazarın tercihi.


satır 23. Bu div doğru mu? yoksa bu bir bölüm mü olmalı ?

<div>Muhtemelen yanlış. Niyetlere bağlıdır: sadece şekillendirme için doğru olabilir mi? Semantik amaçlar için yanlışsa: diğer cevabımda gösterildiği gibi bir <article>bunun olması gerekir . hem şekillendirme hem de bölümleme için uygunsa da doğrudur.<article>

<section>burada yanlış görünüyor, çünkü bir kitaptaki bölümler gibi bundan önce veya sonra benzer bölümler yok. (Amacı budur <section>).


satır 24. Sol / sağ sütunu bir div ile bölün .

Hayır neden?


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

Evet, mantıklı.


satır 26. h1 -tag'inizi -tag başlığına koymak gerekli midir?

Hayır. Yalnız bir <h*>öğenin muhtemelen bir içeri girmesi gerekmez <header>(ama eğer istersen yapabilir), çünkü gelmek üzere olan şeyin başlığı zaten açıktır. - Örneğin <header>, bir sloganı (ile işaretlenmiş <p>) de içermesi mantıklı olacaktır .


Bunun olduğu karar hat 43 içerik, ana maddeye ilişkili değildir bölüm değil, bir kenara .

<aside>A'nın etrafındaki içerikle “teğetsel olarak ilgili ” olması gerektiği bir yanlış anlamadır . Mesele şudur: <aside>içerik yalnızca “ teğetsel olarak ilişkili” ise veya hiç değilse!

Yine de dışında <aside>iyi bir seçim olma, <article>hala daha iyi bir daha olabilir <section>“sıcak öğeler” ve “yeni öğeler” olarak bir kitapta iki bölümden gibi okunacak değildir. Birinden diğerine değil, bir bütünün iki parçası gibi değil, alternatif bir şey gibi gidebilirsiniz.


satır 44 H2 olmaksızın üstbilgi

Harika.


53. satır bölümü olmayan başlığının

Peki, hayır <header>, ama <h2>-başlık, bu bölümün hangi kısmının başlık olduğu konusunda oldukça net.


satır 63. Div (tüm ilgili olmayan) haber öğeleriyle

<article>veya <aside>daha iyi olabilir.


satır 64. h2 içeren başlık

Zaten tartışıldı.


satır 65. Hmm, div veya bölüm ? Veya bu div'i kaldırın ve yalnızca -tag makalesini kullanın

Kesinlikle! Çıkarın <div>.


satır 105. Altbilgi :-)

Çok makul.

— Robert Siemer
kaynak
Bir cevabı 3 eksik olarak bölmek yardımcı olmaz.
— Christian Strempfer
6
@ChristianStrempfer Pek çok insan buraya OP'nin belirli sorularına özel cevapları okumak için gelmiyor (bu cevap), ancak eldeki konu hakkında daha fazla bilgi almak için (ana cevabım) aslında faydalıdır. - Büyük bir tldr cevabı ile sadece ana cevabımdaki oyları bile alamayacağımı düşünüyorum. - Sen ne önerirsin?
— Robert Siemer
Onları tek bir cevapta birleştirmenizi öneririm. Koleksiyon oyları, onları bölmek için iyi bir argüman değildir. Özellikle üçüncü cevap tek başınıza duramaz, çünkü ana cevabınızdan bahsediyorsunuz.
— Christian Strempfer
@ChristianStrempfer Bu benim zevkime göre çok uzun olurdu. - Yine de masaları geliştirmeye çalışıyorum ...
— Robert Siemer
20

“Ana” cevabımdaki açıklamaya göre, söz konusu belgenin ana hatlarına göre işaretlenmesi gerekir.

Aşağıdaki iki tabloda göstereceğim:

  • orijinal HTML ve taslağı
  • olası bir amaç ve bunu yapan HTML

original html (shortened)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

original html relevant for outline
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































resulting outline
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


The outline of the original is
definitively not what was intended.

































































Aşağıdaki tabloda geliştirilmiş bir sürüm için teklifim gösterilmektedir. Aşağıdaki biçimlendirmeyi kullanıyorum:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

possible intended outline
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































modified html
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

resulting outline
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


The modified HTML reflects the
intended outline way better than
the original.
































































— Robert Siemer
kaynak
Mükemmel detaylı cevap için teşekkürler, çok aydınlatıcı. Konu hakkında daha fazla bilgi edinmek istiyorum, bu yüzden umarım benim için garip görünen bazı seçenekleri açıklayabilirsiniz. Onları bireysel yorum olarak yayınlayacağım.
— 1616'da
1. başlık bir kenara> div [id = logo] benim için önemsiz görünüyor. Şu anda bir başlık, ama anlamsal olarak değil. Dil div belki bir tür gezinme ve logo belki de tüm siteye bir tür başlık ama kesinlikle sayfaya değil.
— 1616'da
2. <MAKALE id = main> gerçekten sadece sunum amaçlı görünüyor. İçinde bir şey içermiyor. (Aynı <MAKALE id = ana-sağ> için de geçerlidir ama orada çok daha savunulabilir ("haberler ve sıcak" gibi).) En kötü div veya main kullanmanızı öneririz.
— 1616'da
3. <MAKALE id = haber öğeleri> bana bir kenara kullanabileceğim tipik bir durum gibi görünüyor. Ana makaleyle ilgisi yok, sadece bir haber kaynağı. Bireysel "küçük" makaleler olarak haberler içerdiğini kabul ediyorum.
— 1616'da
1
Teklifinizi düzenlemeyi düşünün, "teorik" cevabınız çok iyi yazılmış ama bence çoğu yeni başlayanlar sadece kod örneğine bakacaklar ve gerçekten kafa karıştırılmış olabilirler, çünkü teorik bölümle uyumlu değil.
— gorn
17

Ana hata: Belgenin tamamında "divit" var.
Neden bu?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Onun yerine:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Bu üstbilgiyi stilize etmek için CSS hiyerarşisini kullanın: body> section> header> h1, body> section> header> h2

Daha fazla, ... satır 63: başlık neden h2'yi sarar ?? Üstbilgiye daha fazla öğe eklemezseniz, tek bir h2 kullanın.
Unutmayın, yapınız belgeyi stilize etmek değil, kendi kendini açıklayan bir belge oluşturmaktır.

Bunu belgenin geri kalanına uygulayın; İyi şanslar ;)

— Covi
kaynak
4
@superUntitled <hgroup> artık HTML5'in bir parçası değil
— bradley.ayers
Rol = "banner", başlığın tamamında değil, h1'in kendisinde olmalı mı? Bu şekilde, bir ekran okuyucunun açıklayacağı tek bir metne işaret eder, bir HTML yığınının değil.
— Görev
11
Logo ve dil için h1 ve h2 kullanmak benim için bir anlam ifade etmiyor. Sağdaki küçük küçük dil düğmesi, bu sayfadaki ikinci en önemli içerik / bilgi mi olmalı? Ve logonuzu bir h1'in içine yerleştirirseniz, bir arama botu her sayfanın ana içeriğinin aynı olduğunu (zihnimde oldukça sıkıcı) görecektir. Ayrıca h1 ve h2 kullanımı için @MeanEYE cevabına bakınız. Bunun dışında semantiklere ihtiyacınız varsa semantik olmayan RDFa kullanın.
— Yolunuz
10

Makale etiketlerindeki item_1, item_2 vb. Kimliklerin neden kendileri yok? Bunun gibi:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

Sarıcı div'leri eklemek gereksiz görünüyor. Kimlik değerlerinin HTML'de anlamsal bir anlamı yoktur, bu yüzden bunu yapmak için tamamen geçerli olacağını düşünüyorum - ilk makalenin her zaman item_1, sadece geçerli sayfa bağlamında item_1 olduğunu söylemiyorsunuz. Kimliklerin bağlamdan bağımsız bir anlamı olması gerekmez.

Ayrıca, 26. satırdaki sorunuzla ilgili olarak, burada <header> etiketinin gerekli olduğunu düşünmüyorum ve "ana-sol" div'de kendi başına olduğu için bunu atlayabileceğinizi düşünüyorum. Makalelerin ana listesinde yer alsaydı, yalnızca tutarlılık uğruna <header> etiketini eklemek isteyebilirsiniz.

— Matt Browne
kaynak
2
Sadece orijinal örneği takip ediyordum ve aynı şeyi gereksiz sarıcı div'ler olmadan nasıl yapacağımı gösteriyordum. Kimlikler birçok nedenden ötürü orada olabilir ... bir kere, onlara işaret eden bağlantı bağlantıları olabilir.
— Matt Browne
5
  1. Bölüm yalnızca bir bölümü belgenin içine sarmak için kullanılmalıdır (bölümler ve benzerleri gibi)
  2. İle başlık NO: etiketi. Üstbilgi etiketi, sayfa üstbilgisi için bir sarmalayıcıyı temsil eder ve H1, H2 vb. İle karıştırılmamalıdır.
  3. Hangi div? : D
  4. Evet
  5. W3C Okullarından:

    Etiketi harici içeriği tanımlar. Harici içerik, harici bir sağlayıcıdan bir haber makalesi veya bir web günlüğünden (blog) bir metin veya bir forumdan bir metin veya harici bir kaynaktan gelen herhangi bir içerik olabilir.

  6. Hayır, başlık etiketinin farklı bir kullanımı var. H1, H2, vb. H1 en önemli belge başlıklarını temsil eder

Başkalarına cevap vermedim çünkü neye atıfta bulunduğunuzu tahmin etmek biraz zor. Başka sorularınız varsa lütfen bize bildirin.

— MeanEYE
kaynak
1
Cevaplarınız için teşekkürler! 3. noktada; Üzgünüm, satır numaraları doğru değildi. 3 noktası yerine line_23 olmalıdır; ayrıca yazımdaki satır değişikliklerine bakın.
— Bas van Dorst
Evet, aynı şeyi sitelerimde de yapıyorum. Genellikle DIV'ler saha yapısını oluşturmak için kullanılacaktır. HTML5'te üstbilgi, altbilgi ve benzer etiketleri tanıtmak, işleri biraz daha kolay hale getirmek içindir. DIV ile aynı şekilde davranırlar.
— MeanEYE
3
Kaynaklarınızı kontrol edin. W3c okulları sitesi bunun articlemutlaka harici bir kaynaktan olduğunu belirtmez . w3schools.com/html5/tag_article.asp
— chharvey
Hm, makalenin dış kaynaktan kullanılacağını bile düşünmedim. Bu eski bir cevabı bıraktı, bunun ne hakkında olduğunu hatırlayamıyorum. :)
— MeanEYE
# 1 ile hemfikirim. Bu BÖLÜM unsurlarının ASIDE'ler kadar anlamlı olduğunu düşünüyorum.
— Andy
2 
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

— Юрий Светлов
kaynak
1

Haberleri haber özetinde (satır 67, 80, 93) kullanmanız gerektiğini düşünmüyorum. Bölümü kullanabilir veya sadece ek div olabilir.

Bir makalenin kendi başına durabilmesi ve hala mantıklı olması veya eksiksiz olması gerekir. Eksik veya sadece bir özü olarak bir makale olamaz, daha fazla bir bölümdür.

'Daha fazla oku' düğmesini tıkladığınızda sonraki sayfa

— conordarcy
kaynak
1

EDIT: Maalesef kendimi düzeltmem gerekiyor.

Bir örnek içeren w3 özelliklerine bir bağlantı için https://stackoverflow.com/a/17935666/2488942 adresine bakın (daha önce baktığımın aksine).

Ama sonra .... İşte @Fez sayesinde bu konuda güzel bir makale.

Orijinal yanıtım:

W3 teknik özelliklerinin yapılandırılma şekli:

4.3.4 Bölümler

4.3.4.1 Gövde elemanı

4.3.4.2 Bölüm elemanı

4.3.4.3 Gezinme elemanı

4.3.4.4 Makale öğesi

....

bana göre sectiondaha yüksek olduğunu gösteriyor article. Bu cevapta belirtildiği gibi sectiontematik olarak ilgili içeriği gruplandırır. Bir makaledeki içerik, bence, en azından benim için tematik olarak ilişkilidir, bu nedenle en azından bana göre, sectiongruplara kıyasla daha yüksek bir seviyede olduğunu gösterir article.

Bence bu şekilde kullanılması gerekiyordu:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

veya bir haber sitesi için:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
— pandita
kaynak
0

Bu soruyu daha net bir şekilde açıklamak istiyorum, yanılıyorsam düzelt beni Facebook Duvarına bir örnek verelim

1. Duvar, sayfadan ayrı olduğunu gösteren "bölüm" etiketi altında gelir.

2. tüm yayınlar "makale" etiketi altında gelir.

3. Sonra tek bölüm var, hangi "bölüm" etiketi altında geliyor.

3. Biz "başlık" etiketi kullanabilirsiniz bunun için "X kullanıcı post" başlığı var.

4. Sonra yazı içinde üç bölüm bir Görüntüler / metin, gibi-paylaşmak-yorum düğmesi ve yorum kutusu var.

5. yorum kutusu için makale etiketini kullanabiliriz.

— Flicks Gorger
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.