HTML Nedir?
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme (markup) dilidir.Yani HTML bir programlama dili değil, web tarayıcılarının anlayabileceği biçimde içerikleri tanımlayan bir dildir.
Kısacası:
HTML Ne İşe Yarar?
HTML, bir web tarayıcısına (örneğin Chrome, Edge, Firefox) hangi içeriğin nerede ve nasıl gösterileceğini söyler.Tarayıcı, bu HTML kodlarını okuyarak sayfayı kullanıcıya görsel olarak sunar.
HTML ile oluşturulabilen öğeler:
- Başlıklar (
<h1>,<h2>,<h3>...) - Paragraflar (
<p>) - Görseller (
<img>) - Bağlantılar (
<a>) - Listeler (
<ul>,<ol>) - Tablolar (
<table>) - Formlar (
<form>)
HTML’in Temel Yapısı
Her HTML dosyası.html uzantısına sahiptir ve aşağıdaki temel yapıyı içerir:
Kod:
İçeriği sadece üyelerimiz görebilir.Kod Açıklaması:
<!DOCTYPE html>→ Tarayıcıya HTML5 kullanıldığını söyler.<html>→ Sayfanın başlangıcıdır.<head>→ Başlık, meta bilgileri, stil ve betikleri içerir.<body>→ Kullanıcının gördüğü içeriktir.
HTML ve CSS Arasındaki Fark
HTML, yapıyı tanımlar; CSS (Cascading Style Sheets) ise görünümü düzenler.| Özellik | HTML | CSS |
|---|---|---|
| Görev | Sayfa iskeletini oluşturur | Görsel tasarımı sağlar |
| Kullanım Alanı | Başlık, paragraf, resim | Renk, boyut, konum |
| Örnek | <h1>Başlık</h1> | h1 { color: red; } |
HTML “ne” gösterileceğini, CSS “nasıl” gösterileceğini belirler.
HTML Etiketleri ve Görevleri
| Etiket | Görevi | Açıklama |
|---|---|---|
<h1> - <h6> | Başlık etiketleri | SEO açısından önemlidir, <h1> en yüksek seviyedir. |
<p> | Paragraf | Metin içerikleri tanımlar. |
<a href=""> | Bağlantı | Sayfalar arasında geçiş sağlar. |
<img src=""> | Görsel | Görüntü dosyası ekler. |
<ul> / <ol> | Liste | Sıralı veya sırasız liste oluşturur. |
<div> | Bölümleme | Sayfa düzeni oluşturmak için kullanılır. |
<form> | Form oluşturma | Kullanıcıdan veri almayı sağlar. |
<table> | Tablo | Satır ve sütun yapısı oluşturur. |
HTML5 Nedir?
HTML5, HTML dilinin en güncel ve gelişmiş sürümüdür.Modern web teknolojilerinin temelini oluşturur ve CSS3 ile JavaScript’i destekler.
HTML5’in getirdiği yenilikler:
- Video ve ses oynatma (
<video>,<audio>) - Canvas – Grafik çizimleri
- LocalStorage – Tarayıcıda veri saklama
- Responsive (duyarlı) yapı desteği
- SEO dostu semantik etiketler (
<header>,<footer>,<article>)
HTML ve SEO İlişkisi
HTML, arama motorlarının web siteni anlamasını sağlar.Google botları HTML etiketlerini tarayarak sayfanın konusunu belirler.
SEO açısından önemli HTML etiketleri:
<title>→ Sayfanın başlığını belirtir.<meta name="description">→ Sayfa açıklamasıdır.<h1>→ Ana başlıktır, anahtar kelime içermelidir.<alt>→ Görsellerdeki alternatif metindir.<a>→ İç bağlantılar (internal link) SEO’da güçlü bir etkendir.
Bir sayfada yalnızca bir adet
<h1> etiketi kullanılmalıdır; bu SEO için altın kuraldır.HTML ile Yapılabilecekler
HTML tek başına basit bir yapı sunsa da, CSS ve JavaScript ile birleştiğinde profesyonel web siteleri oluşturulabilir.HTML ile yapabileceklerin örnekleri:
- Kişisel blog sayfası
- Forum arayüzü (örnek: TeknolojiForum.com teması)
- İletişim formu
- Ürün tanıtım sayfası
- Kurumsal “Hakkımızda” bölümü
- Basit portföy sitesi
HTML Öğrenmeye Başlamak İçin İpuçları
- Temel etiketleri öğren:
<h1>,<p>,<a>,<img>,<div> - Basit bir sayfa oluştur:
“Merhaba Dünya” projesiyle başla. - Tarayıcı geliştirici araçlarını kullan:
(F12 tuşu ile HTML yapısını anlık inceleyebilirsin.) - Pratik yap: Her gün bir sayfa oluştur ve etiketleri dene.
- CSS ve JavaScript ile destekle: Görsel ve dinamik yönleri geliştir.
HTML Öğrenmek İçin En İyi Kaynaklar
| Kaynak | Tür | Açıklama |
|---|---|---|
| W3Schools | Online rehber | HTML etiketleri ve örnekleriyle pratik yap |
| freeCodeCamp | Etkileşimli eğitim | Ücretsiz HTML/CSS dersleri |
| Mozilla Developer Network (MDN) | Resmî dökümantasyon | HTML5 standartları |
| Udemy / Coursera | Video ders platformu | Uygulamalı eğitim içerikleri |
| CodePen / JSFiddle | Canlı test platformu | HTML kodlarını anında çalıştır |
Sık Sorulan Sorular (S.S.S)
1. HTML bir programlama dili midir?Hayır. HTML bir “işaretleme dili”dir; veri işlemez, sadece yapıyı tanımlar.
2. HTML olmadan web sitesi yapılabilir mi?
Hayır, çünkü her web sitesinin temelinde HTML bulunur.
3. HTML öğrenmek ne kadar sürer?
Temel seviyeyi birkaç günde öğrenebilirsin. Gelişmiş seviyeye geçmek 1–2 ay sürebilir.
4. HTML tek başına yeterli mi?
Basit siteler için evet, ancak profesyonel web projeleri için CSS ve JavaScript gereklidir.
5. HTML SEO’ya nasıl katkı sağlar?
Doğru başlık, meta etiketleri ve semantik yapı sayesinde Google sayfanı daha iyi anlar.
Sonuç:
HTML, internetin temeli ve web geliştirmenin ilk adımıdır.
Basit yapısıyla öğrenmesi kolay, etkisi ise oldukça büyüktür.
CSS ve JavaScript ile birleştiğinde profesyonel, hızlı ve SEO uyumlu siteler inşa etmenin yolunu açar.
Kısacası: HTML, dijital dünyanın iskeletidir; web’i anlamak, HTML ile başlar.
Googlebot, siteni genellikle 2–3 günde bir yeniden tarar; aktif içerik eklemek bu süreyi kısaltır.
Tarayıcı önbelleğini yönetmek, hem bant genişliği hem SEO için kritiktir.
Dünya üzerinde satılan ilk domainin symbolics.com olduğunu biliyor musunuz? (1985)
Ortalama bir web sitesi ziyaretçisi 3 saniyede karar verir: Kalacak mı, çıkacak mı?
SSL sertifikası olmayan sitelerin %70’i Google aramalarında geriye düşüyor.
Mobil cihazlardan gelen internet trafiği artık %60’ı geçmiş durumda!
“robots.txt” dosyası, arama motorlarıyla iletişimin gizli dilidir.
En hızlı yüklenen web siteleri genelde 2 MB’tan küçük boyuttadır.
“404 hata sayfası” bile kullanıcı deneyiminin bir parçasıdır!
“.com” uzantısı 1985’te kullanılmaya başlandı, yani internetin en eski uzantısıdır.
Her 39 saniyede bir web sitesi siber saldırıya uğruyor.
Sayfa başlıklarını 60 karakteri geçirmezsen Google’da tam görünür.
En çok ziyaret edilen 3 site: Google, YouTube, Facebook.
Kullanıcılar bir web sitesine ortalama 50 milisaniyede ilk izlenimi verir!
Veritabanı yedeklerini otomatikleştirmek, birçok felaketi önler.
WordPress, tüm internet sitelerinin %43’ünden fazlasını oluşturuyor.
Favicon simgesi, marka güveni için küçük ama etkili bir detaydır.
Karanlık mod, mobil kullanıcıların %70’i tarafından tercih ediliyor.
DNS yapılandırması sitenin hızında kritik öneme sahiptir.
“Alt etiketi” sadece SEO için değil, erişilebilirlik için de zorunludur.
Tarayıcı önbelleğini optimize etmek, site hızını ikiye katlayabilir.
Bir sayfa 3 saniyeden geç açılıyorsa, ziyaretçilerin %50’si çıkıyor!
Lazy Load ve WebP formatı birlikte kullanıldığında sayfa boyutu %40 azalır.