HTML Etiketleri Nedir? Web İçeriğinin Yapı Taşları
İnternet dünyasının temelini oluşturan web sayfaları, milyonlarca kullanıcıya bilgi, eğlence ve hizmet sunar. Bu sayfaların arkasındaki görünmez mimari, HyperText Markup Language (HTML) adı verilen bir işaretleme diliyle inşa edilmiştir. HTML, web tarayıcılarına bir sayfanın içeriğini nasıl yapılandıracaklarını ve sunacaklarını bildiren bir dizi talimat setidir. Bu talimatların her biri, “HTML Etiketi” olarak adlandırılır. Bir web sayfasının omurgasını oluşturan HTML etiketleri, metinleri başlıklar, paragraflar, listeler haline getirir; görselleri, videoları ve bağlantıları sayfaya entegre eder ve genel olarak içeriğin anlamını ve yapısını tanımlar.
Bu makalede, HTML etiketlerinin ne olduğunu, nasıl çalıştıklarını, farklı türlerini, özelliklerini ve modern web geliştirmedeki önemini derinlemesine inceleyeceğiz. HTML etiketlerinin basit bir metin işaretleme aracından çok daha fazlası olduğunu, web’in erişilebilirliği, arama motoru optimizasyonu (SEO) ve kullanıcı deneyimi için kritik bir rol oynadığını göreceğiz.
HTML Etiketlerinin Temel Tanımı ve Yapısı
HTML etiketi, bir web sayfasındaki içeriğin türünü veya amacını tanımlayan, açılı parantezler (< ve >) arasına yazılmış bir anahtar kelimedir. Örneğin, bir metin parçasının bir paragraf olduğunu belirtmek için
etiketi kullanılırken, bir başlık için
etiketi tercih edilir.
HTML etiketlerinin çoğunluğu, bir "açılış etiketi" ve bir "kapanış etiketi"nden oluşur. Açılış etiketi, içeriğin başlangıcını işaret ederken, kapanış etiketi içeriğin sonunu belirtir ve açılış etiketine ek olarak bir eğik çizgi (/) içerir.
Örnek:
Bu bir paragraf metnidir.
Bu örnekte,
açılış etiketi,
ise kapanış etiketidir. Bu iki etiket arasındaki "Bu bir paragraf metnidir." ifadesi ise etiketin işaretlediği içeriktir. Açılış etiketi, içerik ve kapanış etiketinin tamamı birlikte bir "HTML öğesi"ni oluşturur. Yani, etiketler öğelerin işaretleyicileridir.
Bazı HTML etiketleri ise "boş etiketler" veya "kendiliğinden kapanan etiketler" olarak adlandırılır. Bu etiketlerin kapanış etiketine ihtiyacı yoktur çünkü herhangi bir içerik barındırmazlar. Genellikle tek bir işlevi yerine getirirler.
Örnek:
Bu örnekte, (resim eklemek için) ve
HTML Etiketlerinin Özellikleri (Attributes)
HTML etiketleri, içerikleri hakkında ek bilgi sağlamak veya davranışlarını değiştirmek için "özellikler" (attributes) adı verilen özel nitelikler alabilir. Özellikler her zaman açılış etiketinin içine yazılır ve isim="değer" çiftleri şeklinde tanımlanır.
Özelliklerin Yapısı:
İçerikÖrnekler:
* (Bağlantı) Etiketi İçin href Özelliği:
Örnek Bağlantı Burada href özelliği, bağlantının gideceği URL'yi belirtir.
* (Resim) Etiketi İçin src ve alt Özellikleri:
src özelliği resmin dosya yolunu, alt özelliği ise resmin ne olduğunu açıklayan alternatif metni belirtir (erişilebilirlik ve SEO için önemlidir).
* id ve class (Global Özellikler):
Bu özellikler hemen hemen her HTML etiketinde kullanılabilir ve bir öğeyi benzersiz bir şekilde tanımlamak (id) veya bir grup öğeyi sınıflandırmak (class) için kullanılır. Genellikle CSS ile stil vermek veya JavaScript ile etkileşim sağlamak için kullanılırlar.
Bu, özel bir paragraftır.
Özellikler, HTML etiketlerinin gücünü ve esnekliğini artıran temel unsurlardır. Bir etiketin temel işlevini yerine getirmesinin yanı sıra, özellikler sayesinde çok daha spesifik ve dinamik davranışlar sergilemesi sağlanır.
HTML Etiketlerinin Türleri ve Kullanım Alanları
HTML etiketleri, farklı amaçlar için tasarlanmış çok çeşitli kategorilere ayrılır. İşte en yaygın etiket türleri ve bunların ne işe yaradıkları:
Yapısal ve Anlamsal Etiketler
Bu etiketler, bir HTML belgesinin genel yapısını ve içeriğin anlamsal anlamını tanımlar. Modern web geliştirmede, içeriğin ne anlama geldiğini tarayıcılara, arama motorlarına ve yardımcı teknolojilere (ekran okuyucular gibi) bildirmek için anlamsal etiketlerin kullanılması büyük önem taşır.
* : Bir HTML belgesinin kök öğesidir. Tüm diğer HTML öğelerini içerir.
* : Belge meta verilerini (sayfa başlığı, karakter kodlaması, stil sayfaları, betikler vb.) içerir. Tarayıcıda görünmez.
* : Bir web sayfasının tüm görünür içeriğini (metin, resimler, bağlantılar, videolar vb.) içerir.
*
*
: Gezinme bağlantıları içeren bir bölümü tanımlar. Ana navigasyon menüleri için idealdir.*
*
: Bağımsız, kendi kendine yeten bir içeriği (örneğin, bir blog yazısı, haber makalesi, forum gönderisi) temsil eder.*
: Belgenin tematik olarak gruplandırılmış bir bölümünü tanımlar.
'dan daha genel bir gruplamadır.*
: Ana içeriğe dolaylı olarak bağlı olan içeriği (örneğin, kenar çubuğu, reklamlar, ilgili bağlantılar) temsil eder.*
: Bir belgenin veya bölümün altbilgisini tanımlar. Genellikle telif hakkı bilgileri, iletişim bilgileri veya ilgili bağlantılar içerir.*
: "Division" kelimesinin kısaltmasıdır. Anlamsal bir anlamı olmayan, jenerik bir blok seviyesi kapsayıcıdır. Genellikle CSS ile stil vermek veya JavaScript ile işlemek için kullanılır. Anlamsal etiketlerin uygun olmadığı durumlarda tercih edilir.
*
'un satır içi versiyonudur ve genellikle metin parçalarına stil vermek için kullanılır.
Metin Biçimlendirme Etiketleri
Bu etiketler, metnin görünümünü ve anlamsal önemini belirlemek için kullanılır.
*
-
: Başlık etiketleridir.
en önemli başlığı,
ise en az önemli başlığı temsil eder. Sayfa yapısı ve SEO için doğru hiyerarşi çok önemlidir.
*
: Bir paragrafı tanımlar. Web sayfalarındaki ana metin blokları için kullanılır.
*
*
*
*
*
*
: Yatay bir çizgi (bölücü) oluşturur (kendiliğinden kapanan etiket).
*
: Uzun alıntıları belirtir. Genellikle içeriği girintili gösterir.
*
: Önceden biçimlendirilmiş metni görüntüler. Metin, yazıldığı gibi (boşluklar ve satır sonları korunarak) tarayıcıda gösterilir. Genellikle kod blokları için kullanılır.
* Liste Etiketleri
Web sayfalarında bilgileri düzenli bir şekilde sunmak için kullanılırlar.
*
Bağlantı ve Medya Etiketleri
Web sayfalarını birbirine bağlamak ve görsel/işitsel içerik eklemek için kullanılırlar.
* href özelliği ile hedeflenen URL'yi belirtir.
Hakkımızda
target="_blank" özelliği bağlantının yeni bir sekmede açılmasını sağlar.
* src (kaynak) ve alt (alternatif metin) özellikleri zorunludur.
*
*
Tablo Etiketleri
Verileri satırlar ve sütunlar halinde düzenlemek için kullanılırlar.
*
: Bir tablo oluşturur.
*
: Tablonun başlık bölümünü (header) tanımlar.
*
: Tablonun gövde bölümünü (body) tanımlar.
*
: Tablonun altbilgi bölümünü (footer) tanımlar.
*
: Bir tablo satırı (table row) tanımlar.
*
: Bir tablo başlık hücresi (table header) tanımlar.
*
: Bir tablo veri hücresi (table data) tanımlar.
Form Etiketleri
Kullanıcıdan veri almak için etkileşimli formlar oluşturmak için kullanılırlar.
*
