HTML5 ile birlikte yeni gelen bir çok etiket mevcuttur. Aşağıda ençok tercih edilen HTML5 etiketlerini inceleyiniz.
Yeni HTML Etiketleri
| Tag | Açıklaması |
|---|---|
| <article> | Belgedeki makaleyi belirtmek için kullanılır. |
| <aside> | Sayfa içeriğinden ayrı olan bağımsız içeriği tanımlar. |
| <command> | Kullanıcıların çağırabileceği bir komutu temsil eder. |
| <details> | Kullanıcıların görüntüleyebileceği ve gizleye bileceği ek ayrıntıları belirtir. |
| <dialog> | Bir iletişim kutusu tanımlamak için kullanılır. |
| <figacaption> | <figure> öğesi için bir resim yazısı tanımlar. |
| <figure> | Bağımsız içeriği tanımlar |
| <footer> | Web sayfasındaki alt bilgi ve footer kısmı için kullanılır. |
| <header> | Web sayfasındaki üst bilgi ve header kısmı için kullanılır. |
| <main> | O sayfaya ait ana içeriği tanımlar. |
| <mark> | İçerikteki vurgulanmış metni belirtir. |
| <nav> | Navigasyonu ve sayfa menü linklerini belirtir. |
| <progress> | Bir koşulun ya da bir durumun ilerleme sürecini gösterir. |
| <section> | Sayfadaki bağımsız bir bölümü tanımlamak için kullanılır. |
| <summary> | <details> öğesi için görünür bir başlık tanımlamak için kullanılır. |
| <time> | Tarihi ve saati tanımlamak için kullanılır. |
HTML5 Medya Öğeleri
| Tag | Açıklaması |
|---|---|
| <audio> | Sayfaya eklenen ses içeriğini tanımlar. |
| <embed> | Harici bir uygulamayı web sayfasına eklemek için bir çerçeve tanımlar. |
| <source> | <video>, <audio> gibi birden çok medya kaynağını tanımlamak için kullanılır. |
| <track> | Medya öğeleri için metin kaynaklarını tanımlada kullanılır. |
| <video> | Sayfaya eklenen video içeriğini tanımlar. |
HTML5 Grafik Öğeleri
| Tag | Açıklaması |
|---|---|
| <canvas> | Javascript kodları ile grafik çizmek ve sayfaya eklemek için kullanılır. |
| <svg> | Vektörel resimler ve şekiller eklemek için kullanılır. Websiteye logonuzu <svg> etiketini kullanarak eklemeyi deneyin. |
Kendi HTML5 Etiketlerinizi Ekleyin
Web tarayıcıların desteklemesi sayesinde yeni hileli etiket öğleri ekleyebilirsiniz. Aşağıdaki örnekte <fatih> etiketi için bir deneme yapıyoruz. Siz de kodu kendi dosyanıza yapıştırarak sonucu görebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("fatih") </script>
<style>
fatih {
display: block;
background-color: #e2e2e2;
padding: 50px;
font-size: 40px;
}
</style>
</head>
<body>
<h1>H1 Başlık Etiketi</h1>
<fatih>Merhaba Fatih</fatih>
</body>
</html>
Dosyanın Çıktısı
Kaynaklar