HTML5 Semantic Elements
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.
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/veya 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 varsayabiliriz1.
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 veya 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ır2.
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ır3.
HTML5 ile kullanım imkanına kavuşan anlamlı etiketlere alfabetik sıra ile bir bakalım.
Article
Article4 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
Aside5 etiketi yüzeysel olarak alakalı içerikler için kenar çubuğu görevi görmektedir. Genelde bloglarda ilgili ve/veya 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>
Details
Details6 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
Figcaption7 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
Figure8 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 kullanabiliriz9.
Footer
Footer10 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
Header11 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
Main12 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
Mark13 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
Nav14 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
Section15 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
Summary16 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
Time17 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
, çoklu ortam dosyalarını tanımlayan audio
, video
, source
, embed
ve son olarak canvas
, svg
gibi18. Son olarak, HTML5 geliştirmeleri sadece anlamlı etiketlerle sınırlı değil. Sunulan API‘ler aracılığıyla kolaylıkla web sayfalarımızauygulamalarımıza çeşitli özellikler kazandırabilmekteyiz. Bu API’ler ile ilgili detaylara bir sonraki yazıda değineceğim.
İleri Okumalar
- Five Things You Should Know About HTML5, diveintohtml5.info
- Microdata
- Use of <picture> inside <figure> element in HTML5?, stackoverflow.com
- Using HTML sections and outlines, MDN web docs
- Semantic HTML5 Elements Explained (Dec 12, 2019), freecodecamp.org
- Vincent Bidaux, HTML5 semantic elements and Webflow: the essential guide (16 Dec 2016), webflow.com
- Element Interfaces ↩
- HTML5, MDN web docs ↩
- HTML Elements, MDN web docs ↩
- Sections. WHATWG ↩
- Interactive elements. WHATWG ↩
- Grouping content. WHATWG ↩
- Embedded content. WHATWG ↩
- Text-level semantics. WHATWG ↩
- Elements. WHATWG ↩
- Addison Wesley Longman, A history of HTML, (1998) ↩
- HTML History ↩
- Wikipedia: HTML ↩
- Wikipedia: HTML5 ↩
- W3C: HTML 5 ↩
- HTML5 is a W3C Recommendation ↩
- HTML – Living Standard — Last Updated 21 May 2020 ↩
- Elements. WHATWG ↩
- Element content categories ↩