En Çok Kullanılan HTML Tagleri

Önceki yazılarımızda Web Development ve HTML nedir gibi konulara değindik. Artık en popüler HTML etiketlerini (tag) öğrenme zamanı geldi!

HTML çok basit bir işaretleme dilidir ve HTML5’te yaklaşık olarak yüze yakın etiket (tag) vardır. Ancak bu yüze yakın etiketin hepsini bilmenize gerek yoktur, çünkü genellikle etiketlerin çok az bir kısmını kullanırsınız.

İşte bugünkü yazımda sizler için en çok kullanılan HTML etiketlerini derledim.

Yapı Etiketleri

Yapı etiketleri, her web sayfasında olması gereken temel etiketlerdir. Bu temel etiketler, tarayıcıya belgenin bir web sayfası olduğunu söylerler.

HTML Etiketi: Belgenin html olduğunu belirtmek için kullanılır. Diğer bütün etiketler, bu html etiketlerinin içine yazılır.

Syntax (Sözdizimi):

<html>...</html>

Head Etiketi: Bir sayfa içerisinde yer alması gereken ancak ziyaretçilerin görmemesi gereken etiketlerin yazıldığı kısımdır. Title, meta, link, style gibi elementler buraya yazılır ve bu kısmı sayfa ziyaretçileri göremez.

Syntax:

<head>...<head>

Title Etiketi: Bir sayfanın başlığını belirtmek için kullanılır. Head etiketinin içine yazılır. SEO ayarı için önemli etiketlerden birisidir.

Syntax:

<head><title>Sayfanın Başlığı</title></head>

Body Etiketi: HTML belgesinin gövdesini tanımlamak için kullanılır. Sayfa ziyaretçilerinin görmesi istenilen içeriğin ayarlandığı kısımdır.

Syntax:

<body>...</body>

İçerik Etiketleri

İçerik etiketleri, bir web sayfasına içerik (görsel, video, yazı vb.) eklerken kullandığımız etiketlerdir.

Heading (Başlık) Etiketi: Altı etiketten oluşan heading, bir HTML dosyasında başlıkları tanımlamak için kullanılır. Yazıyı, kelimeleri vurgulamak ya da kalınlaştırmak için değildir. SEO için büyük önem arz eder.

Syntax:

<h1>En önemli başlık için kullanılır.</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>En az önemli başlık için kullanılır.</h6>

Paragraf Etiketi: Paragrafı belirtmek için kullanılır. Her paragraftan önce otomatik olarak boşluk bırakılması için kullanılır. Bu boşluğun aralığını CSS ile ayarlayabilirsiniz.

Syntax:

<p>Ben bir paragrafım.</p>
<p>Ben de bir paragrafım.</p>

Boşluk Etiketi: Web siteleri, içerikte enter tuşuna basarak satırın kalanını boş bırakmak istediğimizde bunu sağlamaz; enter’ı görmezden gelerek aynı satırdan yazmaya devam eder. Boşluk etiketi bu tip durumlarda paragraf gibi taglerin içerisinde özellikle şiir yazarken satır başı yapmak için kullanılır.

Syntax:

<p>
Güller kırmızı <br>
Menekşeler mavi <br>
Yazacak bir şey bulamadım <br>
Olsun gari <br>
           -Persuado
</p>

Bölüm Etiketi: Bir web sayfasını bölümlere ayırmak için kullanılır. Bu bölümleri CSS ile şekillendirebilmemize olanak sağlar. Bu bölüm etiketinin detaylarına ve şekillendirilmesine sonraki yazılarımızda daha fazla değineceğiz.

Syntax:

<div class="content">
        <p>Bu bir paragraftır.</p>
        <img src="/resimler/ornek/ornekfoto.jpg">
</div>

Vurgu Etiketleri: İçeriği vurgulamak için kullanılır. Metin görünüşlerinin düzenlenmesi genellikle CSS kullanarak yapılır. Bu kısım SEO için önemlidir.

Syntax:

<em>Bu etiket kullanıldığında içeriği italikleştirir.</em>
<strong>Bu etiket kullanıldığında içeriği kalınlaştırır.</strong>

Görsel Etiketi: Web sayfasına bilgisayardan ya da internetten görsel eklenmesini sağlar.

Syntax:

<img src="location">

Video Etiketi: Web sayfasına bilgisayardan ya da internetten video eklenmesini sağlar.

Syntax:

<video>
<source src="location">
</video>

Link Etiketi: Web sayfasına link yerleştirmeyi sağlar.

Syntax:

<a href="location">

Liste Etiketleri: Bu etiketler sıralı veya sırasız listeler oluşturmak için kullanılır.
Açılımı ‘ordered list’ olan <ol></ul>, sıralı liste oluşturmayı; açılımı ‘unordered list’ olan <ul></ul> ise sırasız (bullet tipi) liste oluşturmayı sağlar.
‘List item’ anlamında kullanılan <li></li> tagi ise listenin her bir ögesini oluşturmak için kullanılır.

Syntax:

<ol>
<li>Bu sıralı listenin birinci ögesidir.</li>
<li>Bu sıralı listenin ikinci ögesidir.</li>
</ol>

<ul>
<li>Bu bullet tipi listenin birinci ögesidir.</li>
<li>Bu bullet tipi listenin ikinci ögesidir.</li>
</ul>

Yorum Etiketi: Yorum etiketleri kod içerisinde not almamızı sağlar. Aşağıdaki iki etiketin içerisine yazılan yazılar web sayfasında görünmez.

Syntax:

<!-- Bu bir yorumdur. Web sayfasında görünmez. -->

Tablo Etiketleri

Tablo etiketleri de en sık kullanılan HTML etiketleri arasındadır. Mantığının listeleme yönetiminin mantığı ile hemen hemen aynı olduğu kısımda bir tablonun nasıl oluşturulduğunu ve içerisine ögelerin nasıl eklendiğini öğreneceksiniz.

Tablo Etiketi: Tablo etiketi, aynı listeleme yönteminde olduğu gibi, bir HTML tablosunu tanımlar.

Syntax:

<table>...</table>

Açılımı ‘table row’ olan <tr></tr> elementi satır oluşturmak için kullanılırken; açılımı ‘table data cell’ olan <td></td> elementi sütun oluşturmak için kullanılır.
‘Table header’ anlamına gelen <th></th> elementi ise tablonun üst bilgisini (başlığı) oluşturmak için kullanılır.
Not: Tablolara kenar, highlight vb. eklemek için CSS kullanmanız gerekir.

Örnek:

Hadi şimdi bu anlatılanları bir örnek üzerinde inceleyelim. Her sınıfta kaç öğrenci olduğunu belirten, üç sınıf içeren bir tablo oluşturalım. 12-A sınıfının öğrenci sayısı 15, 12-B sınıfının öğrenci sayısı 18 ve 12-C sınıfının öğrenci sayısı 21 olsun.

<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>

<!-- Buraya kadar olan kısımda stil etiketini kullanarak tabloya kenarlık ekledik. -->

<body>
<h1>Sınıfların Öğrenci Dağılımları</h1>

<!-- Bu kısımda tablo için bir başlık belirledik. -->

<table>
  <tr>
    <th>12-A</th>
    <th>12-B</th>

    <th>12-C</th>
  </tr>


<!-- Bu kısımda tablo etiketimizi açtık ve içerisinde satır eklediğimizi belirten <tr> etiketini kullandık. Daha sonra bu satırın ögelerini <th> etiketini kullanarak ekledik. (Burada üst bilgi yazdığımız için <th> etiketini kullanıyoruz.) -->

  <tr>
    <td>15</td>
    <td>18</td>

    <td>21</td>
  </tr>
 
<!-- Burada son olarak <tr> etiketini kullanarak yeni bir satır oluşturduk. Ardından <td> etiketini kullanarak aynı satırda üç yeni sütun oluşturduk ve verileri bu tagi kullanarak yazdık. -->

</table>
</body>

Sonuç: