Html Kod Örnekleri 2025

Web geliştirme dünyası sürekli olarak değişiyor. HTML (HyperText Markup Language), web sayfalarının temel yapı taşıdır ve her yıl yeni özellikler ve uygulamalar eklenmektedir. 2025 yılında web tasarımcıları ve geliştiriciler için HTML kod örnekleri, modern web standartlarına uygun şekilde yazılmalı ve kullanıcı deneyimini ön planda tutmalıdır. Bu yazıda, temel HTML yapılarından ileri seviye örneklere kadar birçok kod örneğini inceleyeceğiz.

HTML Nedir?

HTML, web sayfalarının yapısını oluşturmak için kullanılan işaretleme dilidir. Başka bir deyişle, bir web sitesinin iskeletini oluşturur. Metinler, başlıklar, listeler, tablolar, görseller ve bağlantılar HTML ile sayfaya eklenir. CSS ve JavaScript ise bu yapıya stil ve etkileşim katar.

HTML kodları etiketler (tag) ile yazılır ve her etiketin belirli bir işlevi vardır. Örneğin <h1> başlık etiketi iken <p> paragraf etiketidir.

Temel HTML Kod Örnekleri

1. Basit HTML Sayfası

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel HTML Sayfası</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu, basit bir HTML sayfası örneğidir.</p>
</body>
</html>

Bu örnek, bir HTML sayfasının temel yapısını gösterir. <!DOCTYPE html> ifadesi, tarayıcıya sayfanın HTML5 ile yazıldığını belirtir.

2. Başlık ve Paragraf Etiketleri

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<p>Bu bir paragraf metnidir. HTML’de metinler genellikle paragraf etiketi ile yazılır.</p>

Başlık etiketleri (<h1>–<h6>) sayfa içeriğini hiyerarşik olarak organize eder.

3. Liste Örnekleri

Sırasız Liste

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

Sıralı Liste

<ol>
    <li>İlk Adım</li>
    <li>İkinci Adım</li>
    <li>Üçüncü Adım</li>
</ol>

Liste etiketleri, içerikleri düzenli ve okunabilir hâle getirir.

İleri Seviye HTML Kod Örnekleri 2025

2025 yılına gelindiğinde HTML, daha önceki sürümlere göre gelişmiş özellikler sunar.

1. Formlar ve Input Alanları

Formlar, kullanıcıdan veri toplamak için kullanılır.

<form action="/submit" method="post">
    <label for="name">Adınız:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Mesajınız:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <button type="submit">Gönder</button>
</form>

Bu form örneği, kullanıcılardan ad, email ve mesaj toplamak için modern HTML5 özelliklerini kullanır.

2. Görseller ve Medya Etiketleri

<img src="resim.jpg" alt="Örnek Resim" width="300">

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video etiketini desteklemiyor.
</video>

<audio controls>
    <source src="ses.mp3" type="audio/mpeg">
    Tarayıcınız audio etiketini desteklemiyor.
</audio>

HTML5 ile medya içerikleri, harici eklenti gerektirmeden doğrudan sayfaya eklenebilir.

3. Linkler ve Navigasyon

<a href="https://www.ornek.com" target="_blank">Ornek.com Sitesine Git</a>

<nav>
    <ul>
        <li><a href="#anasayfa">Anasayfa</a></li>
        <li><a href="#hakkimizda">Hakkımızda</a></li>
        <li><a href="#iletisim">İletişim</a></li>
    </ul>
</nav>

<nav> etiketi, sayfa navigasyonu için semantik olarak kullanılır ve SEO açısından önemlidir.

Tablo Örnekleri

Tablolar, verileri düzenli şekilde göstermek için kullanılır.

<table border="1">
    <tr>
        <th>Ad</th>
        <th>Yaş</th>
        <th>Meslek</th>
    </tr>
    <tr>
        <td>Ahmet</td>
        <td>30</td>
        <td>Mühendis</td>
    </tr>
    <tr>
        <td>Ayşe</td>
        <td>25</td>
        <td>Tasarımcı</td>
    </tr>
</table>

<th> başlık hücresini, <td> ise veri hücresini temsil eder.

Modern HTML Kod Örnekleri ve Yeni Etiketler

2025 yılı itibarıyla web geliştiriciler için yeni HTML etiketleri ve özellikler öne çıkıyor.

1. Semantik Etiketler

<header>: Sayfa veya bölüm başlığı
<footer>: Sayfa altbilgisi
<section>: İçerik bölümü
<article>: Makale veya içerik parçası
<aside>: Yan içerik veya reklam alanı

<header>
    <h1>Web Sitenize Hoş Geldiniz</h1>
</header>

<section>
    <article>
        <h2>HTML Kod Örnekleri 2025</h2>
        <p>Bu makale, modern HTML örneklerini içeriyor.</p>
    </article>
</section>

<aside>
    <p>Reklam Alanı</p>
</aside>

<footer>
    <p>© 2025 Tüm Hakları Saklıdır</p>
</footer>

Semantik etiketler, erişilebilirlik ve SEO açısından kritik öneme sahiptir.

2. HTML ve CSS Entegrasyonu

<p style="color:blue; font-size:18px;">Bu bir stil uygulanmış paragraftır.</p>

2025’te inline stil yerine genellikle <style> etiketi veya harici CSS dosyaları tercih edilmektedir.

<style>
    body { font-family: Arial, sans-serif; }
    h1 { color: darkred; }
    p { line-height: 1.6; }
</style>

3. Responsive Tasarım İçin Meta Etiket

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu etiket, web sayfasının mobil cihazlarda doğru görünmesini sağlar.

HTML ile Etkileşimli Örnekler

1. Buton ve JavaScript

<button onclick="alert('Merhaba!')">Tıkla</button>

Bu örnek, HTML ve JavaScript’in birlikte kullanılmasını gösterir.

2. Form Doğrulama

<form onsubmit="return validateForm()">
    <input type="text" id="username" required>
    <button type="submit">Gönder</button>
</form>

<script>
function validateForm() {
    let x = document.getElementById('username').value;
    if(x == "") {
        alert("Kullanıcı adı boş olamaz");
        return false;
    }
    return true;
}
</script>

Form doğrulama ile kullanıcıdan doğru veri alınması sağlanır.

HTML İpuçları 2025

Semantik etiketleri kullanın: Erişilebilirlik ve SEO için kritik.
Responsive tasarım: Mobil uyumluluk için viewport ve CSS medya sorguları kullanın.
HTML5 özelliklerini kullanın: <video>, <audio>, <canvas> gibi etiketler modern web deneyimi sağlar.
Temiz kod yazın: Gereksiz inline stil ve tekrar eden etiketlerden kaçının.
Erişilebilirlik kurallarına dikkat edin: alt etiketleri, kontrast ve tab navigasyonu önemlidir.

2025 yılında HTML, web geliştirme için hala en temel ve kritik teknoloji konumunda. Basit yapıdan ileri seviye formlara, medya içeriklerinden semantik ve erişilebilir tasarımlara kadar her seviyede örnekler geliştirilmiş durumda. Modern HTML ile kullanıcı deneyimini artırabilir, SEO uyumlu ve erişilebilir web siteleri tasarlayabilirsiniz.

Bu yazıda hem temel hem de ileri seviye HTML örnekleri, semantik etiket kullanımı, responsive tasarım ve etkileşimli kod örnekleri detaylı şekilde paylaşıldı. Web geliştirme dünyasında HTML’in önemi, 2025 ve sonrasında da değişmeden devam edecektir.