Semantic HTML'nin Önemi
Semantic HTML, arama motorlarının ve ekran okuyucularının içeriği doğru anlamasını sağlar. SEO skoru artar, erişilebilirlik iyileşir.
Başlık H1
Başlık H2 Seviyesi
Başlık H3 Seviyesi
Başlık H4 — Daha ince
Lead paragraph — öne çıkan, daha büyük ve okunması kolay bir giriş cümlesi paragrafı burada yer alır.
<code_is_art />
KÜÇÜK METİN · UPPERCASE · TRACKED
Kalın metin, İtalik metin, altı çizili, üstü çizili,
işaretlenmiş, <kod>, Ctrl+K,
HTML,
H2O ve E=mc2.
"İyi yazılmış HTML, programcının şiiridir." — Anonim Geliştirici
Semantic HTML, içeriğin anlamını ve yapısını tarayıcıya ve geliştiricilere açıkça belirten etiketlerin kullanılmasıdır.
Erişilebilirlik özelliklerini ekleyerek ekran okuyucuların sayfayı doğru yorumlamasını sağlar.
İki sayıyı çarp, sonucu output ile göster:
| Element | Açıklama | Tip | Destek | Durum |
|---|---|---|---|---|
<canvas> |
2D/3D çizim alanı | Medya | HTML5+ | Aktif |
<dialog> |
Native modal pencere | İnteraktif | Modern | Aktif |
<details> |
Açılır/kapanır içerik | Yapı | HTML5+ | Beta |
<template> |
JS ile klonlanacak şablon | Script | Modern | Aktif |
<bdo> |
Metin yönünü değiştir | Metin | HTML4+ | Nadir |
<marquee> |
Kayan metin | Sunum | Eski | Deprecated |
| * Modern tarayıcılar HTML5 elementlerinin tamamını destekler. | ||||
HTML5 native <audio> kontrolü
<picture> + <source> + <img> responsive image
3 ayrı bölgeye tıkla — <map> + <area> ile yapıldı
Semantic HTML, arama motorlarının ve ekran okuyucularının içeriği doğru anlamasını sağlar. SEO skoru artar, erişilebilirlik iyileşir.
SIRALANMIŞ (<ol>)
SIRALANMAMIŞ (<ul>)
bdo RTL: Erbilen'in Sitesi
ruby: 漢字
var: x = y² + 2z
samp: Error: 404 Not Found
data: Yedi
wbr: Bu
HTML, web sayfalarının yapısını tanımlar. Semantic elementler ile içeriğin anlamını net şekilde ortaya koyar.
CSS, HTML elementlerinin görünümünü ve düzenini kontrol eder. Grid, Flexbox ve animasyonlar ile zengin UI mümkün.
JavaScript, sayfaya dinamizm katar. DOM manipülasyonu, event handling ve async işlemler ile interaktif deneyimler yaratır.