semantic icon

HTML5 Anlamsal Unsurları

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.

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.

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.

248
PAYLAŞ

Bir cevap ve/veya yorum yazın

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