HTML Nedir? İlk Web Sayfanızı HTML ile Oluşturun (2026 Rehberi)

Meta Açıklaması: HTML nedir, ne işe yarar ve nasıl öğrenilir? Bu rehberde HTML’in temellerini, etiket kullanımını ve örnek kodlarla ilk web sayfanızı oluşturmayı adım adım öğrenin.

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. İnternette ziyaret ettiğiniz hemen hemen tüm web siteleri HTML kullanılarak hazırlanır. Tarayıcılar HTML kodlarını okuyarak metinleri, görselleri, bağlantıları, tabloları ve diğer içerikleri kullanıcıya gösterir.

HTML bir programlama dili değildir. Bir işaretleme dili olduğu için sayfanın yapısını belirler. Sayfanın tasarımı için CSS, etkileşimli özellikler için ise JavaScript kullanılır.

HTML Ne İşe Yarar?

HTML sayesinde;

  • Web sitesi oluşturabilirsiniz.
  • Blog sayfaları hazırlayabilirsiniz.
  • Kurumsal web siteleri geliştirebilirsiniz.
  • E-ticaret sitelerinin temel yapısını oluşturabilirsiniz.
  • Formlar hazırlayabilirsiniz.
  • Menü oluşturabilirsiniz.
  • Video ve ses dosyaları ekleyebilirsiniz.
  • Google’ın okuyabileceği SEO uyumlu sayfalar hazırlayabilirsiniz.

HTML Nasıl Çalışır?

Bir kullanıcı web sitesini ziyaret ettiğinde tarayıcı HTML dosyasını indirir ve satır satır okuyarak ekrana yansıtır.

Örneğin;

<h1>Merhaba Dünya</h1>

Tarayıcı bunu büyük başlık olarak gösterir.

İlk HTML Dosyanızı Oluşturun

Bilgisayarınızda Not Defteri veya Visual Studio Code açın.

Yeni bir dosya oluşturun.

Dosya adını;

index.html

olarak kaydedin.

Ardından aşağıdaki kodları yazın.

<!DOCTYPE html>
<html lang="tr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>İlk Web Sayfam</title>

</head>

<body>

<h1>Merhaba Dünya</h1>

<p>Bu benim ilk HTML sayfam.</p>

</body>

</html>

Kaydettikten sonra dosyaya çift tıklayın.

Web tarayıcınız otomatik olarak açılacaktır.

Kodların Açıklaması

<!DOCTYPE html>

HTML5 kullandığımızı belirtir.

<html lang="tr">

Sayfanın Türkçe olduğunu belirtir.

Google açısından önemlidir.

<head>

Tarayıcıya gösterilmeyen bilgileri içerir.

Başlık, karakter kodlaması ve SEO etiketleri burada bulunur.

<title>

Google arama sonuçlarında görünen başlıktır.

<body>

Sayfanın ziyaretçiye görünen kısmıdır.

Başlık Etiketleri

HTML’de toplam 6 adet başlık etiketi vardır.

<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>

SEO açısından her sayfada yalnızca bir adet H1 etiketi kullanılması tavsiye edilir.

Paragraf Oluşturma

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

Kalın Yazı

<strong>Kalın yazı</strong>

veya

<b>Kalın yazı</b>

SEO açısından strong etiketi daha doğru tercih edilir.

İtalik Yazı

<em>İtalik yazı</em>

Satır Atlatma

Birinci Satır<br>
İkinci Satır

Yatay Çizgi

<hr>

Link Oluşturma

<a href="https://www.google.com">
Google
</a>

Yeni sekmede açılması için;

<a href="https://www.google.com" target="_blank">
Google
</a>

Resim Ekleme

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

SEO açısından alt etiketi mutlaka doldurulmalıdır.

Liste Oluşturma

Sırasız Liste

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Sıralı Liste

<ol>

<li>HTML Öğren</li>

<li>CSS Öğren</li>

<li>JavaScript Öğren</li>

</ol>

Tablo Oluşturma

<table border="1">

<tr>

<th>Ad</th>

<th>Soyad</th>

</tr>

<tr>

<td>Ahmet</td>

<td>Yılmaz</td>

</tr>

</table>

Form Oluşturma

<form>

<input type="text" placeholder="Adınız">

<input type="email" placeholder="E-Posta">

<input type="password" placeholder="Şifre">

<button>Gönder</button>

</form>

Basit Bir Web Sayfası Tasarlayalım

<!DOCTYPE html>
<html lang="tr">

<head>

<meta charset="UTF-8">

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

<title>Ajans Çorlu HTML Eğitimi</title>

</head>

<body>

<h1>HTML Dersleri</h1>

<p>HTML öğrenmeye hoş geldiniz.</p>

<hr>

<h2>Konular</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>PHP</li>

</ul>

<a href="https://ajanscorlu.com.tr">

Ajans Çorlu

</a>

</body>

</html>

HTML Öğrenirken Yapılan Hatalar

  • Etiketleri kapatmamak
  • H1 etiketini birden fazla kullanmak
  • Alt etiketi olmayan görseller eklemek
  • Sayfa başlığını boş bırakmak
  • UTF-8 karakter kodlamasını eklememek
  • Responsive meta etiketini kullanmamak
  • Gereksiz iç içe etiketler oluşturmak

SEO İçin HTML’de Dikkat Edilmesi Gerekenler

Google’ın sayfanızı daha iyi anlaması için şu kurallara dikkat edin:

  • Her sayfanın benzersiz bir <title> etiketi olmalıdır.
  • Açıklayıcı meta description kullanılmalıdır.
  • Yalnızca bir adet <h1> etiketi bulunmalıdır.
  • Başlıklar mantıksal sırayla (h2, h3…) ilerlemelidir.
  • Tüm görsellerde açıklayıcı alt metni yer almalıdır.
  • Anlamlı bağlantı metinleri kullanılmalıdır.
  • Gereksiz HTML kodlarından kaçınılmalıdır.
  • Mobil uyumluluk için viewport etiketi eklenmelidir.

Sonuç

HTML, web geliştirme yolculuğunun temel taşıdır. Sağlam bir HTML bilgisi; CSS, JavaScript, PHP ve diğer teknolojileri öğrenmeyi kolaylaştırır. Temiz, düzenli ve semantik HTML kodları yalnızca geliştiriciler için değil, arama motorları ve erişilebilirlik açısından da büyük önem taşır.

Sık Sorulan Sorular

HTML öğrenmek zor mudur?

Hayır. HTML, web geliştirmeye başlayanlar için öğrenmesi en kolay teknolojilerden biridir.

HTML ile dinamik web sitesi yapılabilir mi?

Hayır. HTML yalnızca sayfanın yapısını oluşturur. Dinamik işlemler için JavaScript veya PHP gibi teknolojiler gerekir.

HTML ücretsiz midir?

Evet. HTML açık bir standarttır ve ücretsiz olarak kullanılabilir.

HTML öğrenmeden CSS öğrenebilir miyim?

Temel HTML bilgisi olmadan CSS öğrenmek mümkündür ancak verimli değildir. Önce HTML öğrenmek daha doğru bir başlangıç olacaktır.

HTML hangi dosya uzantısıyla kaydedilir?

HTML dosyaları .html veya .htm uzantısıyla kaydedilir.