HTML ve CSS'ye Yeni Başlayanlar için (Bölüm 19): Web İçin Anlamsallık (2)

An şu anda HTML belgeler genellikle div elementleri kullanılarak yapılandırılır. Bu konteynerlerin biçimlendirilmesi ve konumlandırılması genellikle CSS ile yapılır. Ancak screenreader gibi yazılımlar için bu yaklaşım işe yaramaz çünkü belirli içeriklerin ne anlama geldiğini tanıyamazlar. Bu durum yeni yapılandırma elemanlarıyla değişecek.

Bu yeni elemanların iki önemli olanı section ve article'dir, bu öğreticide odaklanılanlar.

Makaleyi Tanımlama

article elementiyle metinleri (forum mesajları, gazete makaleleri vb.) makale olarak işaretleyebilirsiniz. Aşağıdaki örnek tipik bir makalenin tanımını göstermektedir.

<article>
   <h1>Web Uygulamaları Oluşturma (Bölüm 09): jQuery Mobile (1)</h1>
   <p>jQuery şüphesiz en bilinen JavaScript çerçevelerinden biridir. "Klasik" web sitelerinde jQuery zaten binlerce kez kullanılmaktadır...</p>
   ...
</article>

article elementi sayesinde içeriklerinizi anlamsal olarak yapılandırabilirsiniz.

Böyle bir şeyin nasıl görünebileceğini, bir blog örneği aracılığıyla çok güzel bir şekilde gösterebiliriz.

<article>
  <header>
    <h1>Web Uygulamaları Oluşturma (Bölüm 09): jQuery Mobile (1)</h1>
    <p>Yayınlanma Tarihi: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery şüphesiz en bilinen JavaScript çerçevelerinden biridir. "Klasik" web sitelerinde jQuery zaten binlerce kez kullanılmaktadır...</p>
  ...
  <footer>
    <p><small>PSD-Tutorials.de tarafından Telif Hakkı</small></p>
  </footer>
</article>

Bu örnekte, article elementi içinde, tipik başlık, ana ve alt bölme olarak bölme yapılır. Bu tür bir bölme, bloglarda oldukça sık karşılaşılan bir durumdur.

Bölümler Oluşturma

section elementiyle devam ediyoruz. Section elementi sayfa içinde farklı bölümlere böler. Bu bölümler örneğin bölümler, bölümler, sekmeler vb. olabilir. Section sayesinde giriş ve güncel bildirimler gibi alanları mantıklı bir şekilde birbirinden ayırabilirsiniz.

section, içerikleri gerçekten içeriksel açıdan ayırmak için kullanılır. div ile arasındaki farkı belirtilen öğelere sonunda bu öğreticinin sonunda daha ayrıntılı olarak değineceğiz.

Aşağıdaki örnek, tipik bir blog yapısını göstermektedir. Bu yapı, birçok blogda gerçekten ihtiyaç duyulan bir öğeyi içermektedir: yorum bölümü. Bu yorum bölümü, bir section elementi içinde tanımlanmıştır. section alanı içindeki her bir yorum, ayrı bir article elementine sığdırılmıştır.

<article>
  <header>
    <h1>Web Uygulamaları Oluşturma (Bölüm 09): jQuery Mobile (1)</h1>
    <p>Yayınlanma Tarihi: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery şüphesiz en bilinen JavaScript çerçevelerinden biridir. "Klasik" web sitelerinde jQuery zaten binlerce kez kullanılmaktadır...</p>
  ...

  <section>
    <h2>Yorumlar</h2>
    <article>
      <header>
      <h3>Yorum Yapan: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Bir Saat Önce</time></p>
    </header>
    <p>Eğitim için teşekkürler!</p>
    </article>
    <article>
      <header>
      <h3>Yorum Yapan: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">İki saat önce</time></p>
    </header>
    <p>Harika! Bana yardımcı oluyor.</p>
    </article>
  </section>
</article>

Burada da belirtmek gerekirse, header, footer vb. öğeler hakkında burada kullanılanları daha sonra daha detaylı bir şekilde ele alacağım. Şu aşamada şunu belirtmeliyim: Bu öğeler, içerikleri başlık ve altbilgi gibi bölümlere ayırarak, belgelerin daha fazla mantıklı bir şekilde yapılandırılmasını sağlarlar.

Farklı bir örnek, article ve section elementlerinin kombinasyonunu daha fazla açıklığa kavuşturabilir. Aslında, section elementini, her birinin kendi başlıklarına sahip mantıksal içerik bölgelerine ayırmak için kullanabiliriz.

<article> 
  <h1>Uygulama Geliştirme</h1> 
  <p>Bu yazıda, web uygulamalarının nasıl oluşturulacağını öğreneceksiniz.</p>
  <section> 
     <h2>Web Uygulamaları Oluşturma (Bölüm 09): jQuery Mobile (1)</h2> 
     <p>jQuery şüphesiz en bilinen JavaScript çerçevelerinden biridir.</p> 
   </section> 
  <section> 
     <h2>Web Uygulamaları Oluşturma (Bölüm 08): jQuery Hızlı Başlangıç</h2> 
     <p>JavaScript siteler için harika bir şeydir, sonuçta üzerinde çeşitli ilginç şeyler yapılabilir.</p> 
   </section> 
 </article>

Ayrıca, bir section elementi içinde article elementlerini tanımlamak da mümkündür. Tipik olarak bir yorum bölümü gibi bir örnek olabilir, zaten gösterildiği gibi. Ancak blogda ele alınan konu alanlarını bölme de mümkündür.

İşte buna da uygun bir örnek:

<section>
  <h1>Uygulama Geliştirme</h1>
  <article>
     <h2>Web Uygulamaları Oluşturma (Bölüm 09): jQuery mobile (1)</h2>
     <p>jQuery şüphesiz en bilinen JavaScript çerçevelerinden biridir.</p>
   </article>
  <article>
     <h2>Web Uygulamaları Oluşturma (Bölüm 08): jQuery'e Hızlı Giriş</h2>
     <p>JavaScript, web siteleri için harika bir şeydir çünkü üzerinde bir sürü ilginç şey yapılabilir.</p>
   </article>
 </section>

Ayrıca bir bölüm elementinin içinde başka bölüm elementleri olabilir. Yani iç içe geçmeler mümkündür. İşte buna da bir örnek:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>
      <h2>Hoş Geldiniz</h2>
      <p>Memnuniyetle karşılarız...</p>
    </section>
    <section>
      <h2>Öğreticiler</h2>
      <p>İşte en yeni öğreticilerimiz...</p>
    </section>
    <aside>
      <p>İletişim</p>
    </aside>
  </section>
  <footer>
    <p>© 2014 PSD-Tutorials.de</p>
  </footer>

Bu bölüm iç içe geçmesi aşağıdaki yapıyı oluşturur:

1. PSD-Tutorials.de

1.1 Hoş Geldiniz

1.2 Öğreticiler

1.3 İletişim

2. © 2014 PSD-Tutorials.de
   
   Bu tür yapılandırmalar da mümkündür.
   
   

div, article ve section arasındaki fark

div, article ve section arasındaki farkı anlamak biraz karmaşıktır. Aslında article elementi öncelikle blog gönderilerini yapılandırmak için tanımlanmıştır. section elementi aslında article elementinin bir seviyesi altında bulunmaktadır. Ayrıca section elementi içinde her zaman bir başlık tanımlanmalıdır. Gerçekte herhangi bir başlık tanımlanmasa bile ilgili element içinde teorik olarak bir başlık belirtilebilmesi gerekmektedir.

div elementlerinin HTML5'te de kötülenmediğini, aksine hala kullanılması gerektiğini unutmayın. Örneğin, elementleri bir araya getirme durumunda her zaman ilginçtir.

Son olarak, şimdiye kadar tanıtılan elementlerin görsel etkileri hakkında bir not. Gerçekte uygun bir biçimlendirme için CSS'ye ihtiyacınız vardır. Gösterilen elementlerin normal kullanımı tarayıcıda etki yaratmaz. Burada sadece içerikleri anlamsal olarak yapılandırırsınız. Görsellikle ilgili tüm detayları CSS ile düzenlersiniz.