HTML Kodları ve Anlamları

WEBUZMAN tarafından

3 Haziran 2025 tarihinde düzenlendi

HTML (HyperText Markup Language), web sayfalarının metin, görsel, bağlantı ve diğer öğelerini tarayıcılarda görüntülenebilir hale getiren temel dildir. Bu rehberde, en çok kullanılan HTML kodları ve bunların ne anlama geldiğini, işlevlerini ve doğru kullanımlarını adım adım açıklıyoruz.

Temel HTML Yapısı

Bir HTML dosyası genellikle şu şekilde başlar:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sayfa Başlığı</title>
</head>
<body>
  <h1>Merhaba Dünya</h1>
  <p>Bu, bir paragraf örneğidir.</p>
</body>
</html>

Açıklamalar:
- <!DOCTYPE html>: HTML5 standardında bir belge olduğunu belirtir.
- <html>: HTML belgesinin başlangıç ve bitişini belirtir.
- <head>: Meta bilgiler, stil dosyaları ve başlıklar burada yer alır.
- <title>: Tarayıcı sekmesinde görünen başlık.
- <body>: Sayfanın kullanıcıya görünen kısmı.

Temel HTML Kodları ve Anlamları

`<html>`, `<head>`, `<body>` – Temel Yapı Taşları

Etiket	Açıklama
`<html>`	Tüm HTML belgesini kapsar.
`<head>`	Sayfa hakkında bilgiler, stil dosyaları, meta etiketler burada bulunur.
`<body>`	Kullanıcıya gösterilecek tüm içerik bu bölümde yer alır.

HTML Metin Biçimlendirme Etiketleri

Etiket	Açıklama	Örnek Kullanım
`<h1>` – `<h6>`	Başlık etiketleri, `<h1>` en önemli başlıktır.	`<h1>Başlık</h1>`
`<p>`	Paragraf oluşturur.	`<p>Bu bir paragraftır.</p>`
`<br>`	Satır sonu verir. (Boş tag)	`Satır1<br>Satır2`
`<hr>`	Yatay çizgi çizer.	`<hr>`
`<strong>`	Kalın ve anlam vurgulu metin.	`<strong>Önemli</strong>`
`<em>`	Eğik ve vurgulu metin.	`<em>Vurgulu</em>`
`<mark>`	Metni fosforlu kalem gibi vurgular.	`<mark>Önemli</mark>`
`<blockquote>`	Alıntı metinler için kullanılır.	`<blockquote>Alıntı</blockquote>`

HTML Bağlantı ve Medya Etiketleri

Bağlantı: `<a>`

<a href="https://site.com" target="_blank">Ziyaret Et</a>

📌 target="_blank" bağlantının yeni sekmede açılmasını sağlar.

Görsel: `<img>`

<img src="resim.jpg" alt="Açıklayıcı metin" width="300">

Video: `<video>`

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Video öğesi
</video>

Ses: `<audio>`

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
  Ses öğesi
</audio>

Listeleme Etiketleri

Etiket	Açıklama
`<ul>`	Sırasız liste oluşturur.
`<ol>`	Sıralı liste oluşturur.
`<li>`	Liste öğesi.

Tablo Etiketleri

Etiket	Açıklama
`<table>`	Tablo oluşturur.
`<tr>`	Tablo satırı.
`<td>`	Satır hücresi.
`<th>`	Başlık hücresi. Kalın ve ortalı.
`<caption>`	Tablonun başlığı.

Form Etiketleri ve Anlamları

<form action="/gonder" method="post">
  <label for="isim">Adınız:</label>
  <input type="text" id="isim" name="isim">
  <input type="submit" value="Gönder">
</form>

Etiket	Açıklama
`<form>`	Formu başlatır.
`<input>`	Kullanıcıdan veri almak için.
`<textarea>`	Çok satırlı metin alanı.
`<label>`	Form öğelerine açıklama.
`<button>`	Düğme oluşturur.

HTML5 Semantik Etiketler

HTML5 ile gelen semantik etiketler, arama motorları ve ekran okuyucular tarafından daha iyi anlaşılır:

Etiket	Açıklama
`<header>`	Sayfa ya da bölüm başlığı.
`<nav>`	Site içi gezinme bağlantıları.
`<main>`	Sayfanın ana içeriği.
`<section>`	İçerik bölümü.
`<article>`	Bağımsız içerik parçası.
`<aside>`	Yan içerik.
`<footer>`	Alt bilgi bölgesi.

Faydalı HTML Etiketleri

Etiket	Açıklama
`<code>`	Kod parçacıkları için.
`<pre>`	Önceden biçimlendirilmiş metin.
`<kbd>`	Klavye girdisi belirtmek için.
`<sup>`	Üst simge (örneğin m²).
`<sub>`	Alt simge (örneğin H₂O).
`<details>` ve `<summary>` Örnek: `<details> <summary>Detayları göster</summary> <p>Bu gizli içeriğin açıklamasıdır.</p> </details>`	Açılır kapanır bilgi kutuları.

HTML Özel Karakter Kodları (Entities)

HTML’de özel karakterler için karakter referansları kullanılır:

Karakter	Kod	Açıklama
`<`	`<`	Küçüktür sembolü
`>`	`>`	Büyüktür sembolü
`&`	`&`	Ve sembolü
`"`	`"`	Çift tırnak
`'`	`'`	Tek tırnak

Meta Etiketler (SEO İçin Gerekli)

HTML <head> bölümünde kullanılır:

<meta charset="UTF-8">
<meta name="description" content="HTML etiketleri ve anlamları hakkında detaylı bilgi.">
<meta name="keywords" content="HTML, HTML5, etiketler, anlamlar, web geliştirme, SEO">
<meta name="author" content="WEBUZMAN">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

En Sık Kullanılan HTML Etiketleri ve Anlamları

1. Başlık Etiketleri (`<h1>` – `<h6>`)

<h1>En Önemli Başlık</h1>
<h2>Alt Başlık</h2>
...
<h6>En Az Önemli Başlık</h6>

2. Paragraf Etiketi (`<p>`)

<p>Bu bir paragraftır.</p>

3. Bağlantı Etiketi (`<a>`)

<a href="https://www.ornek.com">Ornek Site</a>

4. Görsel Etiketi (`<img>`)

<img src="resim.jpg" alt="Açıklayıcı Metin">

5. Liste Etiketleri

Sıralı Liste (<ol>)

<ol>
  <li>Birinci</li>
  <li>İkinci</li>
</ol>

Sırasız Liste (<ul>)

<ul>
  <li>Elma</li>
  <li>Muz</li>
</ul>

6. Tablo Etiketleri

<table>
  <tr>
    <th>Ad</th>
    <th>Soyad</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Veli</td>
  </tr>
</table>

7. Form Etiketi

<form action="/gonder" method="post">
  <input type="text" name="isim">
  <input type="submit" value="Gönder">
</form>

SEO Uyumlu HTML Kullanımı İçin İpuçları

Doğru Başlık Hiyerarşisi: Sayfada yalnızca bir adet <h1> kullanın.
Anlamlı alt Etiketleri: Görsellerin açıklamalarını doğru girin.
Dahili Bağlantılar (<a href>): Site içi bağlantılarla kullanıcı deneyimini artırın.
Semantik HTML Etiketleri: <section>, <article>, <nav>, <footer> gibi semantik etiketlerle sayfa anlamını güçlendirin.
Meta Etiketler: <meta name="description" content="..."> gibi etiketlerle arama motorlarına sayfanın içeriği hakkında bilgi verin.

HTML öğrenmek, web geliştirme dünyasına atılan ilk ve en önemli adımdır. Bu rehberle birlikte sadece temel HTML etiketlerini değil; aynı zamanda HTML5’in sağladığı semantik yapıyı, form ve medya öğelerini, SEO açısından önemli meta tag’leri de basitçe gösterdik. Web sitenizin daha anlamlı, erişilebilir ve arama motorlarında görünür olması için HTML kodlarını doğru anlamak ve yerinde kullanmak büyük önem taşır. Ayrıca “HTTP Durum Kodları Anlamları ve SEO Etkisi” kılavuzumuza da göz atabilirsiniz.

WEBUZMAN

Burada sadece teorik bilgiler değil, gerçek deneyimlere dayanan pratik çözümler var. Burada yol arkadaşı olacağız. Karmaşık konuları birlikte çözecek, teknik detayları birlikte aşacağız...

Yazarın Profili