Semantik dildeki kelime ve deyimlerin anlamları çalışmadır.
Semantik elemanları anlamı olan unsurlardır.
Semantik Elemanlar nelerdir?
Bir semantik eleman açıkça tarayıcı ve geliştirici hem anlamını açıklar.
Olmayan anlamsal elementlerin örnekler: <div> ve <span> - içeriği hakkında hiçbir şey anlatır.
Semantik elemanlarının örnekleri: <form> , <table> ve <img> - Açıkça içeriğini tanımlar.
Tarayıcı Desteği
| Evet | Evet | Evet | Evet | Evet |
HTML5 anlamsal elementler tüm modern tarayıcılarda desteklenir.
Buna ek olarak şunları yapabilirsiniz "teach" nasıl idare eski tarayıcıları "unknown elements" .
Bu konuda okuyun HTML5 Tarayıcı Desteği .
HTML5'teki Yeni Semantik Elemanlar
: Birçok web sitesi gibi HTML kodu içeren <div id="nav"> <div class="header"> <div id="footer">
navigasyon, başlık ve altbilgi göstermek için.
HTML5, web sayfasının farklı bölümlerini tanımlamak için yeni semantik unsurları sunmaktadır:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Eleman
<section> öğesi bir belgede bir bölümü tanımlar.
W3C HTML5 belgelerine göre: "A section is a thematic grouping of content, typically with a heading."
Bir Web sitesinin ana sayfası tanıtımı, içerik ve iletişim bilgileri için bölüme ayrılmıştır olabilir.
Örnek
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Kendin dene " HTML5 <article> Eleman
<article> eleman bağımsız, kendi kendine yeten içeriği belirtir.
Bir makale kendi başına bir anlam ifade etmelidir ve web sitesinin geri kalanından bağımsız olarak okumak mümkün olmalıdır.
Bir burada örnekleri <article> eleman kullanılabilir:
- Forum sonrası
- Blog yazısı
- Gazete makalesi
Örnek
<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>
Kendin dene " Yuvalama Semantik Elemanlar
HTML5 standardında, <article> elemanının ilgili elemanların tam, kendi kendine yeten bir blok tanımlar.
<section> elemanı, ilgili elemanların bir blok olarak tanımlanır.
biz yuva elemanlarına nasıl yapılacağına karar vermek tanımları kullanabilir miyim? Hayır yapamayız!
İnternet üzerinde, HTML sayfaları bulacaksınız <section> elemanlar içeren <article> elemanları ve <article> içeren unsurların <sections> elemanlar.
Ayrıca içeren sayfalar bulacaksınız <section> öğeleri içeren <section> öğeleri ve <article> içeren unsurları <article> elemanlar.
Gazete: spor articles spor içinde section , bir teknik var section her article .
HTML5 <header> Eleman
<header> öğesi bir belgenin veya bölüm için bir başlık belirtir.
<header> elemanının giriş içerik için bir kap olarak kullanılmalıdır.
Birkaç olabilir <header> bir belgedeki öğeleri.
Aşağıdaki örnek, bir ürün için bir başlık tanımlar:
Örnek
<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>
Kendin dene " HTML5 <footer> Eleman
<footer> öğesi bir belgenin veya bölümün altbilgi belirtir.
A <footer> elemanı içeren öğesi hakkında bilgi içermelidir.
Altbilgi tipik, belge, telif hakkı bilgileri yazarı içeren vb kullanım şartları, iletişim bilgileri, bağlantılar
Birkaç olabilir <footer> bir belgedeki öğeleri.
Örnek
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
Kendin dene " HTML5 <nav> Eleman
<nav> eleman navigasyon bir dizi bağlantı tanımlar.
<nav> eleman gezinme bağlantılarının büyük bloklar için tasarlanmıştır. Ancak, bir belgede değil tüm bağlantılar bir iç olmalıdır <nav> elemanı!
Örnek
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Kendin dene " HTML5 <aside> Eleman
<aside> unsuru, yerleştirilir içerikten ayrılan bir içeriğini tanımlar (like a sidebar) .
kenara içerik çevreleyen içeriği ile ilgili olmalıdır.
Örnek
<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>
Kendin dene " HTML5 <figure> ve <figcaption> Elementler
kitap ve gazete, görüntülerle altyazıları yaygındır.
bir başlığın amacı bir resme görsel bir açıklama eklemektir.
HTML5 ile görüntüler ve başlıklar halinde bir araya toplandığı <figure> elemanlar:
Örnek
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. -
The Pulpit Rock, Norway.</figcaption>
</figure>
Kendin dene " <img> elemanı görüntü tanımlar, <figcaption> elemanı başlık tanımlar.
Neden HTML5 Elemanları Semantik?
HTML4 ile geliştiriciler kendi favori tarzı sayfa öğelerine özellik adlarını kullandı:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Bu imkansız arama motorlarının doğru web sayfası içeriklerini tespit etmek için yaptı.
Gibi HTML5 öğeleriyle: <header> <footer> <nav> <section> <article> , bu daha kolay hale gelecektir.
W3C, Semantik Web göre:
"Veriler, paylaşılan ve uygulamaları, işletmelerin ve topluluklar arasında yeniden kullanılmasını sağlar."
HTML5'teki Semantik Elemanlar
Aşağıda HTML5'teki yeni anlamsal elementlerin alfabetik listesidir.
Bağlantılar bizim tam gitmek HTML5 Referans .
| Etiket | Açıklama |
|---|---|
| <article> | bir makale tanımlar |
| <aside> | sayfa içeriğinden kenara içeriği tanımlar |
| <details> | Kullanıcı görüntülemek veya gizlemek anlamına ek ayrıntılar tanımlar |
| <figcaption> | Bir için bir başlık tanımlar <figure> elemanı |
| <figure> | vb resim, şekil, fotoğraf, kod girişler gibi müstakil içeriği belirtir |
| <footer> | Bir belgenin veya bölümün altbilgi tanımlar |
| <header> | Bir belgenin veya bölümün bir başlığı belirtir |
| <main> | Bir belgenin ana içeriğini belirler |
| <mark> | İşaretli / vurgulanan metni tanımlar |
| <nav> | navigasyon bağlantıları tanımlar |
| <section> | Bir belgedeki bir bölüm tanımlar |
| <summary> | Bir görünür bir başlık tanımlar <details> elemanı |
| <time> | tarih / saat tanımlar |