İkisi de geçerli HTML'dir. Sondaki eğik çizgiye boş elementlerde izin verilir ve tarayıcı onu yok sayar. gibi boş olmayan bir etikette de eğik çizgi yok sayılır, yani div bir gelene kadar açık kalır.

Çalıştırılabilir HTML Dokümanları: HTML etiketleri

Q: HTML etiketi ile HTML elementi arasındaki fark nedir?

Etiket, yazdığın işarettir: ya da gibi. Element ise tarayıcının bundan kurduğu bütündür: açılış etiketi, özellikleri, içerik ve kapanış etiketi. Hi tek bir p elementi oluşturan iki etikettir.

Q: HTML etiketleri büyük küçük harfe duyarlı mı?

Hayır. ve aynı elementi üretir, büyük ve küçük harflerin herhangi bir karışımı da öyle. Standart yazım küçük harftir ve çoğu formatlayıcı da bunu üretir.

HTML etiketi nedir

HTML etiketi, bir içerik parçasını işaretleyen, köşeli parantez içindeki bir addır. Çoğu etiket çift olarak gelir: <p> gibi bir açılış etiketi ve </p> gibi eğik çizgili bir kapanış etiketi. Aralarındaki her şey içeriktir, paketin tamamı ise bir element olur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

<h1> yerine <h2> yaz (hem açılış hem kapanış etiketinde), başlık küçülür. Tarayıcıya içeriğin ne olduğunu söyleyen şey etiketin adıdır.

Anatomi: etiketler, özellikler ve elementler

<a href="/docs/html/links" class="nav">Links</a>

Parça	Örnekte
Açılış etiketi	`<a href="/docs/html/links" class="nav">`
Etiket adı	`a`
Özellikler	`href="/docs/html/links"` ve `class="nav"`
İçerik	`Links`
Kapanış etiketi	`</a>`
Element	hepsi bir arada

Özellikler her zaman açılış etiketine yazılır, asla kapanış etiketine yazılmaz. Bunlar özellikler sayfasında anlatılıyor.

Etiket adları büyük küçük harfe duyarlı değildir: <P> ile <p> aynıdır. Küçük harfle yaz.

Boş etiketler: kapanış etiketi yok

Bazı elementler hiçbir şey içeremez, bu yüzden yalnızca açılış etiketleri vardır. Bunlara boş elementler (void elements) denir; kendiliğinden kapanan etiketler (self closing tags) dendiği de olur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Tam liste: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Bunları eğik çizgiyle <br /> şeklinde de yazabilirsin. Eğik çizgi HTML'de hiçbir şey yapmaz; XHTML tarzı kod çalışmaya devam etsin diye izin verilir. <div /> gibi normal bir etiketteki eğik çizgi de yok sayılır, yani div hâlâ açıktır.

Etiketleri iç içe yazmak

Elementler başka elementlerin içine girer. Kural şudur: etiketleri açtığın sıranın tersiyle kapat. En son açılan, ilk kapanır.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Tarayıcılar bozuk iç içe yazımı reddetmez. Onu onarırlar ve onarım her zaman kastettiğin şey olmaz. Bu örnek, hatalı iç içe yazılmış iki parçayı tarayıcının ayrıştırıcısına verir ve gerçekte kurduğu yapıyı yazdırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

İki onarım olur. Üst üste binen <b> ve <i> fazladan elementlere bölünür. Bir <p> de <div> içeremez, bu yüzden tarayıcı paragrafı div'den önce kapatır ve başıboş kalan </p> etiketini yeni, boş bir paragrafa çevirir. CSS ya da JavaScript tuhaf davrandığında ilk bakılacak şeylerden biri bozuk iç içe yazımdır.

Blok ve satır içi elementler

Çoğu etiket iki görüntüleme grubuna ayrılır. Blok elementler (div, p, h1 ile h6 arası, ul, section) yeni bir satırda başlar ve tüm genişliği kaplar. Satır içi (inline) elementler (span, a, strong, em, code) bir metin satırının içinde durur ve yalnızca içerikleri kadar geniştir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Mavi kutular sayfa boyunca uzanır; kehribar renkli olanlar yalnızca metinlerini sarar. CSS bunu display özelliğiyle değiştirebilir, ama her etiket kendi varsayılanıyla başlar. İki genel kapsayıcı için div ve span sayfalarına bak.

En yaygın HTML etiketleri

Etiket	Amacı
`<html>`, `<head>`, `<body>`	Belgenin iskeleti
`<title>`, `<meta>`, `<link>`	head içindeki sayfa bilgileri
`<h1>` ile `<h6>` arası	Başlıklar
`<p>`	Paragraf
`<a>`	Link
`<img>`	Resim
`<ul>`, `<ol>`, `<li>`	Listeler
`<strong>`, `<em>`	Önemli ve vurgulu metin
`<br>`, `<hr>`	Satır sonu, tematik ayırıcı
`<div>`, `<span>`	Genel blok ve satır içi kapsayıcılar
`<table>`, `<tr>`, `<th>`, `<td>`	Tablolar
`<form>`, `<input>`, `<label>`, `<button>`	Formlar
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Anlam taşıyan sayfa yapısı

Yazdırabileceğin tek sayfalık bir liste için HTML cheat sheet sayfasına bak.

Var olmayan etiketler

Tarayıcının bilmediği bir etiket yazarsan hata vermez. Bilinmeyen bir element oluşturur, içeriğini gösterir ve onu satır içi olarak ele alır:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Bilinmeyen bir etiketin arama motorları ya da ekran okuyucular için bir anlamı yoktur, bu yüzden gerçek bir etiket tercih et. JavaScript ile kendi bileşenini yapıyorsan ona tireli bir ad ver (user-badge): tireli adlar özel elementlere ayrılmıştır ve gelecekteki HTML etiketleriyle asla çakışmaz.

Sık yapılan hatalar

Kapanış etiketini unutmak. Eksik bir </a> ya da </strong>, sayfanın geri kalanını link ya da kalın yapar. Tarayıcılar bazı etiketleri senin yerine kapatır (</p>, </li>), ama bunları kapatmaz.
Boş bir etiketi kapatmak. </br> ve </img> geçerli değildir. Tarayıcılar </br> etiketini bir açılış <br> etiketi olarak bile okur, yani <br></br> iki satır sonu verir.
Üst üste binen etiketler. Ters sırayla kapat: <b><i>x</i></b>, asla <b><i>x</b></i> değil.
Paragrafın içine blok koymak. <p> içindeki bir <div>, liste ya da başlık paragrafı erken bitirir. Dış kapsayıcı olarak bir <div> kullan.
Etiketleri görünüşlerine göre seçmek. <h2> etiketini büyük olduğu için değil, bir başlık olduğu için kullan. Boyut ve kalınlık CSS'in işidir.

Sıkça Sorulan Sorular

HTML etiketi ile HTML elementi arasındaki fark nedir?

Etiket, yazdığın işarettir: <p> ya da </p> gibi. Element ise tarayıcının bundan kurduğu bütündür: açılış etiketi, özellikleri, içerik ve kapanış etiketi. <p>Hi</p> tek bir p elementi oluşturan iki etikettir.

Hangi HTML etiketlerinin kapanış etiketi yoktur?

Boş (void) elementler içerik alamaz, bu yüzden kapanış etiketleri yoktur: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> ve <embed>.

<br> mi yazmalıyım, <br /> mi?

İkisi de geçerli HTML'dir. Sondaki eğik çizgiye boş elementlerde izin verilir ve tarayıcı onu yok sayar. <div /> gibi boş olmayan bir etikette de eğik çizgi yok sayılır, yani div bir </div> gelene kadar açık kalır.

HTML etiketleri büyük küçük harfe duyarlı mı?

Hayır. <P> ve <p> aynı elementi üretir, büyük ve küçük harflerin herhangi bir karışımı da öyle. Standart yazım küçük harftir ve çoğu formatlayıcı da bunu üretir.

Kaç tane HTML etiketi var?

Güncel HTML standardı 100'den fazla element tanımlar, ama günlük sayfalar bunların yaklaşık 20 ile 30 tanesini kullanır: başlıklar, paragraflar, linkler, resimler, listeler, div, span, formlar ve anlamsal yerleşim etiketleri.

Var olmayan bir etiket kullanırsam ne olur?

Tarayıcı yine de onun için bir element oluşturur, içeriğini gösterir ve onu özel bir anlamı olmayan satır içi bir element gibi ele alır. Adında tire olduğu sürece özel elementlere izin verilir, örneğin <user-card>.

İlgili kavramlar