HTML5 Semantik Öğeleri !

HTML5 Semantik. Anlambilim, bir dildeki sözcük ve deyimlerin anlamlarının incelenmesidir.

Anlamsal elemanlar = anlamı olan elemanlar.

Anlamsal öğeler nelerdir?

Bir semantik öğe, hem tarayıcı hem de geliştirici için anlamını açıkça açıklar.

Anlamsal olmayan öğelere örnekler : <div>ve <span>– İçeriği hakkında hiçbir şey söylemez.

Anlamsal öğelere örnekler : <form>, <table>ve <article>– İçeriğini açıkça tanımlar.

HTML5 anlamsal öğeleri, tüm modern tarayıcılarda desteklenir.

Ayrıca, eski tarayıcılara “bilinmeyen öğeleri” nasıl kullanacaklarını “öğretebilirsiniz”.

HTML5 Tarayıcı Desteği hakkında okuyun .

HTML5’te Yeni Anlamsal Öğeler

Birçok web sitesi HTML kodu içerir: <div id = “nav”> <div class = “header”> <div id = “footer”>
gezinmeyi, üstbilgiyi ve altbilgiyi belirtmek için.

HTML5, bir web sayfasının farklı bölümlerini tanımlamak için yeni anlamsal öğeler sunar:

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

HTML5 <section> Öğesi

<section>Eleman, bir belgenin bir bölümünü tanımlar.

W3C’nin HTML5 belgelerine göre: “Bir bölüm, tipik olarak bir başlık içeren, tematik bir içerik grubudur.”

Bir giriş sayfası normalde giriş, içerik ve iletişim bilgileri için bölümlere ayrılabilir.

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <article> Öğesi

<article>Eleman bağımsız, kendi kendine yeten içeriği belirtir.

Bir makale kendi başına mantıklı olmalı ve onu web sitesinin geri kalanından bağımsız olarak okumak mümkün olmalıdır.

Bir <article>elemanın kullanılabileceği örnekler :

Forum yazısı
Blog yazısı
Gazete makalesi

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

<section> veya tersi yönde <article> iç içe mi?

<article> Eleman bağımsız, kendi kendine yeten içeriği belirtir.

<section>Elemanın bir belgedeki bölümü tanımlar.

Tanımları, bu öğelerin nasıl iç içe yerleştirileceğine karar vermek için kullanabilir miyiz? Hayır yapamayız!

Böylece, Internet’te, <section>öğeler içeren <article>öğeler ve <article>öğeler içeren <section>öğeler içeren HTML sayfaları bulacaksınız .

<section>Öğeleri içeren <section> öğeleri ve <article>öğeleri içeren <article>öğeleri de bulacaksınız .

Bir gazete örneği: <article>Spor bölümündeki sporun her birinde teknik bir bölüm olabilir <article>.

HTML5 <header> Öğesi

<header>Öğesi bir belgenin veya bölüm için bir başlık belirtir.

<header>Eleman giriş içerik için bir kap olarak kullanılmalıdır.

<header>Bir belgede birden çok öğeniz olabilir .

Aşağıdaki örnek, bir makalenin üstbilgisini tanımlar:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML5 <footer> Öğesi

<footer>Öğesi bir belgenin veya bölümün altbilgisini belirtir.

Bir <footer>öğe, içerdiği öğe hakkında bilgi içermelidir.

Altbilgi genellikle belgenin yazarını, telif hakkı bilgilerini, kullanım şartlarına bağlantıları, iletişim bilgilerini vb. İçerir.

<footer>Bir belgede birkaç öğeniz olabilir .

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

HTML5 <nav> Öğesi

<nav>Eleman navigasyon bir dizi bağlantı tanımlar.

Belgenin tüm bağlantılarının bir <nav>öğenin içinde OLMAMASI gerektiğine dikkat edin . <nav>Eleman sadece gezinme bağlantılarının bulunduğu bir bloktur.

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

HTML5 <aside> Öğesi

<aside>Eleman (bir kenar çubuğu gibi) yerleştirilir içerikten ayrılan bir içeriği tanımlar.

<aside>İçerik çevreleyen içeriğiyle ilgili olmalıdır.

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 <figure> ve <figcaption> Öğeleri

Şekil başlığının amacı, görüntüye görsel bir açıklama eklemektir.

HTML5’te bir görüntü ve resim yazısı bir <figure> öğede birlikte gruplanabilir :

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

<img>Eleman, bir görüntü tanımlayan <figcaption> elemanı başlık tanımlar.

Neden Anlamsal Öğeler?

HTML4 ile geliştiriciler stil öğelerine kendi kimlik / sınıf adlarını kullandılar: üstbilgi, üst, alt, altbilgi, menü, gezinme, ana, kapsayıcı, içerik, makale, kenar çubuğu, topnav, vb.

Bu, arama motorlarının doğru web sayfası içeriğini tanımlamasını imkansız hale getirdi.

Yeni HTML5 öğeleri ( <header> <footer> <nav> <section> <article>) ile bu daha kolay olacaktır.

W3C’ye göre, bir Anlamsal Web: “Verilerin uygulamalar, işletmeler ve topluluklar arasında paylaşılmasına ve yeniden kullanılmasına izin verir.”

HTML5’teki Anlamsal Öğeler

Aşağıda HTML5’teki yeni semantik öğelerin alfabetik bir listesi bulunmaktadır.

Etiket	Açıklama
<article>	Bir makaleyi tanımlar
<aside>	İçeriği sayfa içeriğinden ayırır
<details>	Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar
<figcaption>	<figure> öğesi için resim yazısı tanımlar
<figure>	Resimler, diyagramlar, fotoğraflar, kod listeleri vb. Gibi bağımsız içeriği belirtir.
<footer>	Bir belge veya bölüm için altbilgi tanımlar
<header>	Bir belge veya bölüm için bir başlık belirtir
<main>	Belgenin ana içeriğini belirtir
<mark>	İşaretli / vurgulanmış metni tanımlar
<nav>	Gezinme bağlantılarını tanımlar
<section>	Belgedeki bir bölümü tanımlar
<summary>	<details> öğesi için görünür bir başlık tanımlar
<time>	Bir tarih / saat tanımlar

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …