semantic icon

HTML5 Anlamsal Unsurları

234

HTML5, yeni unsurları ile daha iyi daha iyi doküman yapısı sunmaktadır. Konu yeni değil. 2014 yılının son aylarında HTML5 yayınlanmıştı. Unsurları da yavaş yavaş kullanılmaya başladı ve yaygınlaştı. Bunları hatırlatma olarak yeniden gözden geçirelim. Mümkün olan azami şekilde de kullanalım.

HTML5 Anlamsal Unsurlarının Alfebetik Listesi

ETİKETAçıklama
<article>Bir makaleyi tanımlar
<aside>İçeriği sayfa içeriğinden ayırır
<details>Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar
<figcaption><figure> unsuru için altyazı
<figure>Görseller, resimler, şema, fotoğraflar, kod listeleri vb. gibi içeriği belirtir.
<footer>Bir belge veya bölüm için altbilgiyi tanımlar
<header>Bir belgenin veya bölümün başlık ve üstbilgisini belirtir
<main>Belgenin ana içeriğini belirtir
<nav>Gezinme bağlantılarını tanımlar
<section>Belgedeki bir bölümü tanımlar
<summary><details> öğesi için görünür bir başlığı tanımlar
<time>Tarih / saat tanımlar

Semantic Elements

Tüm unsur/ öğelerin listesini kaynağımız w3schools sayfasında bulabilirsiniz.

WP Handle

WP HANDLE: All-in-one WordPress Service

Anlamlı Öğeler

HTML5 anlamsal öğeleri sayesinde web sitelerimizi daha anlamlı kodlayabiliyoruz. Görsel kısmının yanında Anlamsal kodlama ile anlamlı siteler yapmamız arama motoru optimizasyonuna yardımcı olur. Verilerin işlenmesi çok daha hızlı olur.

Bazı Örnekler

Bir çok div yerine doğrudan anlamlı öğeleri kullanıyoruz.

  • Artık site menüleri için menu kullanmıyoruz. Nav öğesi kullanıyoruz.
  • Yazılarımızı, içeriğimizi article içinde gösteriyoruz.
  • Görsellerimizi figure içinde belirtiyoruz.
  • Section ile makale bölümlerimizi ayırıp, düzenliyoruz.
  • Sayfada, içerik dışında belirtmek istediklerimizi aside ile belirtiyoruz.
  • Footer öğesini hem sayfanın en alt bölümü için, hem de içeriklerin altbilgi bölümü için kullanabiliyoruz.
  • Aynı şekilde header unsuru da site, sayfa üst bölümü ve üstbilgi bölümü belirtmek için kullanılır.

Bunlar bazı en temel sayılabilecek örnekler. Tüm öğeleri CSS class ile isteğiniz gibi kişileştirebilirsiniz. Tabii unsurların varsayılan CSS özelliklerine de mutlaka bakın. Fazladan ve gereksiz olarak CSS dosyanıza kod eklemenize gerek kalmasın.

Bir cevap veya yorum yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


E-posta ile abone ol

Bu site spamları azaltmak için Akismet kullanmaktadır. Yorum verilerinizin nasıl işlendiğini Akismet Privacy üzerinden öğrenebilirsiniz.