HTML Semantik Elemanları
Anlamsal öğeler = anlamı olan öğeler.
Semantik Öğeler Nelerdir?
Anlamsal bir öğe, anlamını hem tarayıcı hem de geliştirici için net bir şekilde tanımlar.
Anlamsal olmayan öğelere örnekler : <div>ve <span>- İçeriği hakkında hiçbir şey söylemez.
Anlamsal öğe örnekleri : <form>, <table>, ve <article>- İçeriğini açıkça tanımlar.
HTML'deki Semantik Öğeler
Birçok web sitesi, gezinmeyi, üstbilgiyi ve altbilgiyi belirtmek için <div id="nav"> <div class="header"> <div id="footer"> gibi HTML kodu içerir.
HTML'de bir web sayfasının farklı bölümlerini tanımlamak için kullanılabilecek bazı anlamsal öğeler vardır:
- <makale>
- <yan>
- <detaylar>
- <şekil yazısı>
- <şekil>
- <altbilgi>
- <başlık>
- <ana>
- <işaret>
- <nav>
- <bölüm>
- <özet>
- <zaman>
HTML <bölüm> Öğesi
<section>Öğe, bir belgedeki bir bölümü tanımlar .
W3C'nin HTML belgelerine göre: "Bir bölüm, tipik olarak bir başlık içeren tematik bir içerik gruplandırmasıdır."
<section>Bir elemanın nerede kullanılabileceğine dair örnekler :
- Bölümler
- Tanıtım
- Haber öğeleri
- İletişim bilgileri
Bir web sayfası normalde giriş, içerik ve iletişim bilgileri için bölümlere ayrılabilir.
Örnek
Bir belgede iki bölüm:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <makale> Öğesi
Öğe , <article>bağımsız, kendi kendine yeten içeriği belirtir.
Bir makale kendi başına anlamlı olmalı ve web sitesinin geri kalanından bağımsız olarak dağıtılabilir olmalıdır.
<article>Öğenin nerede kullanılabileceğine ilişkin örnekler :
- Forum gönderileri
- Blog gönderileri
- Kullanıcı yorumları
- Ürün kartları
- Gazete makaleleri
Örnek
Bağımsız, müstakil içeriğe sahip üç makale:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Örnek 2
<article> öğesinin stilini belirlemek için CSS kullanın:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
<makale>'yi <bölüm> içinde mi yoksa Versa Versa'ya mı yerleştiriyorsunuz?
Öğe , <article>
bağımsız, kendi kendine yeten içeriği belirtir.
<section>Öğe, bir belgedeki bölümü tanımlar .
Bu öğeleri nasıl iç içe geçireceğimize karar vermek için tanımları kullanabilir miyiz? Hayır yapamayız!
<section>Böylece, elementler içeren <article>elementler ve <article>elementler içeren elementler içeren HTML sayfaları bulacaksınız <section>.
HTML <header> Öğesi
Öğe , <header>tanıtım içeriği için bir kapsayıcıyı veya bir dizi gezinme bağlantısını temsil eder.
Bir <header>öğe tipik olarak şunları içerir:
- bir veya daha fazla başlık öğesi (<h1> - <h6>)
- logo veya simge
- yazarlık bilgileri
Not:<header> Bir HTML belgesinde birkaç öğeniz olabilir. Ancak, bir veya başka bir öğenin <header>içine yerleştirilemez .<footer><address><header>
Örnek
<makale> için bir başlık:
<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>
HTML <footer> Öğesi
<footer>Öğe, bir belge veya bölüm için bir altbilgi tanımlar .
Bir <footer>öğe tipik olarak şunları içerir:
- yazarlık bilgileri
- telif hakkı bilgisi
- iletişim bilgileri
- site haritası
- en iyi bağlantılara geri dön
- İlgili belgeler
Bir belgede birkaç <footer>öğeye sahip olabilirsiniz.
Örnek
Bir belgedeki alt bilgi bölümü:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav> Öğesi
<nav>Öğe, bir dizi gezinme bağlantısını tanımlar .
<nav>Bir belgenin tüm bağlantılarının bir öğenin içinde OLMAMASI gerektiğine dikkat edin . <nav>Öğe yalnızca ana gezinme bağlantıları bloğu için tasarlanmıştır .
Engelli kullanıcılar için ekran okuyucular gibi tarayıcılar, bu içeriğin ilk oluşturma işleminin atlanıp atlanmayacağını belirlemek için bu öğeyi kullanabilir.
Örnek
Bir dizi gezinme bağlantısı:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <yan> Öğesi
<aside>Öğe, yerleştirildiği içerikten başka bir içerik tanımlar (kenar çubuğu gibi) .
İçerik, dolaylı olarak çevreleyen <aside>içerikle ilgili olmalıdır.
Örnek
Yerleştirildiği içeriğin dışında bazı içerikleri görüntüleyin:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Örnek 2
<aside> öğesinin stilini belirlemek için CSS kullanın:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML <şekil> ve <figcaption> Öğeleri
<figure>etiketi, çizimler, diyagramlar, fotoğraflar, kod listeleri vb. gibi bağımsız içeriği belirtir .
etiketi, bir öğe <figcaption>için bir başlık tanımlar . <figure>Öğe , <figcaption>bir öğenin ilk veya son çocuğu olarak yerleştirilebilir <figure>.
<img>Öğe, gerçek görüntüyü/illüstrasyonu tanımlar .
Örnek
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Neden Semantik Öğeler?
W3C'ye göre: "Semantik bir Web, verilerin uygulamalar, işletmeler ve topluluklar arasında paylaşılmasına ve yeniden kullanılmasına izin verir."
HTML'deki Semantik Öğeler
Aşağıda, HTML'deki bazı anlamsal öğelerin bir listesi bulunmaktadır.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .