HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı rehber niteliğinde olacaktır.
HTML etiketler, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketler genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.
Temel HTML İskeleti
Bir HTML sayfasının temel yapısı şu şekildedir:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Bu bir örnek HTML iskeletidir.</p> </body> <footer> <p>Copyright © 2025</p> </footer> </html> |
<html> Etiketi
1 2 3 | <html lang="tr"> <!-- HTML kodlarının tamamı buraya yazılır --> </html> |
<html>etiketi, bir HTML dokümanının en dış kapsayıcı etiketidir.- Tarayıcı, bu etiketin içindekileri yorumlar ve ekrana yansıtır.
<head> Etiketi
1 2 3 | <head> <!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --> </head> |
- Sayfanın görünmeyen ancak önemli olan bilgilerinin bulunduğu kısımdır.
- Bu etikette
<title>,<meta>,<link>ve<script>gibi diğer etiketler kullanılır.
<title> Etiketi
1 | <title>Sayfa Başlığı</title> |
- Web sayfasının başlığını belirler.
- Tarayıcı sekmesinde görüntülenir.
<body> Etiketi
1 2 3 | <body> <!-- Kullanıcıya gösterilecek içerikler buraya yazılır --> </body> |
- Web sayfasında görünen tüm içeriklerin bulunduğu bölümdür.
- Metinler, resimler, videolar, listeler, tablolar gibi tüm öğeler burada yer alır.
<footer> Etiketi
1 2 3 | <footer> <p>Copyright © 2025</p> </footer> |
- Sayfa veya bölümün alt kısmını tanımlar.
- Genellikle telif hakkı bilgileri veya iletişim bilgileri içerir.
<style> Etiketi
1 2 3 4 5 6 7 8 9 | <style> body { background-color: lightblue; } h1 { color: darkblue; text-align: center; } </style> |
- HTML dosyasının içine CSS kodları eklemek için kullanılır.
<style>etiketi genellikle<head>bölümünde yer alır ve bir sayfanın görünümünü düzenlemek için kullanılır.
<script> Etiketi
1 2 3 | <script> echo('Merhaba Dünya!'); </script> |
- Web sayfasına JavaScript eklemek için kullanılır.
- Dinamik işlemler (örneğin bir butona tıklandığında bir mesaj gösterme) için idealdir.
<script>etiketi hem<head>bölümünde hem de<body>içinde kullanılabilir.
<link> Etiketi
1 | <link rel="stylesheet" href="styles.css"> |
- Harici kaynakları (örneğin CSS dosyaları) HTML’e bağlar.
relözelliği, bağlantının türünü belirtir.
<main> Etiketi
1 2 3 4 | <main> <h2>Öne Çıkan Yazı</h2> <p>Bu bölüm, ana içeriği temsil eder.</p> </main> |
- Sayfanın ana içeriğini tanımlar.
- Birden fazla
<main>etiketi kullanılmaz.
<section> Etiketi
1 2 3 4 | <section> <h2>Hakkımızda</h2> <p>Şirketimiz 2024 yılında kurulmuştur.</p> </section> |
- Tematik bir içerik grubunu tanımlar.
- Her
<section>belirli bir bölümü temsil eder.
<article> Etiketi
1 2 3 4 | <article> <h2>Son Blog Yazısı</h2> <p>Bu bir blog yazısı örneğidir.</p> </article> |
- Bağımsız, kendi başına anlam ifade eden içerikleri temsil eder.
- Örneğin blog yazıları veya haber makaleleri için idealdir.
<aside> Etiketi
1 2 3 4 | <aside> <h3>Yan Bilgi</h3> <p>Bu bölüm ek bilgiler içindir.</p> </aside> |
- Ana içeriğe ek bilgiler sağlar.
- Genellikle bir kenar çubuğu olarak kullanılır.
<nav> Etiketi
1 2 3 4 5 6 | <nav> <ul> <li><a href="#ana">Ana Sayfa</a></li> <li><a href="#iletisim">İletişim</a></li> </ul> </nav> |
- Gezinme bağlantıları grubu oluşturur.
<meta> Etiketi
1 2 3 4 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Web sayfası açıklaması"> <meta name="author" content="Kodkampusu"> |
- Meta veriler sağlar.
charset: Sayfanın karakter setini belirtir. (UTF-8 en yaygın olanıdır.)namevecontent: Arama motorları ve tarayıcılar için bilgi sağlar (örneğin, açıklama, yazar bilgisi).viewport: Sayfanın mobil cihazlarda nasıl görüntüleneceğini ayarlar.
<table> Etiketi
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Yılmaz</td> <td>25</td> </tr> </table> |
- Tablo oluşturmak için kullanılır.
borderözelliği, tabloya kenarlık ekler.- İçinde
<tr>(satır),<th>(başlık hücresi),<td>(hücre) etiketleri bulunur.
<form> Etiketi
1 2 3 4 5 | <form action="/submit" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"> <button type="submit">Gönder</button> </form> |
- Kullanıcıdan veri almak için form alanı oluşturur.
actionözelliği, verinin gönderileceği adresi belirtir.methodözelliği, HTTP metodunu belirler (GET veya POST).
<iframe> Etiketi
1 | <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe> |
- Bir başka HTML sayfasını veya içeriği mevcut sayfaya gömer.
src: Gömülecek içeriğin URL’sini belirtir.allowfullscreen: Videolar için tam ekran özelliğini etkinleştirir.
<embed> Etiketi
1 | <embed src="dosya.pdf" width="600" height="400" type="application/pdf"> |
- Harici bir kaynağı (örneğin, bir PDF dosyası veya medya) gömer.
src: Kaynak dosyasının yolunu belirtir.type: Kaynağın türünü tanımlar (örneğin,application/pdf).
<object> Etiketi
1 | <object data="animasyon.swf" width="400" height="300"></object> |
- Harici bir kaynağı (örneğin, Flash animasyonu) gömer.
data: Kaynağın yolunu belirtir.type: İçeriğin türünü tanımlar.
<h1> – <h6> Etiketleri
1 2 3 4 5 6 | <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> |
<h1>: En büyük ve en önemli başlık.<h6>: En küçük ve en az önemli başlık.- Başlık etiketleri, içeriği hiyerarşik bir yapıya oturtmak için kullanılır.
<p> Etiketi
1 | <p>Bu bir paragraf örneğidir. HTML öğrenmek oldukça eğlencelidir!</p> |
- Bir paragraf metni oluşturur.
<p>etiketleri arasında boşluklar, satır başı ve hizalama otomatik olarak eklenir.- Paragraflar, metni düzenlemek ve okunabilirliği artırmak için kullanılır.
<br> Etiketi
1 | Birinci satır<br>İkinci satır |
- Metinde bir satır sonu oluşturur.
<br>tek başına bir etikettir ve kapanış etiketi yoktur.
<hr> Etiketi
1 2 3 | <p>Birinci paragraf</p> <hr> <p>İkinci paragraf</p> |
- İçerik arasında yatay bir çizgi ekler.
- Bölümleri görsel olarak ayırmak için kullanılır.
- Çizginin kalınlığı ve rengi CSS ile düzenlenebilir.
<b> Etiketi (Kalın Metin Etiketi)
1 | <p>Bu metin <b>kalın</b> yazılmıştır.</p> |
- Metni kalın yapar.
- Anlam veya vurgu olmadan sadece görsel olarak kalınlık sağlar.
<strong> Etiketi
1 | <p>Bu metin <strong>önemli</strong> bir bilgiyi vurgular.</p> |
- Metni kalın yapar ve vurgulu olduğunu belirtir.
- Arama motorları bu etiketi, metnin önemli olduğu şeklinde algılar.
<i> Etiketi
1 | <p>Bu metin <i>italik</i> olarak yazılmıştır.</p> |
- Metni eğik yazı (italik) yapar.
- Genellikle yabancı kelimeler, düşünceler veya vurgular için kullanılır.
<em> Etiketi
1 | <p>Bu metin <em>önemli</em> bir vurguyu ifade eder.</p> |
- Metni italik yapar ve anlamına vurgu ekler.
- Ekran okuyucular genellikle bu metni vurgulu bir şekilde okur.
<u> Etiketi
1 | <p>Bu metin <u>altı çizili</u> bir örnektir.</p> |
- Metnin altını çizer.
- Altı çizili metin genellikle bağlantı metni ile karıştırılmamalıdır.
<small> Etiketi
1 | <p>Bu metin <small>küçük</small> boyutta yazılmıştır.</p> |
- Metni daha küçük bir yazı tipiyle gösterir.
- Dipnotlar veya önemsiz bilgiler için kullanılabilir.
<sup> ve <sub> Etiketleri
1 2 | <p>Üst simge örneği: 10<sup>2</sup></p> <p>Alt simge örneği: H<sub>2</sub>O</p> |
<sup>: Metni üst simgeye taşır (örneğin, üst indisli ifadeler).<sub>: Metni alt simgeye taşır (örneğin, kimyasal formüller).
<pre> Etiketi
1 2 3 4 | <pre> Bu metin önceden biçimlendirilmiştir. </pre> |
- Metni olduğu gibi (boşluklar, satır başları dahil) gösterir.
- Kod parçaları veya sabit genişlikte metinler için kullanılır.
<blockquote> Etiketi
1 2 3 | <blockquote cite="https://example.com"> Bu bir alıntı metindir. </blockquote> |
- Uzun alıntılar için kullanılır.
cite: Alıntının kaynağını belirtir (isteğe bağlıdır).
<cite> Etiketi
1 | <p>Bu ifade <cite>HTML Belgesi</cite> adlı bir kaynaktan alınmıştır.</p> |
- Bir kaynağı, başlığı veya eseri belirtmek için kullanılır.
- Metni genellikle italik olarak gösterir.
<code> Etiketi
1 | <p>Bir Python örneği: <code>print("Merhaba Dünya")</code></p> |
- Kod parçalarını göstermek için kullanılır.
- Sabit genişlikte yazı tipi ile görüntülenir.
<span> Etiketi
1 | <p>Bu metnin <span style="color:red;">kırmızı</span> kısmı.</p> |
- Belirli bir metin parçasını gruplamak veya biçimlendirmek için kullanılır.
<div>‘in satır içi karşılığıdır.
<mark> Etiketi
1 | <p>Bu bir <mark>vurgulanmış</mark> metin örneğidir.</p> |
- Metni vurgular ve sarı arka plan ile işaretler.
- Önemli veya dikkat çekmesi gereken metinleri belirtmek için kullanılır.
<del> Etiketi
1 | <p>Bu metin <del>geçersiz</del> kabul edilmiştir.</p> |
- Metni üzeri çizili şekilde gösterir.
- Eski, iptal edilmiş veya silinmiş içerikler için kullanılır.
<ins> Etiketi
1 | <p>Bu metin <ins>eklenmiştir</ins>.</p> |
- Metni altı çizili şekilde gösterir ve yeni eklenmiş olduğunu belirtir.
<del>etiketiyle birlikte değişiklik göstermek için kullanılabilir.
<abbr> Etiketi
1 | <p><abbr title="HyperText Markup Language">HTML</abbr> öğrenmek faydalıdır.</p> |
- Kısaltmaların tam anlamını belirtmek için kullanılır.
titleözelliği, üzerine gelindiğinde tam metni gösterir.
<address> Etiketi
1 2 3 4 | <address> Yazar: Oktay Ala<br> E-posta: <a href="mailto:oktay@hotmail.com">oktay@example.com</a> </address> |
- İletişim bilgilerini belirtir.
- Genellikle yazar adı, e-posta, adres gibi bilgiler için kullanılır.
<bdi> Etiketi
1 | <p>Bu metin: <bdi>مثال</bdi> sağdan sola yazılmıştır.</p> |
- Metnin yönünü belirler.
- Sağdan sola veya soldan sağa yazı yazıldığında metin akışını bozmadan görüntüler.
<bdo> Etiketi
1 | <p><bdo dir="rtl">Bu metin sağdan sola yazılmıştır.</bdo></p> |
- Metin yönünü sağdan sola (rtl) veya soldan sağa (ltr) değiştirmek için kullanılır.
<q> Etiketi
1 | <p><q>HTML öğrenmek harikadır!</q></p> |
- Kısa alıntılar için kullanılır.
- Tarayıcılar, alıntıyı otomatik olarak çift tırnak içinde gösterir.
<time> Etiketi
1 | <p>Etkinlik tarihi: <time datetime="2024-12-10">10 Aralık 2024</time></p> |
- Tarih ve saatleri belirtir.
datetimeözelliği, makine tarafından okunabilir tarih formatı sağlar.
<s> Etiketi
1 | <p>Bu metin <s>artık geçersiz</s> kabul edilmektedir.</p> |
- Metni üzeri çizili şekilde gösterir ve artık geçersiz olduğunu belirtir.
- Genellikle fiyat değişikliklerinde veya eski bilgilerde kullanılır.
<var> Etiketi
1 | <p>Formül: <var>x</var> = <var>y</var> + 2</p> |
- Matematiksel ifadelerde veya kodlarda değişkenleri belirtmek için kullanılır.
- Metni genellikle italik olarak gösterir.
<kbd> Etiketi
1 | <p>Klavye kısayolu: <kbd>Ctrl + C</kbd></p> |
- Klavye girdilerini göstermek için kullanılır.
- Sabit genişlikte yazı tipi ile görüntülenir.
<samp> Etiketi
1 | <p>Program çıktısı: <samp>Merhaba Dünya!</samp></p> |
- Program veya komut çıktısını göstermek için kullanılır.
<details> Etiketi
1 2 3 4 | <details> <summary>Detayları göster</summary> Bu metin detaylara tıklandığında görünür. </details> |
- Açılır kapanır bölümler oluşturur.
<summary>etiketi, başlığı belirtir.
<ruby>, <rt>, <rp> Etiketleri
1 2 3 | <ruby> 漢 <rt>Kanji</rt> </ruby> |
<ruby>: Fonetik rehber içerir.<rt>: Fonetik açıklama.<rp>: Eski tarayıcılar için alternatif içerik sağlar.
HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı tam bir başucu kaynağı niteliğinde olacaktır.
HTML etiketleri, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketleri genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.
Temel HTML İskeleti
Bir HTML sayfasının temel yapısı şu şekildedir:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>Sayfa Başlığı</title> </head> <body> <header> <h1>Ana Başlık</h1> </header> <main> <p>Bu bir örnek HTML iskeletidir.</p> </main> <footer> <p>Copyright © 2025</p> </footer> </body> </html> |
<html> Etiketi
1 2 3 | <html lang="tr"> <!-- HTML kodlarının tamamı buraya yazılır --> </html> |
<html>etiketi, bir HTML dokümanının en dış kapsayıcı etiketidir.- Tarayıcı, bu etiketin içindekileri yorumlar ve ekrana yansıtır.
langözelliği sayfa dilini belirtir.
<head> Etiketi
1 2 3 | <head> <!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --> </head> |
- Sayfanın görünmeyen ancak önemli olan bilgilerinin (meta verilerin) bulunduğu kısımdır.
- Bu etikette
<title>,<meta>,<link>ve<style>gibi etiketler kullanılır.
<title> Etiketi
1 | <title>Harika Web Sayfam</title> |
- Web sayfasının başlığını belirler.
- Tarayıcı sekmesinde görüntülenir ve SEO (Arama Motoru Optimizasyonu) için kritik öneme sahiptir.
<meta> Etiketi
1 2 3 4 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Kapsamlı HTML Rehberi"> <meta name="author" content="Kodkampusu"> |
- Meta veriler sağlar. Kapanış etiketi yoktur.
charset: Sayfanın karakter setini belirtir (UTF-8 en yaygın olanıdır).viewport: Sayfanın mobil cihazlarda nasıl ölçekleneceğini (duyarlı tasarım) ayarlar.
<body> Etiketi
1 2 3 | <body> <!-- Kullanıcıya gösterilecek içerikler buraya yazılır --> </body> |
- Web sayfasında görünen tüm içeriklerin bulunduğu, sayfanın gövdesidir.
- Metinler, resimler, listeler, tablolar gibi görsel tüm öğeler burada yer alır.
Bölümleme ve Anlamsal (Semantic) Etiketler
<header> Etiketi
1 2 3 4 | <header> <h1>Web Siteme Hoş Geldiniz</h1> <p>En güncel yazılım makaleleri.</p> </header> |
- Sayfanın veya bir bölümün başlık (üst) kısmını temsil eder.
- Genellikle logolar, ana başlıklar veya arama çubukları içerir.
<nav> Etiketi
1 2 3 4 5 6 | <nav> <ul> <li><a href="#ana">Ana Sayfa</a></li> <li><a href="#hakkimizda">Hakkımızda</a></li> </ul> </nav> |
- Ana gezinme (menü) bağlantıları grubunu oluşturur.
<main> Etiketi
1 2 3 4 | <main> <h2>Günün İçeriği</h2> <p>Bu bölüm, sayfanın asıl odak noktasını temsil eder.</p> </main> |
- Sayfanın birincil (ana) içeriğini tanımlar.
- Bir HTML dokümanında sadece bir tane
<main>bulunmalıdır.
<section> Etiketi
1 2 3 4 | <section> <h2>Hizmetlerimiz</h2> <p>Web tasarım ve danışmanlık hizmetleri.</p> </section> |
- Tematik bir içerik grubunu tanımlar. Birbirleriyle ilişkili konuları gruplamak için idealdir.
<article> Etiketi
1 2 3 4 | <article> <h2>Son Blog Yazısı</h2> <p>Bu bir blog yazısı örneğidir.</p> </article> |
- Bağımsız, kendi başına anlam ifade eden, tek başına dağıtılabilecek içerikleri temsil eder (Blog yazısı, haber vb.).
<aside> Etiketi
1 2 3 4 | <aside> <h3>Bunu Biliyor muydunuz?</h3> <p>HTML, 1991 yılında Tim Berners-Lee tarafından icat edilmiştir.</p> </aside> |
- Ana içeriğe ek, dolaylı olarak bağlantılı bilgileri (kenar çubuğu, reklamlar, yazar notları) temsil eder.
<footer> Etiketi
1 2 3 | <footer> <p>Copyright © 2025 | Tüm Hakları Saklıdır.</p> </footer> |
- Sayfanın veya ilgili bölümün alt kısmını tanımlar. Telif hakları, iletişim ve sosyal medya linkleri barındırır.
<div> ve <span> Etiketleri
1 2 3 | <div class="kutu"> <p>Bu blok düzeyinde bir <span style="color:red;">satır içi</span> elemandır.</p> </div> |
<div>: Blok düzeyinde bir kapsayıcıdır. CSS ile bölümleri şekillendirmek için en sık kullanılan etikettir.<span>: Satır içi (inline) bir kapsayıcıdır. Metin içindeki ufak bir parçayı renklendirmek veya seçmek için kullanılır.
Metin Biçimlendirme Etiketleri
<h1> – <h6> Başlık Etiketleri
1 2 3 4 | <h1>Ana Başlık (SEO için çok önemli)</h1> <h2>Alt Başlık 1</h2> <h3>Alt Başlık 2</h3> <h6>En Küçük Başlık</h6> |
- Hiyerarşik başlıkları tanımlar.
<h1>en büyük ve en önemli başlıktır, sayfada bir kez kullanılması önerilir.
<p>, <br> ve <hr> Etiketleri
1 2 3 4 | <p>Bu bir paragraftır.</p> <p>Bu paragrafın tam ortasından<br>alt satıra inebiliriz.</p> <hr> <p>Bu paragrafın üstünde yatay bir çizgi var.</p> |
<p>: Paragraf oluşturur.<br>: Alt satıra geçirir (Kapanış etiketi yoktur).<hr>: Konu değişimini gösteren yatay bir çizgi çizer.
Vurgu ve Stil Etiketleri (<strong>, <em>, <b>, <i>, <u>)
1 2 3 4 5 | <p>Normal metin.</p> <p><strong>Önemli</strong> ve <b>Kalın</b> metin.</p> <p><em>Vurgulu</em> ve <i>İtalik</i> metin.</p> <p><u>Altı çizili</u> metin.</p> <p><mark>Sarı ile işaretlenmiş</mark> metin.</p> |
<strong>ve<em>: Arama motorlarına ve ekran okuyuculara metnin “önemli” olduğunu bildirir. (Tercih edilmelidir).<b>ve<i>: Yalnızca görsel olarak kalın/italik yapar, anlamsal bir önem katmaz.
Alıntı, Alt/Üst Simge ve Kısaltmalar
1 2 3 4 5 | <p>Einstein'ın formülü: E = mc<sup>2</sup></p> <p>Su formülü: H<sub>2</sub>O</p> <blockquote cite="http://kaynak.com">Bu uzun bir alıntıdır.</blockquote> <p>O, bana <q>Merhaba!</q> dedi.</p> <p><abbr title="Cascading Style Sheets">CSS</abbr> tasarımı güzelleştirir.</p> |
<sup> / <sub>: Üst ve alt simgeler (matematik ve kimya formülleri).<blockquote> / <q>: Blok alıntı ve satır içi (tırnak işaretli) alıntı.<abbr>: Üzerine gelince açıklaması çıkan kısaltmalar.
Kod ve Bilgisayar Çıktıları
1 2 3 4 5 6 | <pre> Boşlukların ve satır atlamaların korunduğu alan. </pre> <p>Kaydetmek için <kbd>Ctrl + S</kbd> tuşlarına basın.</p> <p>Değişken tanımı: <code>let x = 5;</code></p> |
<pre>: Önceden biçimlendirilmiş, yazıldığı gibi görünen metin.<kbd>: Klavye tuş kombinasyonlarını belirtir.<code>: Satır içi kod parçacıklarını gösterir.
Bağlantılar ve Listeler
<a> Etiketi (Link/Bağlantı)
1 2 | <a href="https://www.google.com" target="_blank">Google'a Git</a> <a href="mailto:ornek@email.com">Bana E-posta Gönder</a> |
- Sayfalar arası bağlantı vermek için kullanılır. Web’i “Web” yapan etikettir.
href: Gidilecek adresi belirtir.target="_blank": Linkin yeni bir sekmede açılmasını sağlar.
Liste Etiketleri (<ul>, <ol>, <li>, <dl>)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Sırasız Liste (Madde İşaretli) --> <ul> <li>Elma</li> <li>Armut</li> </ul> <!-- Sıralı Liste (Numaralı) --> <ol> <li>Birinci Adım</li> <li>İkinci Adım</li> </ol> <!-- Açıklama Listesi --> <dl> <dt>HTML</dt> <dd>Web'in iskeletini oluşturur.</dd> </dl> |
<ul>: Sırasız (noktalı) liste oluşturur.<ol>: Sıralı (1,2,3… veya A,B,C…) liste oluşturur.<li>: Liste elemanlarını belirtir.<dl>, <dt>, <dd>: Terim ve açıklamasından oluşan sözlük tarzı listelerdir.
Medya ve Gömülü İçerikler
<img> Etiketi (Resim)
1 | <img src="manzara.jpg" alt="Dağ manzarası" width="500" height="300"> |
- Sayfaya görsel ekler. Kapanış etiketi yoktur.
src: Görselin dosya yolunu belirtir.alt: Görsel yüklenemezse veya ekran okuyucular için görünecek alternatif metindir (Erişilebilirlik için zorunludur).
<figure> ve <figcaption> Etiketleri
1 2 3 4 | <figure> <img src="logo.png" alt="Şirket Logosu"> <figcaption>Şekil 1: Yeni şirket logomuz.</figcaption> </figure> |
- Görselleri (veya kod bloklarını) ve onların alt yazılarını (açıklamalarını) semantik olarak gruplar.
<video> ve <audio> Etiketleri
1 2 3 4 5 6 7 8 9 | <video width="400" controls> <source src="tanitim.mp4" type="video/mp4"> Tarayıcınız video etiketini desteklemiyor. </video> <audio controls> <source src="muzik.mp3" type="audio/mpeg"> Tarayıcınız ses oynatmayı desteklemiyor. </audio> |
- Harici eklentiye (Flash vb.) ihtiyaç duymadan doğrudan sayfada video ve ses oynatmayı sağlar.
controls: Oynat/Duraklat, ses ayarı gibi oynatıcı kontrollerini gösterir.
Gömme Etiketleri (<iframe>, <embed>, <object>)
1 2 3 | <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen></iframe> <embed src="dosya.pdf" width="600" height="400" type="application/pdf"> <object data="animasyon.swf" width="400" height="300"></object> |
<iframe>: YouTube videosu veya harita gibi başka bir web sayfasını sitenizin içine gömer.<embed> / <object>: PDF veya Flash gibi tarayıcı dışı kaynakları sayfaya dahil eder.
Tablo ve Form İşlemleri
<table> Etiketi (Tablolar)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table border="1"> <thead> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> </thead> <tbody> <tr> <td>Oktay</td> <td>Ala</td> <td>25</td> </tr> </tbody> </table> |
- Verileri satır ve sütunlar halinde düzenler.
<tr>: Satır,<th>: Başlık hücresi,<td>: Standart veri hücresidir.<thead>ve<tbody>ile daha düzenli bir yapı kurulur.
<form> ve Girdi Etiketleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <form action="/submit" method="post"> <fieldset> <legend>Kullanıcı Bilgileri</legend> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim" required placeholder="Adınızı girin"><br><br> <label for="sifre">Şifre:</label> <input type="password" id="sifre" name="sifre"><br><br> <label for="mesaj">Mesajınız:</label> <textarea id="mesaj" name="mesaj" rows="4" cols="30"></textarea><br><br> <label for="sehir">Şehir:</label> <select id="sehir" name="sehir"> <option value="34">İstanbul</option> <option value="20">Denizli</option> </select><br><br> <button type="submit">Formu Gönder</button> </fieldset> </form> |
<form>: Kullanıcıdan veri toplamak için kullanılır.<input>: Text, password, email, radio, checkbox gibi birçok tipe sahiptir.<textarea>: Çok satırlı metin giriş alanıdır.<select> / <option>: Açılır liste menüsü oluşturur.<fieldset> / <legend>: Form elemanlarını görsel bir çerçeve içine alıp başlık ekler.<button>: Tıklanabilir buton oluşturur.
Etkileşimli (Interactive) Etiketler
<details> ve <summary> Etiketleri
1 2 3 4 | <details> <summary>Daha fazla bilgi için tıklayın</summary> <p>Bu metin sadece başlığa tıklandığında açılır ve görünür. Sıkça Sorulan Sorular (SSS) bölümleri için harikadır!</p> </details> |
- JavaScript kullanmadan açılır/kapanır (akordeon) bölümler oluşturur.
<progress> ve <meter> Etiketleri
1 2 | <p>Dosya Yükleme Durumu: <progress value="70" max="100">%70</progress></p> <p>Disk Kullanımı: <meter value="0.6">%60</meter></p> |
<progress>: Bir işlemin ne kadarının tamamlandığını gösteren ilerleme çubuğudur.<meter>: Belirli bir aralıktaki skaler bir değeri (örneğin disk alanı, sıcaklık) gösterir.
<dialog> Etiketi
1 2 3 4 5 6 | <dialog open> <p>Bu bir pop-up bilgi penceresidir!</p> <form method="dialog"> <button>Kapat</button> </form> </dialog> |
- Doğrudan HTML üzerinden kalıcı pencere (modal/pop-up) oluşturmayı sağlar.
Dahil Etme (Bağlama) Etiketleri
<style>, <link> ve <script>
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- Dışarıdan CSS dosyası çağırma (head içine yazılır) --> <link rel="stylesheet" href="style.css"> <!-- Sayfa içi CSS yazma --> <style> body { background-color: #f4f4f4; } </style> <!-- JavaScript kodlarını ekleme --> <script> console.log('Sayfa yüklendi!'); </script> |
<link>: Harici dosyaları (özellikle CSS) sayfaya bağlar.<style>: Sayfa içi tasarım kodlarını barındırır.<script>: Dinamik etkileşimler için JavaScript kodlarını veya harici JS dosyalarını ekler.
Thanks in support of sharing such a fastidious idea, post is pleasant, thats why
i have read it completely
this site provides quality based content and other stuff
Thanks for sharing ʏour thoughts about html codes. Regards