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
(satır sonu oluşturmak için) kendiliğinden kapanan etiketlerdir. HTML5 ile birlikte, bu etiketlerin sonuna eğik çizgi eklemek isteğe bağlı hale gelmiştir, ancak XHTML uyumluluğu için bazı geliştiriciler hala kullanır.

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.
*