- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
HTML5'in En Çok Kullanılan Etiketleri ve Detaylı Kullanım Örnekleri
HTML5, web geliştirme dünyasında devrim yaratan ve modern web sayfalarının temelini oluşturan bir işaretleme dilidir. Bu makalede, en sık kullanılan HTML5 etiketlerini, ne işe yaradıklarını ve pratik kullanım örneklerini detaylı bir şekilde inceleyeceğiz.1. Yapısal Etiketler (Semantic Tags)
HTML5'in en önemli yeniliklerinden biri, sayfa yapısını daha anlamlı hale getiren semantik etiketlerdir.<header>
Sayfanın veya bölümün başlık bilgilerini içerir.
HTML:
<header>
<h1>Web Sitemin Başlığı</h1>
<nav>
<ul>
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/hakkimda">Hakkımda</a></li>
</ul>
</nav>
</header><nav>
Navigasyon (gezinme) bağlantılarını içerir.
HTML:
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav><main>
Sayfanın ana içeriğini belirtir. Bir sayfada sadece bir tane olmalıdır.
HTML:
<main>
<h1>Ana Başlık</h1>
<p>Bu sayfanın ana içeriği burada yer alır.</p>
</main><article>
Bağımsız, kendi kendine yeterli içerik bloklarını tanımlar (blog yazısı, haber, yorum gibi).
HTML:
<article>
<h2>HTML5'in Avantajları</h2>
<p>HTML5, web geliştiricilere birçok yeni özellik sunar...</p>
</article><section>
Tematik olarak gruplandırılmış içerik bölümlerini tanımlar.
HTML:
<section>
<h2>Bölüm Başlığı</h2>
<p>Bu bölümde konuyla ilgili detaylar yer alır.</p>
</section><aside>
Ana içerikle dolaylı olarak ilişkili ek bilgiler (sidebar, reklam, alıntılar gibi).
HTML:
<aside>
<h3>İlgili Yazılar</h3>
<ul>
<li><a href="#">CSS3 Özellikleri</a></li>
</ul>
</aside><footer>
Sayfanın veya bölümün alt bilgilerini (telif hakkı, iletişim gibi) içerir.
HTML:
<footer>
<p>© 2023 Web Sitem. Tüm hakları saklıdır.</p>
</footer>2. Metin ve İçerik Etiketleri
<h1> - <h6>
Başlık etiketleri. <h1> en üst düzey, <h6> en alt düzey başlığı temsil eder.
HTML:
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Küçük Başlık</h3><p>
Paragraf oluşturmak için kullanılır.
HTML:
<p>Bu bir paragraf örneğidir. HTML5'te metin içerikleri genellikle bu etiket içinde yer alır.</p><a>
Bağlantı (link) oluşturur.
HTML:
<a href="https://www.example.com" target="_blank">Örnek Site</a><strong> ve <b>
<strong> önemli metni (semantik), <b> kalın yazıyı (stil) belirtir.
HTML:
<p>Bu <strong>önemli</strong> bir kelime ve bu da <b>kalın</b> bir kelime.</p><em> ve <i>
<em> vurgulu metni (semantik), <i> italik yazıyı (stil) belirtir.
HTML:
<p>Bu <em>vurgulanmış</em> bir kelime ve bu da <i>italik</i> bir kelime.</p><span>
Satır içi (inline) bir metin grubunu stil vermek veya işlemek için kullanılır.
HTML:
<p>Bu bir <span style="color: red;">kırmızı</span> kelime örneği.</p><div>
Blok düzeyinde bir gruplama öğesidir. CSS ve JavaScript ile çalışmak için sıklıkla kullanılır.
HTML:
<div id="container">
<p>Bu bir div içindeki paragraf.</p>
</div>3. Medya Etiketleri
<img>
Resim eklemek için kullanılır.
HTML:
<img src="resim.jpg" alt="Açıklayıcı metin" width="400" height="300"><video>
Video oynatıcı ekler.
HTML:
<video width="320" height="240" controls>
<source src="film.mp4" type="video/mp4">
Tarayıcınız video etiketini desteklemiyor.
</video><audio>
Ses dosyası oynatıcı ekler.
HTML:
<audio controls>
<source src="ses.ogg" type="audio/ogg">
Tarayıcınız audio etiketini desteklemiyor.
</audio><figure> ve <figcaption>
Resim, diyagram, kod listesi gibi içerikleri ve bunların açıklamalarını gruplamak için.
HTML:
<figure>
<img src="grafik.png" alt="Aylık satış grafiği">
<figcaption>Şekil 1: 2023 Yılı Aylık Satışlar</figcaption>
</figure>4. Listeleme Etiketleri
<ul>, <ol>, <li>
Sırasız (unordered) ve sıralı (ordered) listeler oluşturur.
HTML:
<ul>
<li>Kahve</li>
<li>Çay</li>
</ul>
<ol>
<li>Birinci adım</li>
<li>İkinci adım</li>
</ol><dl>, <dt>, <dd>
Tanım listeleri oluşturur.
HTML:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>5. Form Etiketleri
<form>
Kullanıcı girişi almak için form oluşturur.
HTML:
<form action="/kayit" method="post">
<!-- Form elemanları buraya gelecek -->
</form><input>
Çeşitli giriş alanları oluşturur.
HTML:
<input type="text" name="ad" placeholder="Adınız">
<input type="email" name="email" required>
<input type="password" name="sifre">
<input type="number" name="yas" min="18" max="99">
<input type="date" name="dogum_tarihi">
<input type="checkbox" name="abonelik" checked>
<input type="radio" name="cinsiyet" value="erkek">
<input type="file" name="dosya">
<input type="submit" value="Gönder"><textarea>
Çok satırlı metin girişi sağlar.
HTML:
<textarea name="yorum" rows="4" cols="50" placeholder="Yorumunuz..."></textarea><select>, <option>, <optgroup>
Açılır menü oluşturur.
HTML:
<select name="sehir">
<optgroup label="Marmara">
<option value="34">İstanbul</option>
<option value="41">Kocaeli</option>
</optgroup>
<optgroup label="Ege">
<option value="35">İzmir</option>
</optgroup>
</select><label>
Form elemanları için etiket oluşturur.
HTML:
<label for="kullanici_adi">Kullanıcı Adı:</label>
<input type="text" id="kullanici_adi" name="kullanici_adi"><fieldset> ve <legend>
Form elemanlarını gruplamak için kullanılır.
HTML:
<fieldset>
<legend>İletişim Bilgileri</legend>
<label>Email: <input type="email" name="email"></label>
<label>Telefon: <input type="tel" name="telefon"></label>
</fieldset><button>
Tıklanabilir buton oluşturur.
HTML:
<button type="button">Tıkla</button>
<button type="submit">Gönder</button>
<button type="reset">Sıfırla</button>6. Tablo Etiketleri
<table>, <tr>, <th>, <td>
Tablo oluşturmak için kullanılır.
HTML:
<table border="1">
<tr>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
<tr>
<td>Bilgisayar</td>
<td>5000 TL</td>
</tr>
</table><thead>, <tbody>, <tfoot>
Tabloyu semantik olarak bölümlere ayırır.
HTML:
<table>
<thead>
<tr><th>Ay</th><th>Gelir</th></tr>
</thead>
<tbody>
<tr><td>Ocak</td><td>10000</td></tr>
</tbody>
<tfoot>
<tr><td>Toplam</td><td>10000</td></tr>
</tfoot>
</table>7. Diğer Önemli HTML5 Etiketleri
<meta>
Sayfa hakkında meta bilgileri sağlar.
HTML:
<meta charset="UTF-8">
<meta name="description" content="Ücretsiz web dersleri">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link>
Harici kaynakları bağlamak için (genellikle CSS dosyaları).
HTML:
<link rel="stylesheet" href="stil.css">
<link rel="icon" href="favicon.ico" type="image/x-icon"><script>
JavaScript kodu eklemek veya harici JS dosyası bağlamak için.
HTML:
<script>
alert('Merhaba Dünya!');
</script>
<script src="script.js"></script><style>
Sayfa içi CSS yazmak için.
HTML:
<style>
body { font-family: Arial; }
h1 { color: blue; }
</style><progress>
İlerleme çubuğu oluşturur.
HTML:
<progress value="70" max="100"></progress><meter>
Ölçüm göstergesi oluşturur.
HTML:
<meter value="0.6">%60</meter><details> ve <summary>
Detayları açılıp kapanabilen bir bölüm oluşturur.
HTML:
<details>
<summary>Daha fazla bilgi</summary>
<p>Burada ek detaylar yer alır.</p>
</details><time>
Tarih ve saat bilgisi ekler.
HTML:
<time datetime="2023-05-15">15 Mayıs 2023</time>Sonuç
HTML5, web geliştiricilere daha semantik, daha işlevsel ve daha erişilebilir web sayfaları oluşturmak için geniş bir etiket seti sunar. Bu makalede en sık kullanılan HTML5 etiketlerini ve pratik kullanım örneklerini ele aldık. Doğru etiketleri doğru yerlerde kullanmak, hem arama motorları için hem de erişilebilirlik açısından büyük önem taşır.HTML5'i etkili kullanmak için:
- Semantik etiketleri önceliklendirin
- Etiketleri amaçlarına uygun şekilde kullanın
- Erişilebilirlik için uygun nitelikleri (alt, title, aria-* gibi) eklemeyi unutmayın
- HTML5'in yeni form kontrollerinden ve medya etiketlerinden yararlanın
- Tarayıcı uyumluluğunu her zaman test edin
