HTML5'te "bölüm" etiketi nasıl doğru kullanılır?

HTML5'te bir düzen oluşturmaya çalışıyorum ve birkaç farklı makale okuduktan sonra kafam karıştı. Nasıl kullanılması gerektiği konusunda biraz bilgi almaya çalışıyorum.

Aşağıda ileri geri gittiğim varyasyonlar:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Bir kap gibi davranmak için bölüm etiketini kullanabilir misiniz?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

<section>Etiketi kullanmanın doğru yöntemi nedir ?

Cevap mevcut spesifikasyonda:

Bölüm öğesi, bir belgenin veya uygulamanın genel bir bölümünü temsil eder. Bu bağlamda bir bölüm, genellikle bir başlık içeren tematik bir içerik gruplamasıdır.

Bölüm örnekleri, bölümler, sekmeli bir iletişim kutusundaki çeşitli sekmeli sayfalar veya bir tezin numaralandırılmış bölümleri olabilir. Bir Web sitesinin ana sayfası, bir giriş, haberler ve iletişim bilgileri için bölümlere ayrılabilir.

Yazarlar, öğenin içeriğini bir araya getirmenin mantıklı olacağı durumlarda, bölüm öğesi yerine makale öğesini kullanmaya teşvik edilir .

Bölüm elemanı jenerik konteyner öğesi değil . Biçimlendirme amacıyla veya komut dosyası oluşturmaya kolaylık sağlamak için bir öğeye ihtiyaç duyulduğunda, yazarların bunun yerine div öğesini kullanmaları önerilir. Genel bir kural, bölüm öğesinin yalnızca öğenin içeriği belgenin ana hatlarında açıkça listelenecekse uygun olmasıdır .

Referans:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Ayrıca bkz:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Görünüşe göre bu öğenin amacı hakkında çok fazla kafa karışıklığı var, ancak üzerinde anlaşılan tek şey, onun olduğu gibi genel bir paketleyici olmaması<div> . Bu bir CSS veya JavaScript kancayı (kesinlikle rağmen anlamsal amaçlarla kullanılan ve değil gerektiğini olabilir tarz ya da "metne" bırakılır).

Benim anlayışıma göre daha iyi bir örnek şunun gibi görünebilir:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Not <div>tamamen sigara semantik olmak, HTML Spec bunu sağlar, ancak gerekli olmadığını belgede her yerde kullanılabilir.

In yapılandırma HTML5 hakkında W3 wiki sayfasından , diyor:

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

Ve sonra temizlediğim bir resmi gösteriyor:

<article>Etiketi nasıl kullanacağınızı bilmek de önemlidir (yukarıdaki aynı W3 bağlantısından):

<article>ile ilgilidir <section>, ancak açıkça farklıdır. Oysa <section>içerik veya işlev ayrı bölümler gruplama içindir, <article>böyle bireysel blog yayınları, videolar, resimler veya haber öğeleri gibi içerik ilgili bireysel bağımsız parçalarını içeren içindir. Şöyle düşünün - her biri kendi başına okumak için uygun olan ve bir RSS beslemesinde ayrı öğeler olarak yayınlamak mantıklı olan 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, bir RSS beslemesinde bir öğe olarak yayınlanmak için uygun olacaktır ve kendi başına bağlam dışında okunduğunda anlam ifade eder, 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? Bununla birlikte, bölümleri, mantıklı olduğu yerlerde makalelerin içine de yerleştirebileceğinizi unutmayın. Örneğin, bu blog gönderilerinin her biri farklı bölümlerden oluşan tutarlı bir yapıya sahipse, makalelerinizin içine de bölümler koyabilirsiniz. Şunun gibi görünebilir:

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

  <section id="content">
  </section>

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

Anladığım kadarıyla, SECTION, sayfanın "akışının" önemli bir parçası olan (bir kenara değil) başlığı olan bir bölüm tutuyor. BÖLÜMler, bölümler, belgelerin numaralandırılmış bölümleri vb. Olabilir.

ARTICLE, toplu içerik içindir - örneğin gönderiler, haberler, hikayeler vb. MAKALE ve BÖLÜM tamamen ayrıdır - çok farklı kullanım durumları olduğundan biri olmadan diğerine sahip olabilirsiniz.

SECTION ile ilgili başka bir şey de, sayfanızda yalnızca bir bölüm varsa onu kullanmamanız gerektiğidir. Ayrıca, her bölümün bir başlığı olmalıdır (H1-6, HGROUP, HEADING). Başlıklar, BÖLÜM ile "kapsama alınmıştır", bu nedenle, örneğin ana sayfada (bir BÖLÜM dışında) bir H1 ve ardından bölümün içinde bir H1 kullanırsanız, ikincisi bir H2 olarak değerlendirilecektir.

Spesifikasyondaki örnekler yazı yazarken oldukça iyidir.

Dolayısıyla, ilk örneğinizde MAKALE olarak tanımlanamayan birkaç içerik bölümünüz varsa doğru olur. (Bir stil kancası için istemediğiniz sürece # birincil DIV'ye ihtiyacınız olmayacak küçük bir noktayla - P etiketleri daha iyi olurdu).

İkinci örnek, tüm SECTION etiketlerini kaldırırsanız doğru olur - bu belgedeki veriler makaleler, yazılar veya buna benzer bir şey olabilir.

SECTION'lar konteyner olarak kullanılmamalıdır - DIV bunun için hala doğru kullanımdır ve bulabileceğiniz diğer herhangi bir özel kutu.

Kesinlikle bölüm etiketini konteyner olarak kullanabilirsiniz. İçeriği bir div'den daha anlamsal olarak anlamlı bir şekilde gruplamak veya html5 spesifikasyonunun dediği gibi:

Bölüm öğesi, bir belgenin veya uygulamanın genel bir bölümünü temsil eder. Bu bağlamda bir bölüm, genellikle bir başlık içeren tematik bir içerik gruplamasıdır. http://www.w3.org/TR/html5/sections.html#the-section-element

Doğru yöntem # 2'dir. Belgenizin bir bölümünü tanımlamak için bölüm etiketini kullandınız. Http://www.w3.org/TR/html5/sections.html özelliklerinden :

Bölüm öğesi, genel bir kap öğesi değildir. Stil oluşturma amacıyla veya komut dosyası oluşturmaya kolaylık sağlamak için bir öğeye ihtiyaç duyulduğunda, yazarlar bunun yerine div öğesini kullanmaya teşvik edilir.

bu sadece yanlış: bir paketleyici değil. Öğe, bir belge taslağı oluşturmanıza yardımcı olmak için içeriğinizin anlamsal bir bölümünü belirtir. Bir başlık içermelidir. Bir sayfa sarmalayıcı öğesi (herhangi bir HTML veya XHTML türü için) arıyorsanız, Kroc Camen tarafından açıklandığı gibi öğeye doğrudan stil uygulamayı düşünün. Stil için hala ek bir öğeye ihtiyacınız varsa, bir. Dr Mike'ın açıkladığı gibi, div ölmedi ve daha uygun bir şey yoksa, muhtemelen CSS'nizi gerçekten uygulamak istediğiniz yerdir.

bunu kontrol edebilirsiniz: http://html5doctor.com/avoiding-common-html5-mistakes/