- Konu sahibi
- #1
HTML tag, tarayıcıya bir içeriğin ne olduğunu veya sayfadaki görevini bildiren, açılı ayraçlarla (
HTML tag'leri sayfanın iskeletini kurar. Metni paragraf, başlık, bağlantı, liste, görsel veya bölüm olarak tanımlamak için kullanılır. Görsel tasarımın tamamı tag'lerin görevi değildir; renk, boşluk ve yazı tipi gibi görünüm kararları çoğunlukla CSS ile verilir. HTML'de öncelik, içeriğin anlamını ve yapısını doğru belirtmektir.
Aşağıdaki örnekte
Attribute, açılış tag’inin içine yazılan ve element hakkında ek bilgi veren niteliktir. Çoğu ad-değer biçimindedir;
Bir HTML tag'inin nasıl çalıştığını görmek için aşağıdaki içeriği
Başarılı sonuçta tarayıcıda bir başlık, bir paragraf ve bağlantı görünür. Dosya boş açılırsa dosyanın gerçekten
Burada:
Çoğu içerik tag'i açılış ve kapanış çiftiyle kullanılır:
En yaygın hata, tag ile attribute'u karıştırmaktır.
Ayrıca her metni
Etiket olarak yorumlanmaması için kaynakta
Hayır.
< ve >) yazılan işaretlemedir. Örneğin <p> bir paragrafın başladığını, </p> ise bittiğini belirtir. Teknik olarak tag, kaynak kodundaki açılış ya da kapanış işaretidir; açılış tag'i, içerik ve kapanış tag'i birlikte bir HTML elementini oluşturur.HTML tag'leri sayfanın iskeletini kurar. Metni paragraf, başlık, bağlantı, liste, görsel veya bölüm olarak tanımlamak için kullanılır. Görsel tasarımın tamamı tag'lerin görevi değildir; renk, boşluk ve yazı tipi gibi görünüm kararları çoğunlukla CSS ile verilir. HTML'de öncelik, içeriğin anlamını ve yapısını doğru belirtmektir.
Tag, element ve attribute farkı
Aşağıdaki örnekte
<a> ve </a> tag'leri, bunların arasındaki metinle birlikte bir bağlantı elementini oluşturur:
Kod:
<a href="https://example.com">Örnek site</a>Attribute, açılış tag’inin içine yazılan ve element hakkında ek bilgi veren niteliktir. Çoğu ad-değer biçimindedir;
disabled gibi boolean nitelikler yalnız adlarıyla da yazılabilir. Örneğin href bağlantı hedefini, src görsel dosyasını, alt ise görselin metinsel açıklamasını belirtir.En küçük çalışır HTML örneği
Bir HTML tag'inin nasıl çalıştığını görmek için aşağıdaki içeriği
index.html adıyla kaydedip tarayıcıda açabilirsiniz:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Tag örneği</title>
</head>
<body>
<h1>Merhaba</h1>
<p>Bu bir paragraftır.</p>
<a href="https://example.com">Bağlantıyı aç</a>
</body>
</html>Başarılı sonuçta tarayıcıda bir başlık, bir paragraf ve bağlantı görünür. Dosya boş açılırsa dosyanın gerçekten
.html uzantısıyla kaydedildiğini, kodun bir metin düzenleyicide tutulduğunu ve açılış-kapanış tag'lerinin doğru yazıldığını kontrol edin. Bağlantı çalışmıyorsa href değerinin tırnak içinde geçerli bir adres olduğundan emin olun.Burada:
| Parça | Örnek | Görevi |
|---|---|---|
| Açılış tag'i | <a> | Elementin başladığını belirtir. |
| Attribute | href="https://example.com" | Bağlantının hedefini belirtir. |
| İçerik | Örnek site | Kullanıcının gördüğü metindir. |
| Kapanış tag'i | </a> | Elementin bittiğini belirtir. |
Tag türleri ve doğru kullanım
Çoğu içerik tag'i açılış ve kapanış çiftiyle kullanılır:
<h1>Başlık</h1>gibi bir açılış ve kapanış çifti kullanın.- İçeriğin anlamına uygun tag seçin; başlık için
<h1>, paragraf için<p>, bağlantı için<a>kullanın. - İç içe tag'leri açıldıkları sıranın tersine kapatın. Doğru kullanım:
<p><strong>Metin</strong></p>. - Kapanış tag'i olmayan boş elementleri ayrıca kapatmaya çalışmayın.
<img>,<br>ve<meta>bu gruba örnektir. - Tag adlarını küçük harfle yazın. HTML tag adları büyük-küçük harfe duyarlı olmasa da küçük harf kullanımı okunabilirliği ve tutarlılığı artırır.
<h1> veya uygun alt başlık seviyesini kullanın; görünümü CSS ile düzenleyin.Sık yapılan hatalar
En yaygın hata, tag ile attribute'u karıştırmaktır.
href bir tag değil, <a> elementinin attribute'udur. Bir diğer hata, açık kapanış gerektiren öğeleri kapatmamak veya yanlış iç içe yerleştirmektir. HTML’de bazı öğelerin kapanış etiketi belirli koşullarda atlanabilir; bunu her öğeye genellemeyin. Tarayıcılar hatalı HTML'yi çoğu zaman tahmin ederek göstermeye çalışır; ancak karmaşık sayfalarda beklenmeyen yerleşim ve erişilebilirlik sorunları oluşabilir.Ayrıca her metni
<div> ile sarmalamak yerine anlamlı HTML elementlerini tercih edin. <div> genel amaçlı bir kapsayıcıdır ve tek başına özel bir anlam taşımaz. Sayfanın temel yapısını doğru tag'lerle kurduktan sonraki adım, HTML kodunu doğrulamak ve görünüm kurallarını CSS dosyasına taşımaktır.Sık sorulan sorular
HTML etiketini sayfada metin olarak nasıl gösterebilirim?
Etiket olarak yorumlanmaması için kaynakta
<p> yazın. Tarayıcı bunu metin olarak <p> gösterir. Kullanıcıdan gelen metni JavaScript ile yerleştiriyorsanız HTML ayrıştırmak yerine uygun olduğunda textContent kullanın.Her tag'in kapanış tag'i olmak zorunda mı?
Hayır.
<a> gibi öğeler açık kapanış gerektirir; <p> kapanışı ise belirli HTML koşullarında atlanabilir. Öğrenirken kapanışları açık yazmak yapıyı okumayı kolaylaştırır. <img>, <br> ve <meta> gibi boş elementlerin kapanış tag'i yoktur.