⟨ HTML ELEMENTLERİ ⟩

ERBİLENİN
SİTESİ

Semantic işaretleme, form elemanları, medya, tablo, canvas, interaktif bileşenler ve daha fazlası

Keşfet ↓ Forma git

01 — Tipografi

Metin Stilleri

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

Satır İçi Elementler

Kalın metin, İtalik metin, altı çizili, üstü çizili, işaretlenmiş, <kod>, Ctrl+K, HTML, H2O ve E=mc2.

Alıntı & Detaylar

"İyi yazılmış HTML, programcının şiiridir." — Anonim Geliştirici
Semantic HTML nedir?

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.

WAI-ARIA ne işe yarar?

Erişilebilirlik özelliklerini ekleyerek ekran okuyucuların sayfayı doğru yorumlamasını sağlar.


02 — Form Elemanları

Formun Tüm Gücü

KİŞİSEL BİLGİLER
72%

İlerleme Çubukları

HTML95%
CSS88%
JavaScript76%

Output Elementi

İki sayıyı çarp, sonucu output ile göster:

×
=
42

03 — Tablo

Veri Tablosu

Tablo 1: HTML Elementleri Karşılaştırması
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.

04 — Medya

Canvas, SVG & Medya

Canvas — Canlı Partikül Animasyonu

SVG — İnline Vektör Grafik

SVG
Animasyonlu SVG Halka
Geometrik Animasyon

Audio Elementi

HTML5 native <audio> kontrolü

Picture & Image

Rastgele doğa fotoğrafı

<picture> + <source> + <img> responsive image

Map & Area — İnteraktif Görsel Harita

İnteraktif harita örneği Sol Bölge Orta Bölge Sağ Bölge

3 ayrı bölgeye tıkla — <map> + <area> ile yapıldı


05 — Semantik HTML

Anlam Taşıyan Yapı

MAKALE

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.

Liste Türleri

SIRALANMIŞ (<ol>)

  1. HTML öğren
  2. CSS ustal
  3. JS hâkim ol
  4. Deploy et

SIRALANMAMIŞ (<ul>)

  • Semantic elementler
  • Accessibility
  • Performance
  • SEO dostu yapı

BDO & Özel Elementler

bdo RTL: Erbilen'in Sitesi

ruby: 漢字Kanji

var: x = y² + 2z

samp: Error: 404 Not Found

data: Yedi

wbr: Buçokuzunbirkelimedir


06 — İnteraktif

Etkileşimli Bileşenler

Sayaç

0

Tooltip Örnekleri

✨ HTML tooltip!
CSS only, JS yok!
⚠️ Tehlikeli alan

Dialog

Tema Değiştir

Tab Bileşeni

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.

Accordion Bileşeni

HTML5 ile gelen canvas, JavaScript kullanarak 2D ve WebGL ile 3D grafikler çizmeni sağlayan bir bitmap alanıdır.
SVG vektörel (ölçeklenebilir, DOM'da), Canvas raster (piksel tabanlı, performanslı). Her ikisi farklı senaryolar için uygundur.
Custom Elements, Shadow DOM ve HTML Templates ile yeniden kullanılabilir, kapsüllenmiş bileşenler oluşturulabilir.

Template Klonla

Klavye Olayları

Sürükle & Bırak

Beni sürükle!
Buraya bırak →

07 — İstatistikler

HTML'nin Rakamları

140+
HTML ELEMENTİ
HTML5 ile birlikte gelen tüm native elementler
1993
DOĞUM YILI
Tim Berners-Lee'nin HTML'yi tanıttığı yıl
5.4B
KULLANICI
Dünya genelinde internet kullanan insan sayısı
98%
WEB SİTELERİ
HTML kullanan web sitelerinin oranı

🚀 Native Dialog

Bu, HTML5'in <dialog> elementi! JavaScript ile .showModal() çağrısıyla açılır. Native backdrop desteği var.