HTML5 Semantic Elements

Güncelleme Yayın

HTML ile ilgili neredeyse sınırsız denebilecek -en azından bir insanın ayırabileceği vaktin çok ötesinde- içerik üretildiğini düşünerek daha önce bir yazı yayınlama gereği duymadım. Ancak, HTML5 (HTML 4.01’in genişletilmiş sürümü de diyebiliriz) 2014 yılında duyurulduğundan bu yana kod yazma alışkanlıklarında da temel bazı değişikliklere neden oldu. Web sitesi ve/ya uygulamaları hazırlarken yoğunlukla div etiketiyle düzen ve katmanları oluşturmaktayız. Ancak, HTML5 ile birlikte düzenler için semantik elementler öne çıkarılan hususlardan biri oldu. Peki, semantik elementler nedir ve ne amaçla kullanılmaktalar?

Semantik Elementler (Semantic Elements)

Semantik (diğer bir ifade ile anlamsal) elementler, geliştirici ve tarayıcıyı için anlamlı bir karşılığı olan HTML etiketlerini ifade etmekte. Örneğin, <article>...</article> etiketi anlamlıdır. Çünkü, bu etiketi gördüğümüzde içeriğinde bir makale olduğunu varsayabiliriz.

HTML Örnek Layout Düzeni

Bu durum tarayıcılar için de benzer şekilde işler. Dolayısıyla, tarayıcı tarafından gerçekleştirilen işlemlerde bilgileri içerisinde bulundukları etiketlere göre anlamlandırılmaları kolaylaşmaktadır. Tabi bu taramayı internet tarayıcısı dışında arama motoru tarafından gerçekleştirilen taramalar ve hatta web kazıma bağlamında da ele alabiliriz. Yukarıdaki görselde de görüldüğü üzere alanların tanımlarını id ve/ya class’lar ile gerçekleştirebilmekteyiz. Id’ler benzersiz olmasına karşın class’ları tekrar tekrar kullanabilmekteyiz ve tahmin edileceği üzere, div ve span gibi semantik olmayan etiketler içerisinde tutulan veri verinin kendisi ele alınmadığı sürece anlamsızdır.

HTML5 Örnek Layout Düzeni

Ancak, aynı yapıyı semantik etiketlerle ele aldığımızda daha anlamlandırılabilir bir yapı ortaya çıkar. Diğer yandan, id ve class tanımlarına olan zorunluluğumuz da ortadan kalkacaktır. Elbette semantik etiketler bizim için yeni bir ifade değil. form, table, ul-ol, img gibi içeriğine dair anlam ifade eden etiketleri uzun zamandır kullanmaktayız. HTML5 bu anlamda bir geliştirme sunmaktadır.

HTML5 ile kullanım imkanına kavuşan anlamlı etiketlere alfabetik sıra ile bir bakalım.

Article

Article etiketi kendine yeten, birlik oluşturabilir veya tekrar kullanılabilir olarak ifade edilebilir.

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

Aside

Aside etiketi yüzeysel olarak alakalı içerikler için kenar çubuğu görevi görmektedir. Genelde bloglarda ilgili ve/ya benzer yazılar, ek bilgiler ve yine yazı ile ilgili diğer ilişkili alanlar burada yer alır.

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>
HTML5 Details

Details

Details etiketi kullanıcının ayrıntıları görebileceği/gizleyebileceği alanları tanımlar.

<section class="progress window">
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

Figcaption

Figcaption etiketi figure etiketi için açıklama düşmemizi sağlar.

<figcaption>
 <p>A duck.</p>
 <p><small>Photograph courtesy of News.</small></p>
</figcaption>

Figure

Figure etiketi, ağırlıklı olarak görseller olmak üzere diyagramlar, alıntılar ve kod parçacıkları gibi anlamlı içerikler için kapsayıcı olarak kullanılır.

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

Bir ekleme yapmakta fayda var. Görsellerde çoklu (boyut, format vb.) görsel tanımlarken picture etiketini kullanabilmekteyiz. Bu tanımlamaları net bir ifade paylaşılmamış olmasa da tarayıcı bağlamında sorunsuz şekilde figure içerisinde de kullanabiliriz.

Footer

Footer etiketi, bir sayfa veya bölüm (section) için altbilgi alanını ifade eder.

<body>
 <article>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer>
  <p>Published <time datetime="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</time></p>
 </footer>
 </article>
 <footer>
  <nav>
  <p><a href="/credits.html">Credits</a> —
     <a href="/tos.html">Terms of Service</a> —
     <a href="/index.html">Blog Index</a></p>
 </nav>
 <p>Copyright © 2009 Gordon Freeman</p>
 </footer>
</body>

Header

Header etiketi bir sayfa veya bölüm için giriş niteliğinde olan veya gezinme elemanlarını barındıran alanları ifade eder.

<body>
 <header>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
 </header>
 <article>
  <header>
   <hgroup>
    <h1>Fullscreen API</h1>
    <h2>Living Standard — Last Updated 19 October 2015</h2>
   </hgroup>
   <dl>
    <dt>Participate:</dt>
    <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
    <dt>Commits:</dt>
    <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
   </dl>
  </header>
  <p>To play today's games you will need to update your client.</p>
  ...
</body>

Main

Main etiketi belgenin baskın içeriğini kapsar.

<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/form/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Copyright © 2009 Gordon Freeman</footer>

Mark

Mark etiketi bir metnin işaretlenmesi/vurgulanması amacıyla kullanılır.

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

Nav

Nav etiketi gezinme bağlantılarına sahip bölümleri ifade eder.

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h1>Demos in Exampland</h1>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h1>Public demonstrations</h1>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h1>Demolitions</h1>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

Section

Section etiketi belge genelini veya uygulama bölümünü belirtir.

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

Summary

Summary etiketi details etiketi için altyazı/açıklama alanlarını belirtir.

<details>
 <summary>Automated Status: Operational</summary>
 <p>Velocity: 12m/s</p>
 <p>Direction: North</p>
</details>

Time

Time etiketi tarih veya saate bağlı verilerin makine tarafından okunabilir eşdeğerini işaret eder.

<time>2011-11-18</time>

Diğer HTML5 Etiketleri

Elbette yukarıda tanımlarına ve örneklere yer verilen etiketler dışında da HTML5 ile kullanıma kavuşan daha pek çok etiket mevcut; form etiketi altında anlam kazanan datalist, keygen, output, çokluortam dosyalarını tanımlayan audio, video, source, embed ve son olarak canvas, svg gibi. Son olarak, HTML5 geliştirmeleri sadece anlamlı etiketlerle sınırlı değil. Sunulan API‘ler aracılığıyla kolaylıkla web sayfalarımıza/uygulamalarımıza çeşitli özellikler kazandırabilmekteyiz. Bu API’ler ile ilgili detaylara bir sonraki yazıda değineceğim.


İleri Okumalar

Kaynakça

  1. Addison Wesley Longman, A history of HTML, (1998)
  2. HTML History
  3. Wikipedia: HTML
  4. Wikipedia: HTML5
  5. W3C: HTML 5
  6. HTML5 is a W3C Recommendation
  7. HTML – Living Standard — Last Updated 21 May 2020
  8. Elements
  9. Element content categories
  10. Element Interfaces
  11. HTML5, MDN web docs
  12. HTML Elements, MDN web docs