Anlamsal HTML

100'den fazla HTML öğesi ve özel öğe oluşturma olanağıyla, içeriğinizi işaretlemenin sayısız yolu vardır ancak bazı yollar (özellikle anlamsal olarak) diğerlerinden daha iyidir.

Anlamsal, "anlamı ilgili" anlamına gelir. Anlamsal HTML yazma, içeriğinizi her öğenin görünümüne değil, anlamına göre yapılandırmak için HTML öğelerini kullanmak anlamına gelir.

Bu seri henüz pek fazla HTML öğesini kapsamadı ancak HTML bilmeseniz bile aşağıdaki iki kod snippet'i, semantik işaretlemenin içerik bağlamını nasıl sağlayabileceğini gösteriyor. Her ikisi de kaydırma yapmak için ipsum lorem yerine kelime sayısı işlevini kullanıyor. "30 kelime"yi hayal gücünüzü kullanarak 30 kelimeye genişletin:

İlk kod snippet'i, anlamsal değeri olmayan <div> ve <span> öğelerini kullanmaktadır.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Bu kelimelerin ne anlama geldiğini anlayabiliyor musunuz? Pek sayılmaz.

Bu kodu semantik öğelerle yeniden yazalım:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Hangi kod bloğu anlamı aktardı? Yalnızca <div> ve <span> öğelerinin anlamsal olmayan öğelerini kullanarak, ilk kod bloğundaki içeriğin neyi temsil ettiğini tam olarak bilemezsiniz. Anlamsal öğelerin yer aldığı ikinci kod örneği, kodlayıcı olmayan bir kişinin bir HTML etiketiyle hiç karşılaşmadan amacı ve anlamı çözebilmesi için yeterli bağlam sağlar. Geliştiricinin, içeriği anlamasa bile (yabancı dildeki içerik gibi) sayfanın ana hatlarını anlaması için kesinlikle yeterli bağlam sağlar.

Anlamsal öğeler anlam ve yapı sağladığından ikinci kod bloğunda içeriği anlamadan da mimariyi anlayabiliyoruz. İlk üst bilginin sitenin banner'ı olduğunu ancak <h1> büyük olasılıkla site adıdır. Altbilgi, sitenin altbilgisidir: Beş kelime, bir telif hakkı beyanı veya işletme adresi olabilir.

Anlamsal işaretleme sadece geliştiricilerin okumasını kolaylaştırmak için işaretlemeyi değil, aynı zamanda otomatik araçların işaretlemeyi deşifre etmesini kolaylaştırmayı amaçlar. Geliştirici araçları, semantik öğelerin makine tarafından okunabilir bir yapı da nasıl sağladığını gösterir.

Erişilebilirlik nesne modeli (AOM)

Tarayıcı, alınan içeriği ayrıştırırken doküman nesne modelini (DOM) ve CSS nesne modelini (CSSOM) oluşturur. Daha sonra, bir erişilebilirlik ağacı da oluşturulur. Ekran okuyucular gibi yardımcı cihazlar, içeriği ayrıştırmak ve yorumlamak için AOM'yi kullanır. DOM, dokümandaki tüm düğümleri içeren bir ağaçtır. AOM, DOM'un anlamsal bir sürümü gibidir.

Bu doküman yapılarının ikisinin de Firefox'un erişilebilirlik panelinde nasıl oluşturulduğunu karşılaştıralım:

İkinci ekran görüntüsünde, ikinci kod bloğunda yer alan dört önemli rol yer alıyor. "Navigasyon" için uygun şekilde <header>, <main>, <footer> ve <nav> olarak adlandırılmış anlamsal yer işaretlerini kullanır. Yer işaretleri, web içeriği için bir yapı sağlar ve ekran okuyucu kullanıcılarının içeriğin önemli bölümlerinde klavyede kolayca gezinmesini sağlar.

<header> ve <footer> öğelerinin, diğer önemli noktalarla iç içe yerleştirilmediğinde sırasıyla banner ve contentinfo rollerine sahip önemli noktalar olduğunu unutmayın. Chrome'un AOM'si bunu şu şekilde gösterir:

Chrome geliştirici araçlarına baktığınızda, semantik öğeleri kullandığınız ve kullanmadığınızda erişilebilirlik nesnesi modeli arasında önemli bir fark olduğunu görürsünüz.

Anlamsal öğe kullanımının erişilebilirliğe yardımcı olduğu, anlamsal olmayan öğelerin kullanımının ise erişilebilirliği azalttığı açıktır. HTML, genellikle varsayılan olarak erişilebilir durumdadır. Geliştiriciler olarak görevimiz, hem HTML'nin varsayılan erişilebilir doğasını korumak hem de erişilebilirliği en üst düzeye çıkarmamızı sağlamaktır. AOM'yi geliştirici araçlarından inceleyebilirsiniz.

role özelliği

role özelliği, bir öğenin doküman bağlamındaki rolünü açıklar. role özelliği, serideki hemen hemen her şeyin tanımlandığı WHATWG HTML spesifikasyonu yerine ARIA spesifikasyonu tarafından tanımlanan genel bir özelliktir. Diğer bir deyişle, tüm öğelerde geçerlidir.

Anlamsal öğelerin her birinin, bazıları bağlama bağlı olan örtülü bir rolü vardır. Firefox erişilebilirlik geliştirici araçları ekran görüntüsünde gördüğümüz gibi, üst düzey <header>, <main>, <footer> ve <nav> öğelerinin tamamı önemli noktalardır. <main> içine yerleştirilmiş <header> ise bir bölümdür. Chrome ekran görüntüsünde bu öğelerin ARIA rolleri listelenmiştir: <main> main, <nav> navigation ve <footer>, dokümanın alt bilgisi olduğundan contentinfo. Dokümanın başlığı <header> olduğunda varsayılan rol, bölümü global site başlığı olarak tanımlayan banner olur. <header> veya <footer> bir bölümlendirme öğesi içine yerleştirildiğinde, önemli bir rol değildir. Her iki geliştirici aracının ekran görüntüleri de bunu gösteriyor.

Öğe rolü adları, AOM'yi oluştururken önemlidir. Bir öğenin anlamı veya "rol", yardımcı teknolojiler ve bazı durumlarda arama motorları için önemlidir. Yardımcı teknoloji kullanıcıları, anlamlar arasında gezinmek ve içeriği anlamak için anlamlara güvenirler. Öğenin rolü, kullanıcının istediği içeriğe hızlı bir şekilde erişmesini sağlar ve daha da önemlisi, bu rol, ekran okuyucu kullanıcısına odaklanılan etkileşimli öğeyle nasıl etkileşimde bulunacağını bildirir.

Düğmeler, bağlantılar, aralıklar ve onay kutuları gibi etkileşimli öğelerin tamamının dolaylı rolleri vardır, tümü klavye sekmesi sırasına otomatik olarak eklenir ve varsayılan olarak beklenen kullanıcı işlemi desteği bulunur. Örtülü rol veya açık role değeri, kullanıcıyı öğeye özel varsayılan kullanıcı etkileşimleri beklemesi konusunda bilgilendirir.

role özelliğini kullanarak, etikette belirtilenden farklı bir rol de dahil olmak üzere herhangi bir öğeye bir rol verebilirsiniz. Örneğin, <button>, button dolaylı rolüne sahiptir. role="button" ile herhangi bir öğeyi anlamsal olarak bir düğmeye dönüştürebilirsiniz: <p role="button">Click Me</p>.

Bir öğeye role="button" eklenmesi, ekran okuyuculara öğenin bir düğme olduğu bilgisini verir ancak öğenin görünümünü veya işlevselliğini değiştirmez. button öğesi, sizin herhangi bir şey yapmanıza gerek kalmadan pek çok özellik sunar. button öğesi, dokümanın sekme sıralaması sırasına otomatik olarak eklenir. Diğer bir deyişle öğe, varsayılan olarak klavyeye odaklanabilir. Hem Enter hem de Boşluk tuşu düğmeyi etkinleştirir. Düğmeler ayrıca, HTMLButtonElement arayüzü tarafından kendilerine sağlanan tüm yöntem ve özellikleri de içerir. Düğmeniz için anlamsal düğmeyi kullanmıyorsanız bu özelliklerin tümünü tekrar programlamanız gerekir. <button> kullanmak çok daha kolay.

Anlamsal olmayan kod bloğu için AOM'nin ekran görüntüsüne geri dönün. Anlamsal olmayan öğelerin örtülü rollerinin olmadığını unutmayın. Her öğeye bir rol atayarak anlamsal olmayan sürümü anlamsal hale getirebiliriz:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

role özelliği herhangi bir öğeye anlam eklemek için kullanılabilir ancak bunun yerine, ihtiyacınız olan örtülü role sahip öğeleri kullanmalısınız.

Anlamsal öğeler

Kendinize "Hangi öğe bu işaretleme bölümünün işlevini en iyi şekilde temsil ediyor?" diye sormanız genellikle söz konusu iş için en iyi öğeyi seçmenizle sonuçlanır. Etiketlerin anlamsal anlamı olduğundan, seçtiğiniz öğe ve dolayısıyla kullandığınız etiketler, görüntülediğiniz içeriğe uygun olmalıdır.

HTML, içeriğin görünümünü tanımlamak için değil, içerik yapılandırmak için kullanılmalıdır. Görünüm, CSS dünyasıdır. Bazı öğeler belirli bir şekilde görünecek şekilde tanımlanmış olsa da bir öğeyi kullanıcı aracısı stil sayfasının o öğeyi varsayılan olarak nasıl sağladığına bağlı olarak kullanmayın. Bunun yerine, her bir öğeyi semantik anlamına ve işlevine göre seçin. HTML'yi mantıksal, semantik ve anlamlı bir şekilde kodlamak, CSS'nin amaçlandığı şekilde uygulanmasını sağlamaya yardımcı olur.

Kod yazarken bu iş için doğru öğeleri seçerseniz HTML'nizi yeniden düzenlemeniz veya yorum yapmanız gerekmez. İş için doğru öğeyi kullanmayı düşünüyorsanız çoğunlukla iş için doğru öğeyi seçersiniz. Aksi takdirde muhtemelen almazsınız. Her öğenin anlamını ve doğru öğeyi seçmenin neden önemli olduğunu bildiğinizde, genellikle fazla ek çaba harcamadan doğru seçimi yapabilirsiniz.

Sonraki bölümde, doküman yapınızı oluşturmak için anlamsal öğeleri kullanacaksınız.

Öğrendiklerinizi sınayın

Anlamsal HTML bilginizi test edin.