HTML Semantic (Anlamsal) Etiketler

Semantic Etiketler Nelerdir?

Anlamsal bir etiket , anlamını hem tarayıcıya hem de geliştiriciye açıkça açıklar.

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

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

HTML Anlamsal Etiketler

Pek çok web sitesi, gezinmeyi, üstbilgiyi ve altbilgiyi belirtmek için aşağıdaki gibi HTML kodu içerir;

<div id="nav"> 
<div class="header"> 
<div id="footer">
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML <section> Etiketi

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

HTML <section> etiketi aşağıdaki durumlarda kullanılabilir:

  • Yazı bölümleri
  • Giriş Kısmı
  • Haberler, Yazılar
  • İletişim Bilgileri

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

Aşağıdaki örnekte sayfa iki bölüme ayrılmıştır;

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>Hatay</h1>
  <p>Hatay, Türkiye'nin Akdeniz Bölgesi'nde, Akdeniz'in doğu ucunda kıyıları olan bir ilidir. Hatay ilinin merkezi Antakya'dır. Hatay ili, 2021 yılında 1.670.712 kişiden oluşan bir nüfusa sahip..</p>
</section>

<section>
  <h1>İstanbul</h1>
  <p>İstanbul, Türkiye'de Marmara Bölgesi'nde yer alan ve İstanbul ilinin merkezi olan şehirdir. Ekonomik, tarihî ve sosyo-kültürel açıdan önde gelen şehirlerden biridir. Şehir, iktisadi büyüklük açısından dünyada 34. sırada yer alır..</p>
</section>

</body>
</html>

HTML <article> Etiketi

Article bir sitede genellikle makalelerin yer aldığı bölümdür.

<article> Etiketi aşağıdaki gibi kullanılabilir.

  • Forum yazıları
  • Blog yazıları
  • Kullanıcı yorumları
  • Ürün kartları
  • Yazı veya haber içerikleri
<!DOCTYPE html>
<html>
<body>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome, Google tarafından geliştirilen ücretsiz bir web tarayıcısıdır. Eylül 2008'de Microsoft Windows sürümü yayımlanmış; daha sonra Linux, macOS, iOS ve Android sürümleri de geliştirilmiştir. Google, Chrome'un kaynak kodlarının büyük kısmını Chromium adlı açık kaynak projesi kapsamında paylaşır.</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox, Mozilla Vakfı ve onun alt kuruluşu Mozilla Corporation tarafından geliştirilen, özgür ve açık kaynak kodlu bir web tarayıcısıdır. Firefox; Windows, macOS, Linux, Android ve iOS işletim sistemlerinde kullanabilir.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge; Windows 10, Windows 11, Windows 10 Mobile ve Xbox One'da kullanılmak üzere Microsoft tarafından geliştirilen web tarayıcısı. Tüm cihaz türlerinde Internet Explorer'ın yerini alarak varsayılan web tarayıcısı olmak üzere tasarlandı.</p>
</article>

</body>
</html>

<article> etiketinde herhangi bir stil düzenlemesi yapmak için CSS kullanılabilir;

<!DOCTYPE html>
<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">
<h2>Google Chrome</h2>
<p>Google Chrome, Google tarafından geliştirilen ücretsiz bir web tarayıcısıdır. Eylül 2008'de Microsoft Windows sürümü yayımlanmış; daha sonra Linux, macOS, iOS ve Android sürümleri de geliştirilmiştir. Google, Chrome'un kaynak kodlarının büyük kısmını Chromium adlı açık kaynak projesi kapsamında paylaşır.</p>
</article>

<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox, Mozilla Vakfı ve onun alt kuruluşu Mozilla Corporation tarafından geliştirilen, özgür ve açık kaynak kodlu bir web tarayıcısıdır. Firefox; Windows, macOS, Linux, Android ve iOS işletim sistemlerinde kullanabilir.</p>
</article>

<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge; Windows 10, Windows 11, Windows 10 Mobile ve Xbox One'da kullanılmak üzere Microsoft tarafından geliştirilen web tarayıcısı. Tüm cihaz türlerinde Internet Explorer'ın yerini alarak varsayılan web tarayıcısı olmak üzere tasarlandı.</p>
</article>

</body>
</html>

HTML <header> Etiketi

<header >etiketi, tanıtım içeriği veya bir dizi gezinme bağlantısı için bir kapsayıcıyı temsil eder.

Bir <header> etiketi genellikle şunları içerir:

  • Bir veya daha fazla başlık <h1> – <h6>
  • Logo veya simgeler
  • Yazar bilgisi

Not : Bir HTML belgesinde birden fazla <header> etiketi bulunabilir. Ancak <header> <footer> <address> veya başka bir <header> etiketinin içerisine yerleştirilemez.

Aşağıdaki örnekte <article> etiketi içinde bir <header> yer almaktadır.

<!DOCTYPE html>
<html> 
<body>

 <article>
  <header>
    <h1>Deneme Nedir?</h1>
    <p>Deneme Detayları:</p>
  </header>
  <p>Deneme Şudur Budur.</p>
</article>

</body>
</html>

<footer> etiketi bir belge veya bölüm için alt bilgi tanımlamak için kullanılır.

Bu etiket aşağıdaki bilgileri içerebilir.

  • yazar bilgisi
  • telif hakkı bilgisi
  • iletişim bilgileri
  • site haritası
  • üst bağlantılar
  • benzer sayfalar

Bir HTML belgesinde birden fazla <footer> etiketi bulunabilir.

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Yazar: TurkYazilimci</p>
  <p><a href="mailto:info@turkyazilimci.com">info@turkyazilimci.com</a></p>
</footer>

</body>
</html>

HTML <nav> Etiketi

HTML <nav> etiketi gezinme bağlantıları, bir diğer değişle menüleri tanımlamak için kullanılır.

Bir sayfada her bağlantı için <nav> etiketi BULUNMAMALIDIR. <nav> etiketi yalnız temel sayfalar arasında gezinme bağlantısı oluşturmak için kullanılır.

<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
  <a href="/asp/">ASP</a>
  <a href="/csharp/">C#</a>
</nav>

</body>
</html>

HTML <aside> Etiketi

<aside> etiketi, yerleştirildiği içeriğin dışında bazı içerikleri (kenar çubuğu) tanımlar.

<aside> içeriği dolaylı olarak çevresindeki içerikle ilişkili olmalıdır.

<!DOCTYPE html>
<html>
<body>

<p>Türkiye veya resmî adıyla Türkiye Cumhuriyeti, topraklarının büyük bölümü Anadolu'da, küçük bir bölümü ise Balkan Yarımadası'nın güneydoğu uzantısı olan Trakya'da yer alan kıtalararası bir ülkedir.</p>

<aside>
  <h4>Ankara</h4>
  <p>Ankara, Türkiye'nin başkenti ve Ankara ilinin merkezi olan şehirdir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve İç Anadolu Bölgesinde yer alır. Ankara'nın 13 Ekim 1923'te başkent ilan edilmesinin ardından şehir hızla gelişmiş ve Türkiye'nin ikinci en kalabalık ili olmuştur.</p>
</aside>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>Türkiye veya resmî adıyla Türkiye Cumhuriyeti, topraklarının büyük bölümü Anadolu'da, küçük bir bölümü ise Balkan Yarımadası'nın güneydoğu uzantısı olan Trakya'da yer alan kıtalararası bir ülkedir.</p>

<aside>
  <h4>Ankara</h4>
  <p>Ankara, Türkiye'nin başkenti ve Ankara ilinin merkezi olan şehirdir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve İç Anadolu Bölgesinde yer alır. Ankara'nın 13 Ekim 1923'te başkent ilan edilmesinin ardından şehir hızla gelişmiş ve Türkiye'nin ikinci en kalabalık ili olmuştur.</p>
</aside>

<p>Türkiye veya resmî adıyla Türkiye Cumhuriyeti, topraklarının büyük bölümü Anadolu'da, küçük bir bölümü ise Balkan Yarımadası'nın güneydoğu uzantısı olan Trakya'da yer alan kıtalararası bir ülkedir.</p>
<p>Türkiye veya resmî adıyla Türkiye Cumhuriyeti, topraklarının büyük bölümü Anadolu'da, küçük bir bölümü ise Balkan Yarımadası'nın güneydoğu uzantısı olan Trakya'da yer alan kıtalararası bir ülkedir.</p>

</body>
</html>

HTML <figure> ve <figcaption> Etiketleri

<figure> etiketi resimler, diyagramlar, fotoğraflar, kod listeleri vb. gibi bağımsız içeriği belirtir.

<figcaption> etiketi, <figure> öğesi için bir başlık tanımlar.

<img> etiketi gerçek görüntüyü tanımlar.

<!DOCTYPE html>
<html>
<body>

<h2>TurkYazilimci</h2>

<p>TurkYazilimci ücretsiz bilişim eğitimi veren bir platformdur.</p>

<figure>
  <img src="turkYazilimciLogo.png" alt="TurkYazilimci" style="width:100%">
  <figcaption>Sitenin Güncel Logosu.</figcaption>
</figure>

</body>
</html>
3 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir