HTML5 İçeriksel Elemanlar

Semantik (Yunanca kökenli) dilin anlamını araştırma olarak tanımlanabilir.

Semantik elementler, anlam sahibi elementlerdir.

Semantik elementler nedir?

Semantik elementler, tarayıcıya ve geliştiriciye anlamını açıkça tanımlar.

AnlamsızElement örnekleri: <div> ve <span> - içerik hakkında bilgi sağlayamaz.

AnlamElement örnekleri: <form>, <table> ve <img> - içeriklerini net bir şekilde tanımlar.

Tarayıcı desteği

Evet Evet Evet Evet Evet

Tüm modern tarayıcılar HTML5 semantik elementlerini destekler.

Ayrıca, eski tarayıcıları "bilinmeyen elementler" işleme "yardım" edebilirsiniz.

Bu bölümde daha fazla bilgi edinmek için HTML5 tarayıcıları destekleyin.

HTML5'teki yeni semantik elementler

Birçok web sitesi, örneğin bu gibi HTML kodlarını içerir: <div id="nav"> <div class="header"> <div id="footer">.

HTML5, sayfanın farklı bölümlerini tanımlamak için yeni semantik elementler sağlar:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 İçeriksel Elemanlar

HTML5 İçeriksel Elemanlar

HTML5 <section> elementi

<section> elementi, belgedeki bölümleri tanımlar.

W3C'nin HTML belgesine göre: "Bölüm (section), genellikle bir başlık olan temalı içerik gruplarıdır."

Web sayfasını özet, içerik, iletişim bilgileri gibi bölümlere ayırabilirsiniz.

Örnek

<section>
   <h1>WWF</h1>
   <p>Dünya Doğa Fonu (WWF)...</p>
</section>

Kendi kendine deneyin

HTML5 <article> elementi

<article> elementi bağımsız, öznitelikli içerik belirler.

Bir belge kendi anlamına sahiptir ve web sitesinin diğer içeriklerinden bağımsız olarak okunabilir.

<article> elementinin uygulama senaryosu:

  • Forum
  • Blog
  • Haberler

Örnek

<article>
   <h1>WWF Ne Yapıyor?</h1>
   <p>WWF'nin görevi, dünyamızın doğal çevresinin bozulmasını durdurmak,</p>
  ve insanların doğayla uyum içinde yaşadığı bir gelecek inşa edin.</p>
</article>

Kendi kendine deneyin

İç içe geçmiş anlamlı elementler

HTML5 standartlarında, <article> elementi tam olarak ilgili elementler içeren bir öznitelik bloğu olarak tanımlanmıştır.

<section> elementi, ilgili element blokları olarak tanımlanmıştır.

Bu tanımları kullanarak elementleri nasıl içe aktarabileceğimizi karar verebilir miyiz? Hayır, cannot't!

İnternet'te, <section> elementinin <article> elementi içeren HTML sayfaları ve <article> elementinin <sections> elementi içeren sayfaları bulacaksınız.

Ayrıca, <section> elementinin <section> elementi içerdiğini ve <article> elementinin <article> elementi içerdiğini de göreceksiniz.

HTML5 <header> elementi

<header> elementi, belge veya bölüme başlık belirler.

<header> elementi, tanıtıcı içeriğin konteyneri olarak kullanılmalıdır.

Bir belgede birden fazla <header> elementi olabilir.

Aşağıdaki örnek, bir makaleye başlık belirledi:

Örnek

<article>
   <header>
     <h1>WWF Ne Yapıyor?</h1>
     <p>WWF'nin görevi:</p>
   </header>
   <p>WWF'nin görevi, dünyamızın doğal çevresinin bozulmasını durdurmak,</p>
  ve insanların doğayla uyum içinde yaşadığı bir gelecek inşa edin.</p>
</article>

Kendi kendine deneyin

HTML5 <footer> elementi

<footer> elementi, belge veya bölüme dipnot belirler.

<footer> elementi, içeren elementler hakkında bilgi sağlamalıdır.

Dipnot genellikle belgenin yazarı, telif hakkı bilgileri, kullanım şartları bağlantıları, iletişim bilgileri vb. içerir.

Bir belgede birden fazla <footer> elementi kullanabilirsiniz.

Örnek

<footer>
   <p>Yayınlayan: Hege Refsnes</p>
   <p>İletişim bilgileri: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Kendi kendine deneyin

HTML5 <nav> öğesi

<nav> öğesi, navigasyon bağlantı koleksiyonunu tanımlar.

<nav> öğesi, büyük navigasyon bağlantı bloklarını tanımlamak içindir. Ancak, belgedeki tüm bağlantılar <nav> öğesinde bulunmak zorunda değildir!

Örnek

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Kendi kendine deneyin

HTML5 <aside> öğesi

<aside> öğesi, sayfa ana içeriği dışındaki bazı içeriklerdir (örneğin, kenar çubuğu).

aside içeriği etrafıdaki içerikle ilgili olmalıdır.

Örnek

<p>Ailem ve ben bu yaz Epcot merkeziyi ziyaret ettik.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center, Florida'daki Disney World'de bir tema parkıdır.</p>
</aside>

Kendi kendine deneyin

HTML5 <figure> ve <figcaption> öğeleri

Kitaplar ve gazetelerde, görsellerle birlikte başlıklar oldukça yaygındır.

Başlık (caption)ın görevi görsel için görünen bir açıklama eklemektir.

HTML5 ile, görsel ve başlıklar birleştirilebilir <figure> Öğe içinde:

Örnek

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Kendi kendine deneyin

<img> Öğe görselleri tanımlar,<figcaption> Öğe başlıkları tanımlar.

Neden HTML5 öğelerini kullanmalıyız?

HTML4 kullanılırsa, geliştiriciler sayfa öğelerinin stillerini ayarlamak için sevdikleri özellik adlarını kullanırlar:

header, üst, alt, alt footer, menü, navigasyon, ana, konteyner, içerik, makale, kenar çubuğu, üst navigasyon, ...

Bu şekilde, tarayıcı doğru web içeriğini tanımlayamaz.

ve HTML5 elementleri, örneğin: <header> <footer> <nav> <section> <article> gibi bu sorunu çözmek için yeterlidir.

W3C'ye göre, Semantik Ağ:

“Uygulamalar, şirketler ve gruplar arasında veri paylaşımı ve yeniden kullanımına izin verir.”

HTML5'teki Semantik Elementler

Aşağıda alfabetik sırayla sıralanmış HTML5 yeni semantik elementleri listelenmiştir.

Bu bağlantılar tam HTML Referans Kılavuzuna yönlendirir.

Etiket Tanım
<article> Makaleleri tanımlar.
<aside> Sayfa içeriği dışındaki içerikleri tanımlar.
<details> Kullanıcıların görebilir veya gizleyebileceği ek ayrıntıları tanımlar.
<figcaption> <figure> elementinin başlığını tanımlar.
<figure> Görseller, grafikler, fotoğraflar, kod listeleri gibi dahili içerikleri tanımlar.
<footer> Doküman veya bölümün alt kısmını tanımlar.
<header> Doküman veya bölümün başlığını belirtir.
<main> Dokümanın ana içeriğini belirtir.
<mark> Önemli veya vurgulanan metni tanımlar.
<nav> Navigasyon bağlantılarını tanımlar.
<section> Dokümdaki bölümleri tanımlar.
<summary> <details> elementinin görülebilen başlığını tanımlar.
<time> Tarih/Zaman tanımlanır.