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 …