Semantik HTML: 2019 İçin En İyi Uygulamalar

Yayınlanan: 2019-08-31

Semantik HTML, özellikle Google sayfa sıralaması algoritmalarını sürekli olarak değiştirdiği için her zamankinden daha önemli. Her sorgudaki en üst noktalar giderek daha rekabetçi hale geliyor. Gizli bir silaha ihtiyacınız var ve semantik HTML, cephaneliğinizde olması iyi bir şey. Web sitelerinizde bazı anlamsal kodlar kullanabilirsiniz, ancak önemli içerik için ne kadar çok eklerseniz, arama motorları sitenizi o kadar iyi tarayabilir ve potansiyel ziyaretçilere neler sunduğunuzu bilir.

Semantik HTML nedir?

Özetle, anlamsal HTML, insanların okuyabileceği ve anlayabileceği HTML'dir. Sadece kodlayıcılar ve geliştiriciler değil, herhangi bir insan ve eğer insanlar onu daha kolay okuyabiliyorsa robotlar da okuyabilir. Robotlar sitenizin yapısını daha kolay okuyabilirse, sitenizin çeşitli arama sorgularına ne kadar iyi dayandığı konusunda daha bilinçli bir karar verebilirler.

Temel olarak, arama motoru tarayıcılarına “bu bir blog yazısıdır” veya “bu bir gezinme menüsüdür” veya "hey, bu sadece alt bilgi, bu yüzden yinelenen içerik için beni incitmeyin, lütfen."

Ama bunu nasıl yapıyor? Çok spesifik olan bir dizi özel HTML5 etiketi kullanır. Bazı örnekleri inceleyelim ve kendiniz görebilirsiniz.

Metin biçimlendirme

Metin biçimlendirme, oradaki en yaygın anlamsal HTML'dir ve bunu her gün görürsünüz. Eskiden, kalın , italik , altı çizili vb. için biçimlendirmeyi belirtmek için tek harfler kullanılıyordu.

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

Semantik HTML ile, kalın metne güçlü kullanmak ve metin italikleştirmek güçlü önemini ya göster onlara (veya vurgulamak). İlginçtir ki, U hala metnin altını çizmek için kullanılıyor; bununla birlikte, MDN, metin süslemeli CSS aracılığıyla biçimlendirmeyi önerir : underline; onu ayırt etmek için.

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

Ayrıca göstermek için del düşkünüz ~~üstü çizili~~ silinen metin

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

Ve anlamsal HTML metin biçimlendirmesine bakışımızı bir vurgu ile bitireceğimizi düşündük. Kelimenin tam anlamıyla. Metnin etrafını işaretle kullanırsanız, içine aldığınız her şeyi vurgularsınız.

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

MDN, bunun güçlü kullandığınız şekilde kullanılmayacağını söylüyor. Metinde önemli bir şeyi belirtmek için güçlü kullanırsınız ve anlaşılmasıyla ilgili bir şeyi vurgulamak için işaret kullanırsınız.

Bölümler, Başlıklar ve Menüler

Belki de başlamanın en iyi yolu üstbilgi ve altbilgi kullanmaktır. Bilirsiniz, web sitelerinin oluşturmak ve uğraşmak için herkesin en sevdiği kısımlar. Geleneksel HTML ile şu şekilde kodlanmış bir başlığınız olabilir:

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

Bu koda bakarak, her şeyin ne olduğunu görebilirsiniz. Ancak, bu yalnızca neye baktığınızı biliyorsanız. Başlık, etiket satırı ve (inanılmaz derecede basit) menüyü ayıran birkaç iç içe div'iniz (konteyner) var. Bu kurulumda yanlış bir şey yok, ama kesinlikle doğru bir tarafı da yok. Bir adım daha ileri giderseniz, işleri biraz daha okunabilir kılmak için CSS kimliği ve sınıf işaretlemesini kullanabilirsiniz.

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

Semantik HTML ile işler çok daha temiz ve okunması daha kolay görünür, div'lere güvenmek zorunda kalmazsınız ve seçtiğiniz sınıflar ve kimlikler yalnızca stil için olabilir.

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

Okumak ve neler olduğunu anlatmak çok daha kolay değil mi? Eğer bu sayfanın başlığı ve bir navigasyon menüsü gösteren bir gez etiketi olduğunu bildiren bir başlık etiketine sahip. (Girişleri yatay olarak listelemek için ekstra stile ihtiyaç duymayacak kadar akıllıdır.)

Teknik olarak, stillerinizin doğru bir şekilde uygulandığından emin olmak ve web sitesinin belirli bir bölümüne bağlantı vermenin bir yolunu istiyorsanız, aşağıdaki kodu da kullanabilirsiniz. Bu durumda, bölüm etiketi, önceki örneklerde div etiketinin nasıl çalıştığına benzer şekilde çalışır. Tabii ki okunabilir olması ve insan gözü için anlamlı olması dışında.

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

Ek olarak, isteğe bağlı adıma isteğe bağlı bir adım olan id=”hero-section” kullanımına dikkat edin, ancak bölümü kendi başına bir CSS seçici olarak biçimlendirebilirsiniz.

paket servisler

Bir dış div kullanmak isteyebileceğiniz yerlerde bölümü kullanın.
Sayfanın hangi bölümünün başlığınız olduğunu belirtmek için başlık kullanabilirsiniz. Bunu, bir makale veya gönderide, o gönderinin web sitesinin kendisinden ayrı olan başlığını belirtmek için de kullanabilirsiniz.
Site için ana navigasyon menüsü ayarladığınızda nav kullanın. Gezinme , arama motorlarının bağlantıları bulmasının bir yolu değil, kullanıcıların sitenizde gezinmesinin ana yolunu bulmasıdır. Herhangi bir bağlantı koleksiyonu (kırıntılar vb. gibi) de gezinmeye dahil edilebilir.

altbilgi

Footer ile ilgili çok fazla bir şey söylemeye gerek yok ama belirtmekte fayda var. Birçok yönden, başlığa doğrudan bir analogdur. Geleneksel, temel bir altbilgi şöyle görünebilir:

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

Anlamsal bir altbilgi şöyle görünebilir:

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

Kuşkusuz, burada temel kurulumda çok fazla bir fark yok, ancak sitenizi gören robotlar açıklamayı takdir edeceklerdir. Ayrıca sayfa, gönderi veya site altbilgileri için altbilgi kullanabileceğinizi unutmayın.

Ana, Makaleler ve Ekler

Semantik HTML'nin diğer bir ana bileşeni makale etiketidir. O yanında bir yana da. Bunların her ikisi de sitenizin gerçek içeriğini yapılandırmanıza izin verir, böylece arama motorları birincil metnin ne olduğunu bilir, bu da onların çözdüğünüz soruna ve odaklandığınız konuya odaklanmalarını sağlar.

Normalde, bir blog yazısı veya sayfası basit bir HTML belgesidir, ancak üstbilgi, altbilgi, içerik, kenar çubukları, ekler vb. hepsi bir arada toplanabilir.

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

Şimdi, bu hoş bir kod değil, ama işe yarıyor. Ancak, hoş değil ve oluşturulduğunda okunabilir herhangi bir yere yakın görünmesi için oldukça iyi miktarda CSS gerektiriyor. main , makale ve kenara kullanarak, sayfayı daha okunaklı olacak şekilde kolayca yapılandırabilirsiniz.

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

Ancak, sayfanın ana içeriğini yalnızca bir kez belirtebileceğinizi unutmayın. Yani her sayfada yalnızca bir ana sayfa kullanabilirsiniz. Bir içindekiler tablosunu veya bağımsız içerik dizinini belirtmek için birden çok makaleyi tek bir ana başlık altında iç içe yerleştirebilirsiniz (hatta bu şekilde birden fazla H1 etiketini kullanarak bu gönderilerin bağımsız olduğunu arama motorlarına gösterebilirsiniz.

paket servisler

Sayfa başına tek bir ana etiket kullanın
Ayrı, bağımsız içeriği tanımlamak için sayfa başına birden çok makale etiketi kullanılabilir (sayfa başına birden çok H1 s dahil)
Kenara bir yazı veya sayfa içinde bir kenar çubuğu veya eki olarak kullanılabilir

Diğer, Daha Az Kullanılan Öğeler

Kuşkusuz, yukarıda tartıştığımız öğeler ve etiketler, anlamsal HTML'nin en çok kullanılan parçalarıdır. Sonuçta, internetteki hemen hemen her web sitesi bunların bir kombinasyonunu içerirken, desteklenen geri kalan semantik etiketler daha spesifik ve sınırlıdır. Bununla birlikte, amaçlarına hizmet ederken daha az kullanışlı değildirler ve etkileşim ve arama indeksleme konusunda son derece yardımcı olurlar.

Ayrıntılar ve Özet

Ayrıntılar ve özet öğeler, özellikle etkinleştirmedikçe (Divi veya diğer sayfa oluşturuculardaki bir akordeon modülü gibi) kullanıcılara gizlenebilecek genişleyen bir içerik katmanı oluşturur.

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

Özetin tüm alt öğeleri gizlenecek ve genişletilebilir olacak ve ayrıntılar öğesini kapatarak ek metin ekleyebilirsiniz.

Şekil ve Figür yazısı

Bunlar oldukça açıklayıcı. Şekil , gönderinizdeki bir tür görsel yardımcıdır. Fotoğraf, grafik, gömülü bir YouTube videosu, belki. O halde figcaption , yukarıdaki şeklin kullanımını açıklamak için eklediğiniz resim yazısıdır . Anlambilimin kullanımı için doğası gereği teknik olsalar da, bunu özellikle ana gönderide veya sayfada bir yardımcı olarak dizine eklenmesini istediğiniz herhangi bir içerik için kullanabilirsiniz.

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

Bu etiketler, örneğin bir sorunun çözümünü veya açıklamasını özellikle belirttiğiniz için, Google'da öne çıkan bir snippet elde etmenin mükemmel bir yoludur. Bunları kullanmanızı öneririz, çünkü yalnızca başlık eklemek ve biçimlendirmek için kullandığınız kodu kısaltmakla kalmaz, aynı zamanda şekli ve başlığı ayrı öğeler olarak değil, sayfanın tek bir öğesi olarak tutar.

Zaman

Zaman , daha nadir kullanılan etiketlerden biridir, ancak arama motorunun ilgili bir saat veya tarih olduğunu bilmesine özellikle ihtiyaç duyduğunuz bir etkinliğiniz veya özel durumunuz olduğunda, metni yalnızca kalın yazmak veya vurgulamak yerine bunu kullanın.

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

Datetime öğesini time öğesiyle kullanmak, geliştirmenize zamana çok daha iyi bir bağlantı sağlar ve bu da takvimler ve diğer çeşitli API'lerle entegre olmanıza olanak tanır. Sitenizden hatırlatıcılar gönderebileceksiniz ve insanlar daha sık geri gelecekler.

Çözüm

Anlamsal olmayan HTML kullanmak yanlış olmasa da, çalışırken alışkanlık edinirseniz, arama motoru sıralamanızın arttığını göreceksiniz. Bu önemli, ancak daha da önemlisi, sitenizi nasıl yapılandıracağınız ve şekillendireceğiniz konusunda kendinize zaman kazandıracak ve projede sizden sonra gelen insanlar için birçok baş ağrısını ve teknik borcu önleyeceksiniz. .

Anlamsal HTML için hangi en iyi uygulamaları takip ediyorsunuz?

Makalenin öne çıkan görseli whiteMocca / Shutterstock.com