Bütün HTML Etiketleri Açıklamaları ve Kullanımı

mustafabosnak 9 Aralık 2021

Bütün HTML Etiketleri Açıklamaları ve Kullanımı

HTML etiketleri, web tarayıcısının içeriği nasıl biçimlendireceğini ve görüntüleyeceğini tanımlayan anahtar kelimeler gibidir. Etiketlerin yardımıyla, bir web tarayıcısı bir HTML içeriği ile basit bir içerik arasında ayrım yapabilir. HTML etiketleri üç ana bölümden oluşur: açılış etiketi, içerik ve kapanış etiketi. Ancak bazı HTML etiketleri kullanımı nedeniyle kapatılmaz. Bütün HTML etiketleri açıklamaları ve kullanımı için aşağıdaki liste size bir referans olacaktır.

Bir web tarayıcısı HTML belgesini okuduğunda, tarayıcı onu yukarıdan aşağıya ve soldan sağa okur. HTML etiketleri, HTML belgeleri oluşturmak ve özelliklerini yansıtmak için kullanılır. Her HTML etiketinin farklı özellikleri ve kullanım amacı vardır.

Bir HTML dosyası, web tarayıcısının basit bir metin ile HTML metni arasında ayrım yapabilmesi için bazı temel etiketlere sahip olmalıdır. Kod gereksiniminize göre istediğiniz kadar etiket kullanabilirsiniz.

Bütün HTML etiketleri “<” bu parantez ile başlar ve “>”bu parantez ile biter. HTML’deki her etiket farklı görevler gerçekleştirir. Bazı etiketler hariç bütün HTML etiketleri açılış etiketi ile başlar ve kapatılmak zorundadır. Kapatılmadığı durumda kendisinden sonra gelen etiketleri ve içerikleri de kullanıma dahil edeceği için iyi bir deneyim olmaz.

HTML Etiketleri

<!-- -->

Bu etiket, bir HTML belgesine yorum uygulamak için kullanılır. Genellikle yazdığınız kod bloklarının amacını veya işlevini tanımlayarak sizden sonra değişiklik yapacak bir yazılımcının veya gerektiğinde kendinizin işlemleri sorunsuz halletmenizi kolaylaştırır. Bu etiket arasına yazacağınız metin ve kodlar tarayıcılar tarafından yorumlanmaz.

<!DOCTYPE html> 
<html> 
<!-- Başlık alanı --> 
<head> 
    <!-- Satır içi stil kodu --> 
    <style> 
        body{  
            background-color: blue;
        }  
    </style> 
</head> 
  
<!-- Bu gövde bölümüdür, web sayfasında görüntülemek istediğiniz kodu buraya yazın --> 
<body> 
    <!-- Başlık etiketi --> 
 <h2>Merhaba Dünya!</h2> 
  
 <!-- Paragraf etiketi --> 
 <p>İçerik buraya gelecek.</p> 
</body> 
</html>

<!DOCTYPE>

Bu etiket, projenizde kullandığınız HTML sürümünü belirtmek için kullanılır.

<a>

Bağlantı etiketi olarak adlandırılır ve bir köprü veya bağlantı oluşturur.

<a href="https://mustafabosnak.com.tr">Mustafa Boşnak</a>

<abbr>

Bir kelime öbeği veya daha uzun bir kelime için bir kısaltma tanımlar.

<abbr title="HyperText Markup language">HTML</abbr>

<acronym>

Bir kelimenin kısaltmasını tanımlar. (HTML5’te desteklenmez)

<acronym title="Türkiye Büyük Millet Meclisi">TBMM</acronym>

<address>

Yazarın HTML makalesinin iletişim bilgilerini tanımlar. Daha belirgin ve italik çıktı sunmaktadır.

<address>İletişim:<br>  
<a href="mailto:[email protected]">[email protected]</a></address>

<applet>

Katıştırılmış bir Java uygulamasını tanımlar. (HTML5’te desteklenmez)

<!DOCTYPE html>  
<html>  
<head>  
  <title>Applet Etiketi</title>  
 </head>  
 <body>  
   <p>Applet Etiket Örneği</p>  
    <applet code="Shapes.class" align="right" height="200" width="300">  
     <b>Üzgünüm! Bunu görmek için Java'ya ihtiyacınız var.</b>  
     </applet>  
  </body>  
</html>

<area>

Bir görüntü haritasının alanını tanımlar.

<!DOCTYPE html>  
<html>  
	<head>  
		<title>HTML Area Etiketi</title>  
	</head>  
 	<body>  
		<h2>HTML Area Etiketi Örneği</h2>  
		<img src="gorsel.png" usemap="#web">  
		<map name="web">  
			<area shape="rect" coords="66,117,131,168" href="https://mustafabosnak.com.tr/html">  
			<area shape="rect" coords="199,36,277,85" href="https://mustafabosnak.com.tr/php">  
			<area shape="rect" coords="330,107,406,159" href="https://mustafabosnak.com.tr/jquery">  
			<area shape="rect" coords="199,185,267,236" href="https://mustafabosnak.com.tr/wordpress">  
		</map>  
	 </body>  
</html>

<article>

Bağımsız içeriği tanımlar.

<article>  
 <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>  
  <i>Lorem ipsum </i>  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Enim veritatis facilis distinctio, harum mollitia ab sequi fuga incidunt minima. Asperiores quos vel soluta doloribus ducimus voluptatum quibusdam consectetur nulla voluptatem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus explicabo doloremque hic molestias adipisci. Ipsa quae voluptatibus iusto repellendus iure eligendi laborum laudantium autem, eveniet perferendis magnam ratione soluta, saepe? </p>  
</article>

<aside>

Ana içeriğin dışında içeriği tanımlar. Esas olarak kenar çubuğu olarak temsil edilir.

<p>Ankara'ya taşınmak istiyorum.</p>  
<aside>  
  <h3>Ankara</h3>  
  <p>Türkiye'nin başkenti.</p>  
</aside>

<audio>

Ses içeriğini HTML belgesine gömmek için kullanılır.

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

<b>

Metni kalın yapmak için kullanılır.

<p> Merhaba, <b>kalın metin yazma yöntemi budur.</b></p>

<base>

Bu etiket, belge içindeki tüm göreli URL’ler için temel URL’yi tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Base Etiketi</title>  
    <style>  
      a{text-decoration: none;color:black;}  
      a:hover{color: green;font-size: 18px;}  
    </style>  
    <base href="https://mustafabosnak.com.tr">  
 </head>  
 <body>  
        <h2 style="color: red; font-size: 30px; font-style: italic;">Mustafa Boşnak Site Kategorileri</h2>  
        <a href="/html/">HTML</a><br>  
        <a href="/css/">CSS</a><br>  
        <a href="/js/">JS</a><br>  
        <a href="/jquery/">jQuery</a><br>  
        <a href="/php/">PHP</a>  
  </body>  
</html>

<basefont>

Bu etiket, belgenin tüm öğeleri için varsayılan yazı tipi, boyut ve rengi ayarlamak için kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>  
<html>  
<head>  
<title>Basefont Etiketi</title>  
 <basefont color="blue" size="5" face="arial">  
</head>  
<body>   
<h2>Basefont Etiket Örneği</h2>  
<p>Bu etiket HTML5'te desteklenmez. CSS kullanın.</p>  
</body>  
</html>

<bdi>

Bu etiket, metnin çevresindeki metinden farklı yönlerde biçimlendirilebilecek bölümü için yalıtım sağlamak için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
<title>Bdi Etiketi</title>  
</head>  
<body>  
<h2>bdi Etiketi Örneği</h2>  
<p>  
Bu <bdi> مصطفى بوسنياك </bdi>  Arapça dilinde yazılmış bir metindir. Bu metin bdi etiketi sayesinde sağdan sola yazılacaktır.
</p>  
</body>  
</html>

<bdo>

Geçerli metin yönünü geçersiz kılmak için kullanılır.

<!DOCTYPE html>
<html>
<head>
     <title>Bdo etiketi</title>
  </head>
<body>
      <h2>HTML bdo etiketi örneği</h2>
      <p style="color:#ff4040">Bu, varsayılan yönlülüğe sahip Normal İçeriktir</p>
      <p>Bu, soldan sağa yönlüdür:
          <bdo dir="ltr" style="color: #5f9ea0">Güzel Bir Çiçek</bdo>
      </p>
       <p>Bu, sağdan sola yönlüdür:
          <bdo dir="rtl" style="color:#68228b">Güzel Bir Çiçek</bdo>
       </p>
  </body>
</html>

<big>

Bu etiket, yazı tipi boyutunu çevresindeki içerikten bir düzey daha büyük yapmak için kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>
  <html>
  <head>
    <title>big etiketi</title>
  </head>
  <body>
    <h2>HTML big etiketi örneği</h2>
     <p style="color:#ff4040">Bu, normal yazı tipi boyutuna sahip bir paragraftır</p>
     <p style="color:#00bfff">
         <big>Bu, yazı tipi boyutu önceki içerikten daha büyük olan paragraftır</big>
     </p>
   </body>
</html>

<blockquote>

Başka bir kaynaktan alınan bir içeriği tanımlamak için kullanılır. Alıntı etiketidir.

<!DOCTYPE html>
<html>
<head>
     <title>Blockquote etiketi</title>
</head>
<body>
     <h2>Blockquote etiketi örneği</h2>
     <p>Muhteşem Bir Motivasyon Alıntısı :</p>
    <blockquote cite="https://www.brainyquote.com/authors/erin_cummings">
     <p>
      Günün sonunda, başarınızdan ve başarısızlığınızdan yalnızca siz sorumlusunuz. Ve bunu ne kadar erken anlarsanız, kabul ederseniz ve bunu iş ahlakınıza ne kadar entegre ederseniz, başarılı olmaya başlayacaksınız. Olmak istediğin yerde olmadığın için başkalarını suçladığın sürece, her zaman başarısız olacaksın.
      </p>
    </blockquote>
<cite>Erin Cummings</cite>
</body>
</html>

<body>

Bir HTML belgesinin gövde bölümünü tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
  <title>Body Etiketi</title>
</head>
<body>
  <h2>Body etiketi örneği</h2>
  <p>Bu paragraf gövde etiketi arasına yazılır</p>
</body>
</html>

<br>

Tek satır sonu uygulamak için kullanılır. Kapatılmayan etiketlere örnek olarak verebiliriz.

<!DOCTYPE HTML>
<html>
<head>
<title>
BR etiketi örneği
</title>
</head>
<body>
<p>Bir paragrafta <br> bir satırı kesmek istiyorsanız, <br> HTML belgenizde <br> BR öğesini kullanın. </p>
</body>
</html>

<button>

Tıklanabilir bir düğmeyi temsil etmek için kullanılır

<button name="button" type="button">Tıklayınız</button>

<canvas>

Bir web belgesi içinde grafik alanı sağlamak için kullanılır.

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">  
Tarayıcınız HTML5 canvas etiketini desteklemiyor.
</canvas>

<caption>

Bir tablo için bir başlık tanımlamak için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Caption Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>Caption etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<center>

İçeriği ortaya hizalamak için kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>
<html>
<head>
     <title>center etiketi</title>
  </head>
  <body>
     <h2>center etiket örneği</h2>
     <center>Bu içerik sayfanın ortasında görüntüleniyor, ancak bu etiket artık kullanımdan kaldırıldığı için içeriği hizalamak için CSS özelliğini kullanmayı deneyin.</center>
   </body>
</html>

<cite>

Eserin, kitabın, web sitesinin vb. başlığını tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
     <title>Alıntı Etiketi</title>
  </head>
  <body>
     <h2>Örnek alıntı etiketi</h2>
               <p>Ünlü bir kitap:
                 Jennifer Niederst Robbins tarafından yazılan <cite> Web Tasarımını Öğrenme</cite>
               </p>
  </body>
</html>

<code>

Bir HTML belgesinde programlama kodunun bir bölümünü görüntülemek için kullanılır.

<code>Kod etiketinin içeriği.</code>

<col>

Bir tablo içinde, sütunların ortak özelliklerini temsil eden ve <colgroup> öğesiyle birlikte kullanılan bir sütunu tanımlar.

<!DOCTYPE html>
<html>
<head>
	<title>Col etiketi</title>
</head>
<body>
<h2>Col etiketi örneği</h2>
<table border="1">
	<colgroup>
		<col  span="2" style="background-color: #7fffd4">
		<col span="2" style="background-color: 	#98f5ff">
	</colgroup>
	<tr>
		<th>#</th>
		<th>İsim</th>
		<th>Matematik</th>
		<th>Bilim</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Ali</td>
		 <td>68</td>
		 <td>54</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Veli</td>
		 <td>65</td>
		 <td>61</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Ahmet</td>
		 <td>55</td>
		 <td>78</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mehmet</td>
		 <td>75</td>
		 <td>52</td>
	</tr>
</table>
</body>
</html>

<colgroup>

Bir tablodaki sütun gruplarını tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
	<title>Colgroup etiketi</title>
</head>
<body>
<h2>Colgroup etiketi örneği</h2>
<table border="1">
	<colgroup>
		<col  span="2" style="background-color: #7fffd4">
		<col span="2" style="background-color: 	#98f5ff">
	</colgroup>
	<tr>
		<th>#</th>
		<th>İsim</th>
		<th>Matematik</th>
		<th>Bilim</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Ali</td>
		 <td>68</td>
		 <td>54</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Veli</td>
		 <td>65</td>
		 <td>61</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Ahmet</td>
		 <td>55</td>
		 <td>78</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mehmet</td>
		 <td>75</td>
		 <td>52</td>
	</tr>
</table>
</body>
</html>

<data>

İçeriği makine tarafından okunabilen çeviriye bağlamak için kullanılır.

<ul>  
<li><data value="101">Java Eğitimi</data></li>  
<li><data value="111">SQL Eğitimi</data></li>  
<li><data value="121">HTML Eğitimi</data></li>  
</ul>

<datalist>

Giriş seçeneği için önceden tanımlanmış bir liste sağlamak için kullanılır.

<!DOCTYPE>
<html>  
	<body>  
		<label>  
			 Favori yazarınızı girin: Herhangi bir karaktere basın<br>  
			 <input type="text" id="favoriYazar" list="yazarlar">  
			 <datalist id="yazarlar">  
				 <option value="Oğuz Atay">  
				 <option value="Ahmet Hamdi Tanpınar">  
				 <option value="Orhan Kemal">   
				 <option value="Yusuf Atılgan">   
				 <option value="Halit Ziya Uşaklıgil">   
				 <option value="Orhan Pamuk">   
				 <option value="Sabahattin Ali">   
				 <option value="Reşat Nuri Güntekin">   
				 <option value="Peyami Safa">   
				 <option value="Mehmet Rauf">
			 </datalist>  
		</label>  
	</body>  
</html>

<dd>

Tanımlama listesindeki bir terimin tanımını/açıklanmasını sağlamak için kullanılır.

<dl>
   <dt>HTML</dt>
   <dd>bir işaretleme dilidir</dd>
   <dt>Java</dt>
   <dd>bir programlama dili ve platformudur</dd>
  <dt>JavaScript</dt>
  <dd>bir betik dilidir</dd>
   <dt>SQL</dt>
   <dd>bir sorgu dilidir</dd>
</dl>

<del>

Belgeden silinmiş bir metni tanımlar.

<!DOCTYPE html>
<html>
<head>
	<title>Del etiketi</title>
</head>
	<body>
		<h2>Del Etiketi Örneği</h2>
		<p><del> silinen </del> metni temsil eder. </p>
	</body>
</html>

<details>

Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar.

<details>
<summary>Telif hakkı 2021.</summary>
<p> -- Mustafa Boşnak tarafından. Tüm Hakları Saklıdır.</p>
<p>Bu web sitesindeki tüm içerik ve grafikler mustafabosnak.com.tr'ye aittir</p>
</details>
<p><b>Not:</b> Details etiketi şu anda yalnızca Opera, Chrome ve Safari 6'da desteklenmektedir.</p>

<dfn>

Bir cümle/ifade içinde tanımlanan bir terimi belirtmek için kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Dfn etiketi</title>
</head>
<body>
<h2>dfn Etiketi Örneği</h2>
<p><dfn>HTML</dfn> Web tasarımı için bir biçimlendirme dili</p>
</body>
</html>

<dialog>

Bir iletişim kutusu veya diğer etkileşimli bileşenleri tanımlar.

<!DOCTYPE>
<html>
<body>
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px noktalı siyah;">
<p><q>O kadar zekiyim ki bazen söylediklerimin tek kelimesini anlamıyorum.
</q> -- <cite>Oscar Wilde</cite></p>
<button id="hide">Kapat</button>
</dialog>
<button id="show">İletişim Kutusunu Göster</button>
</div>
  
<!-- "Göster/Kapat" işlevini sağlayan JavaScript -->
<script type="metin/JavaScript">
(işlev() {
     var dialog = document.getElementById('myFirstDialog');
     document.getElementById('göster').onclick = function() {
         dialog.show();
     };
     document.getElementById('gizle').onclick = function() {
         dialog.close();
     };
})();
</script>
</body>
</html>

<dir>

Dosyaların dizin listesi için kapsayıcı olarak kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>
<html>
<head>
<title>Dir etiketi</title>
<stil>
h2{
renk: #b22222;}
P{
yeşil renk;}
</style>
  </head>
<body>
   <h2>Dir etiketi örneği</h2>
   <p>Popüler Öğreticilerin listesi</p>
     <dir>
<li>Java öğreticisi</li>
<li>DBMS-eğiticisi</li>
<li>DataStructure-eğiticisi</li>
<li>HTML öğreticisi</li>
    </dir>
  </body>
</html>

<div>

HTML belgesi içindeki bir bölümü tanımlar. Genellikle ayrı bloklar oluşturmak için kullanılır.

<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>mustafabosnak.com.tr'ye Hoş Geldiniz, Burada kodlama diller hakkında yazılar ve örnekler bulacaksınız.</p>
<p>Bu ikinci paragraftır</p>
</div>

<dl>

Bir açıklama listesi tanımlamak için kullanılır.

<dl>
   <dt>HTML</dt>
   <dd>bir işaretleme dilidir</dd>
   <dt>Java</dt>
   <dd>bir programlama dili ve platformudur</dd>
  <dt>JavaScript</dt>
  <dd>bir betik dilidir</dd>
   <dt>SQL</dt>
   <dd>bir sorgu dilidir</dd>
</dl>

<dt>

Açıklama listesinde bir terim tanımlamak için kullanılır.

<dl>
   <dt>HTML</dt>
   <dd>bir işaretleme dilidir</dd>
   <dt>Java</dt>
   <dd>bir programlama dili ve platformudur</dd>
  <dt>JavaScript</dt>
  <dd>bir betik dilidir</dd>
   <dt>SQL</dt>
   <dd>bir sorgu dilidir</dd>
</dl>

<em>

Bu öğe içinde uygulanan içeriği vurgulamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Em Etiketi</title>
  </head>
  <body>
  <h2>Em Etiketi Örneği</h2>
  <p>Bu <em>HTML em etiketidir</em> ve cümlenin <em>önemli metnini</em> vurgulayacaktır</p>
</body>
</html>

<embed>

Harici dosya/uygulama/medya vb. işlemler için gömülü kapsayıcı olarak kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Embed Etiketi</title>
</head>
<body>
<h2>Embed etiketi örneği</h2>
<p>Dans Eden Penguen</p>
<embed src="giphy.gif" height="200" width="300"></embed>
</body>
</html>

<fieldset>

Bir web formu içindeki ilgili öğeleri/etiketleri gruplamak için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
<title>fieldset Etiketi</title>  
<style>  
    p{  
       color: #db7093;  
       margin-left: 440px;  
       font-size: 40px;  
       font-weight: bold;  
        }  
    form{  
             color: white;  
    width: 600px;  
             height: 300px;  
    margin: auto;  
    margin-top: 30px;}  
    div{  
    background-color: #28455e;  
        }  
                  .tx{  
    margin-left: 20px;  
        }  
</style>  
</head>  
<body>  
 <h1>fieldset Etiketi Örnek</h1>  
 <p>Kullanıcı Formu</p>  
 <div>  
 <form class="wd">  
     <fieldset class="wd">  
        <legend>Bilgiler:</legend>  
        <label>Ad</label><br>  
        <input type="text" name="fname"><br>  
        <label>Soyad</label><br>  
        <input type="text" name="lname"><br>  
        <label>E-Posta</label><br>  
        <input type="email" name="email"><br><br>  
     </fieldset><br>  
    <label class="tx">Yorumunuz:</label><br>  
    <textarea class="tx" cols="30"></textarea><br><br>  
     <input  class="tx" type="Gönder"><br>  
  </form>  
 </div>  
</body>  
</html>

<figcaption>

<figure> elemanına açıklama veya başlık eklemek için kullanılır.

<figure>  
  <img src="https://mustafabosnak.com.tr/wp-content/webp-express/webp-images/uploads/2021/09/mustafabosnak-logo-renkli-2.png.webp" alt="Mustafa Boşnak"/>  
<figcaption>Mustafa Boşnak Web Site Logosu</figcaption>  
</figure>

<figure>

Bağımsız içeriği tanımlamak için kullanılır ve çoğunlukla tek bir birim olarak adlandırılır.

<p>Mustafa Boşnak Web Site Logosu</p>  
<figure>  
  <img src="https://mustafabosnak.com.tr/wp-content/webp-express/webp-images/uploads/2021/09/mustafabosnak-logo-renkli-2.png.webp" alt="Mustafa Boşnak"/>
</figure>

<font>

İçeriğin yazı tipini, boyutunu, rengini ve tipini tanımlar. (HTML5’te desteklenmez)

<!DOCTYPE html>
  <html>
  <head>
  <title>font Etiketi</title>
  </head>
  <body>
  <h2>font etiketi örneği</h2>
  <p>Bu, herhangi bir yazı tipi stili olmayan normal metindir</p>
   <p>
     <font color="blue">Normal boyutta ve varsayılan stile sahip metin</font>
   </p>
   <p>
     <font size="5" color="green">Büyütülmüş boyuta ve varsayılan stile sahip metin</font>
   </p>
   <p>
     <font color="red" face="cursive">Stili değiştirilmiş metin</font>
   </p>
</body>
</html>

<footer>

Bir web sayfasının altbilgi bölümünü tanımlar.

<!DOCTYPE>
<html>
<body>
<footer>
<p>Yazan: Mustafa Boşnak</p>
<p>İletişim bilgileri:
<a href="mailto:[email protected]">[email protected]</a>.
</p>
</footer>
</body>
</html>

<form>

Bir HTML formunu tanımlamak için kullanılır.

<form action="post/get url" method="get/post">  
//yazı kutusu, seçim listesi, seçim kutusu ve gönder butonu vs.
</form>

<frame>

Web sayfasının başka bir HTML dosyası içerebilen belirli bir alanını tanımlar. (HTML5’te desteklenmez)

<!DOCTYPE html>  
<html>  
<head>  
    <title>Frame etiketi</title>  
</head>  
  <frameset cols="50%,50%">  
    <frame  src="https:/mustafabosnak.com.tr/html/">  
    <frame  src="https:/mustafabosnak.com.tr/css/">     
   </frameset>  
</html>

<frameset>

Frame grubunu tanımlar. (HTML5’te desteklenmez)

<!DOCTYPE html>  
<html>  
<head>  
    <title>Frameset etiketi</title>  
</head>  
  <frameset cols="50%,50%">  
    <frame  src="https:/mustafabosnak.com.tr/html/">  
    <frame  src="https:/mustafabosnak.com.tr/css/">     
   </frameset>  
</html>

<h1> -- <h6>

Seviye 1’den seviye 6’ya kadar bir HTML belgesinin başlıklarını tanımlar.

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

<head>

Bir HTML belgesinin baş bölümünü tanımlar. Sıklıkla stil dosyalarının dahil edildiği ve meta etiketlerinin kullanıldığı alandır.

<!DOCTYPE html>
<html>
<head>
   <title>Bu Sayfa Başlığı</title>
</head>
<body>
<p>Body içeriği tarayıcı penceresinde görüntülenir.</p>
<p>title öğesinin içeriği tarayıcı sekmesinde, favorilerde ve arama motoru sonuçlarında görüntülenir.</p>
</body>
</html>

<header>

Bir bölümün veya web sayfasının başlığını tanımlar.

<header>  
<h2>mustafabosnak.com.tr</h2>  
<p> Bir web geliştiricinin web sitesi.</p>  
</header>

<hr>

Paragraf düzeyindeki öğeler arasında tematik ara (yatay çizgi) uygulamak için kullanılır.

<h2>HTML</h2>
<p>HTML, web sayfalarını tanımlamak için kullanılan bir dildir.</p>
<hr>
<h2>HR Etiketi </h2>
<p> HR etiketi, içeriği ayırmak için metinler içinde yatay bir çizgi çizmek için kullanılır.<p>

<html>

Bir HTML belgesinin kökünü temsil eder.

<!DOCTYPE html>
<html>
<head>
<title>HTML etiketi</title>
</head>
<body>
<h2>HTML etiketi örneği</h2>
<p> Ana İçeriğinizi HTML belgesinin Gövdesi içine yazın. </p>
</body>
</html>

<i>

Bir metni farklı bir sesle temsil etmek için kullanılır.

<!DOCTYPE html>
<html>
<head>
     <title>HTML i Etiketi</title>
</head>
<body>
<h2>HTML i etiketi örneği</h2>
<p>Ali ve ekibi yeni web sitesi projesi <i>Eğitim Bloğu</i> için hazır </p>
</body>
</html>

<iframe>

Farklı bir içeriği gömebilen bir satır içi çerçeve tanımlar.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframe örneği</h2>
<p>iframe'in boyutunu belirtmek için yükseklik ve genişlik özelliklerini kullanın:</p>
<iframe src="https://mustafabosnak.com.tr/" height="300" width="400"></iframe>
</body>
</html>

<img>

Bir HTML belgesine resim eklemek için kullanılır.

<h2>HTML img örneği</h2>  
<img src="https://mustafabosnak.com.tr/wp-content/webp-express/webp-images/uploads/2021/09/mustafabosnak-logo-renkli-2.png.webp" alt="Mustafa Boşnak"/>

<input>

Bir HTML formu içinde bir giriş alanı tanımlar. Alacağı type değerine göre bir yazı kutusu, seçim kutusu vb. oluşturur.

<form action="#">  
Adınız: <input type="text" name="ad"  placeholder="Adınızı girin…"><br>  
Soyadınız: <input type="text" name="soyad" placeholder="Soyadınızı girin…"><br>  
<input type="submit" value="Gönder">  
</form>

<ins>

Bir HTML belgesine eklenen metnin altını çizer.

<!DOCTYPE html>
<html>
<head>
     <title>HTML input Etiketi</title>
</head>
<body>
<h2>Örnek ins etiketi</h2>
<p>
     <del>çok çalışırsanız </del> <ins>akıllıca çalışırsanız</ins> başarıyı kolayca elde edersiniz
</p>
</body>
</html>

<isindex>

Geçerli belge için arama dizesini görüntülemek için kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>
<html>
<head>
<isindex prompt = "Belgenizi burada arayın" />
</head>
</html>

<kbd>

Klavye girişini tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
     <title>Kbd Etiketi</title>
<stil>
     kbd { border: 1px solid blue;    
        border-radius: 8px;    
        padding: 3px 5px;   
        margin: 2px;
      }
</style>
</head>
<body>
<h2>Kbd etiketi örneği</h2>
<p>MS belgesi kullanıyorsanız, geçerli belgenizi kaydetmek için <kbd>ctrl + s</kbd> kısayolunu kullanabilirsiniz. </p>
</body>
</html>

<label>

Formun giriş alanı (yazı kutusu, seçim kutusu vb.) için bir metin etiketi tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<title>  
Label etiketi örneği
</title>  
<style>  
/* Aşağıdaki etiket seçici gövdesi, bir sayfanın gövdesi için yazı tipi ailesi ve arka plan rengi özelliklerini kullanır*/  
  
body {  
font-family: Calibri, Helvetica, sans-serif;  
background-color: pink;  
}   
/* Aşağıdaki kap sınıfı, çevresinde boşluk oluşturmak için dolguyu kullandı ve ayrıca arka plan olarak açık mavi rengini belirtmek için bir arka plan rengi kullanın */    
.container {  
padding: 50px;  
background-color: lightblue;  
}  
/* Aşağıdaki etiket seçici girişi, dosyalanan metin için farklı özellikleri kullanır. */  
input[type=text] {  
  width: 100%;  
  padding: 15px;  
margin: 5px 0 22px 0;  
display: inline-block;  
 border: none;  
 background: #f1f1f1;  
}  
input[type=text]:focus {  
background-color: orange;  
outline: none;  
}  
 div {  
            padding: 10px 0;  
}      
hr {  
  border: 1px solid #f1f1f1;  
  margin-bottom: 25px;  
}  
/* Aşağıdaki etiket seçici düğmesi, Düğme için farklı özellikleri kullanır. */  
button {  
  background-color: #4CAF50;  
  color: white;  
  margin: 8px 0;  
  border: none;  
  cursor: pointer;  
  padding: 16px 20px;  
  width: 100%;  
  opacity: 0.9;  
}  
/* Aşağıdaki etiket seçici vurgusu, fareyle üzerine geldiğinizde düğmeyi seçen Düğme için opaklık özelliğini kullanır. */  
button:hover {  
opacity: 1;  
}  
</style>  
</head>  
<body>  
<form>  
<div class="container">  
<center>  <h1> Kayıt formu</h1> </center>  
<hr>  
<label for="firstname">   
Adı   
</label>   
<input type="text" id="firstname" name="ftname" placeholder= "Adı" size="15" required />   
<label for="middlename">   
Soyadı:   
</label>   
<input type="text" id="middlename" name="mname" placeholder="Soyadı" size="15" required />   
<label for="lastname">   
Soyadı:   
</label>    
<input type="text" id="lastname" name="ltname" placeholder="Soyadı" size="15"required />   
<div>  
<label for="gender">   
Cinsiyet :  
</label>  
<br>  
<input type="radio" id="gender" value="Erkek" name="gender" checked > Erkek   
<input type="radio" id="gender" value="Kadın" name="gender"> Kadın   
<input type="radio" id="gender" value="Diğer" name="gender"> Diğer  
  
</div>  
<label for="Phone">   
Telefon:  
</label>  
<input type="text" name="country code" placeholder="Ülke kodu"  value="+90" size="2"/>   
<input type="text" id="Phone" name="phone" placeholder="Telefon" size="10"/ required>   
<label for="email">   
E-posta  
</label>  
<input type="text" id="email" placeholder="E-posta Girin" name="email" required>  
<button type="submit" value="submit">Gönder</button>  
<button type="reset" value="submit">Sıfırla</button>  
</form>  
</body>  
</html>

<legend>

<fieldset> içeriği için bir başlık tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
<title>legend Etiketi</title>  
<style>  
    p{  
       color: #db7093;  
       margin-left: 440px;  
       font-size: 40px;  
       font-weight: bold;  
        }  
    form{  
             color: white;  
    width: 600px;  
             height: 300px;  
    margin: auto;  
    margin-top: 30px;}  
    div{  
    background-color: #28455e;  
        }  
                  .tx{  
    margin-left: 20px;  
        }  
</style>  
</head>  
<body>  
 <h1>legend Etiketi Örnek</h1>  
 <legend>Kullanıcı Formu</legend>  
 <div>  
 <form class="wd">  
     <fieldset class="wd">  
        <legend>Bilgiler:</legend>  
        <label>Ad</label><br>  
        <input type="text" name="fname"><br>  
        <label>Soyad</label><br>  
        <input type="text" name="lname"><br>  
        <label>E-Posta</label><br>  
        <input type="email" name="email"><br><br>  
     </fieldset><br>  
    <label class="tx">Yorumunuz:</label><br>  
    <textarea class="tx" cols="30"></textarea><br><br>  
     <input  class="tx" type="Gönder"><br>  
  </form>  
 </div>  
</body>  
</html>

<li>

Listedeki öğeleri temsil etmek için kullanılır.

<ol>  
 <li>1. liste öğesi</li>  
 <li>2. liste öğesi</li>  
 <li>3. liste öğesi</li>  
 <li>4. liste öğesi</li>  
</ol>

<link>

Geçerli belge ile harici bir kaynak arasındaki ilişkiyi kurar. Örneğin bir sitl dosyasını projenize dahil edebilirsiniz.

<!DOCTYPE html>
<html>
<head>
     <title>Link Etiketi</title>
     <link rel="stylesheet" type="text/css" href="link.css">
</head>
<body>
     <h2>Link Etiketi Örneği</h2>
     <p>Bu, dış stil sayfasıyla biçimlendirilmiş paragraftır. </p>
</body>
</html>

<main>

Bir HTML belgesinin ana içeriğini temsil eder.

<!DOCTYPE>
<html>
<body>
<main>
  <h2>Başlık</h1>
  <p>Paragraf</p>
  <article>
   <h3>Başlık</h3>
   <p>Paragraf</p>
  </article>
  <article>
   <h3>Başlık</h3>
   <p>Paragraf</p>
  </article>
</main>
</body>
</html>

<map>

Aktif alanları olan bir görüntü haritası tanımlar.

<!DOCTYPE html>  
<html>  
  <head>  
    <title>HTML Map Etiketi</title>  
  </head>  
  <body>  
    <h2>HTML Map Etiketi Örneği</h2>  
    <img src="gorsel.png" usemap="#web">  
    <map name="web">  
      <area shape="rect" coords="66,117,131,168" href="https://mustafabosnak.com.tr/html">  
      <area shape="rect" coords="199,36,277,85" href="https://mustafabosnak.com.tr/php">  
      <area shape="rect" coords="330,107,406,159" href="https://mustafabosnak.com.tr/jquery">  
      <area shape="rect" coords="199,185,267,236" href="https://mustafabosnak.com.tr/wordpress">  
    </map>  
   </body>  
</html>

<mark>

Vurgulanmış bir metni temsil eder.

<!DOCTYPE html>
<html>
<head>
     <title>Mark etiketi</title>
</head>
<body>
  <h2>Mark Etiketi Örneği</h2>
  <p><mark>Web tasarımı dersleri </mark> ile web sitesi tasarlamayı kolayca öğrenebilirsiniz.</p>
</html>

<marquee>

Kayan metni veya görüntüyü yatay veya dikey olarak eklemek için kullanılır. (HTML5’te desteklenmez)

<!DOCTYPE html>
<html>
<body>
<marquee>Bu, html kayan yazıya bir örnektir </marquee>
</body>
</html>

<menu>

Bir menü komut listesi oluşturmak için kullanılır.

  <!DOCTYPE html>  
  <html>  
 <head>  
  <title>Menu Etiketi</title>  
  </head>  
  <body>  
  <h2>Menü Etiketi Örnek</h2>  
 <menu>  
    <li>Ana Sayfa</li>  
    <li>Kayıt</li>  
    <li>İletişim</li>  
    <li>Hakkımda</li>  
 </menu>  
</body>  
</html>

<meta>

Bir HTML belgesinin meta verilerini tanımlar. Örneğin arama motorları bu veriler sayesinde web sitesi hakkında bilgi toplar.

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="keywords" content="HTML, CSS, JavaScript, Eğitimler">
     <meta name="description" content="Ücretsiz Çevrimiçi öğreticiler">
     <meta name="author" content="Mustafa Boşnak">
     <meta http-equiv="refresh" content="5; url=https://mustafabosnak.com.tr">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Meta etiketi örneği</h2>
<p>Bu örnek, bir HTML belgesinde meta etiket kullanımını gösterir</p>
</body>
</html>

<meter>

Bilinen aralık veya kesirli değer ile skaler ölçümü tanımlar.

<p>Bir meter örneği:</p>
<meter value="30" min="1" max="100">100 üzerinden 30</meter><br>
<meter value="0.8">%80</meter>

<nav>

Menü bağlantılarını temsil etmek için sayfanın bölümünü temsil eder.

 <!DOCTYPE html>  
  <html>  
 <head>  
  <title>Nav Etiketi</title>  
  </head>  
  <body>  
  <h2>Nav Etiketi Örnek</h2>  
 <nav>  
    <a href="#">Ana Sayfa</a>  
    <a href="#">Kayıt</a>  
    <a href="#">İletişim</a>  
    <a href="#">Hakkımda</a>  
 </nav>  
</body>  
</html>

<noframes>

<frame> öğelerini desteklemeyen tarayıcıda temsil edilecek alternatif içerik sağlar. (HTML5’te desteklenmez)

<!DOCTYPE html>    
<html>    
<head>    
    <title>Noframe etiketi</title>    
</head>    
    <frameset cols="50%,50%">    
    <frame src="https://mustafabosnak.com.tr/html/">    
    <frame src="https://mustafabosnak.com.tr/css/">  
    <noframes>Üzgünüm! Tarayıcınız çerçeveleri desteklemiyor.</noframes>      
   </frameset>    
</html>

<noscript>

Tarayıcıda javascript desteklenmiyorsa alternatif bir içerik sağlar.

<script>
document.write("Mustafa Boşnak'a Hoş Geldiniz")
</script>
<noscript>Üzgünüm! Tarayıcınız JavaScript'i desteklemiyor.!</noscript>

<object>

Bir nesneyi HTML dosyasına gömmek için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
<title>Obejct Etiketi</title>  
</head>  
<body>  
 <h2>Object etiketi örneği</h2>  
 <object height="250" width="500" data="https://www.youtube.com/embed/nLCveeY8CAE"></object>  
</body>  
</html>

<ol>

Sıralı bir öğe listesi tanımlar.

<ol>  
<li>Java Eğitimi</li>  
<li>SQL Eğitimi</li>  
<li>HTML Eğitimi</li>  
</ol>

<optgroup>

Bir açılır listenin (select) seçeneklerini gruplamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
    <title>Optgroup Etiketi</title>
</head>
<body>
<h2>optgroup etiketi örneği</h2>
<label>Favori markanızı seçin</label><br>
<select>
    <optgroup label="Dizüstü Bilgisayar">
        <option value="dell">Dell</option>
        <option value="hp">HP</option>
        <option value="lenovo">Lenovo</option>
        <option value="acer">Acer</option>
     </optgroup>
     <optgroup label="Mobil">
        <option value="apple">Elma</option>
        <option value="nokia">Nokia</option>
        <option value="samsung">Samsung</option>
        <option value="coolpad">Coolpad</option>
     </optgroup>
</select>
</body>
</html>

<option>

Bir açılır listedeki seçenekleri veya öğeleri tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
    <title>Option Etiketi</title>
</head>
<body>
<h2>Option etiketi örneği</h2>
<label>Favori markanızı seçin</label><br>
<select>
        <option value="dell">Dell</option>
        <option value="hp">HP</option>
        <option value="lenovo">Lenovo</option>
        <option value="acer">Acer</option>
</select>
</body>
</html>

<output>

Bir hesaplamanın sonucunu gösterebilen kapsayıcı eleman olarak kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Output Etiketi</title>
</head>
<body>
  <p>İki Sayının Toplamını Hesaplayın</p>
  <form oninput="res.value=parseInt(a.value)+parseInt(b.value);">
  <label>Birinci Değeri Girin.</label><br>
  <input type="number" name="a" value=""/><br>
  +<br/>
  <label>İkinci Değeri Girin.</label><br>
  <input type="number" name="b" value=""><br>
  =<br>
  Sonuç:<output name="res"></output>
  </form>
</body>
</html>

<p>

Bir HTML belgesindeki bir paragrafı temsil eder.

<p>Bu ilk paragraftır.</p>
<p>Bu ikinci paragraftır.</p>
<p>Bu üçüncü paragraftır.</p>

<param>

Bir <object> öğesi için parametre tanımlar

<!DOCTYPE html>  
<html>  
<head>  
<title>Param Etiketi</title>  
</head>  
<body>  
<h2>Param etiketi örneği</h2>  
<object data="https://www.youtube.com/embed/nLCveeY8CAE" >  
<param name="controller" value="true">  
</object>  
</body>  
</html>

<picture>

Birden fazla kaynak eleman ve bir resim elemanı tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Picture Etiketi</title>    
</head>  
<body>  
<h2>Picture Etiketi Örneği</h2>  
<p>Farklı görünümlerdeki görüntülerin farklı sürümlerini görmek için sayfayı yeniden boyutlandırın ve görünüm alanına göre görüntü otomatik olarak değişecektir.</p>  
<picture>  
    <source srcset="a.jpg" media="(min-width: 750px)">  
    <source srcset="b.jpg" media="(min-width: 450px)">  
    <img srcset="c.jpg" alt="Varsayılan Resim" style="width: auto;">  
</picture>  
</body>  
</html>

<pre>

Bir HTML belgesinde önceden biçimlendirilmiş metni tanımlar.

<pre>
Bu biçimlendirilmiş bir metindir
HTML ön etiketini kullanarak. korur
     hem boşluk hem de satır sonu.
</pre>

<progress>

Bir görevin ilerleme durumunu HTML belgesi içinde tanımlar.

<script>  
var gvalue=1;  
function abc(){  
 var progressExample = document.getElementById ('progress-ornek');  
     setInterval (function ()  
    {   
                 if(gvalue<100){  
                    gvalue++;  
                    progressExample.value =gvalue;    
                  }  
                 abc();              
      }, 1000);  
}  
</script>  
<progress id="progress-ornek" min="1" max="100"></progress>    
<br/><br/>  
<button onclick="abc()">Tıkla</button>

<q>

Kısa satır içi alıntıyı tanımlar.

<p> Aşk ve yaşam üzerine harika bir alıntı.</p>
<p> Dr. Seuss bir keresinde şöyle demişti: <q>Gerçeklik sonunda hayallerinizden daha iyi.</q></p>

<rp>

Tarayıcının Ruby ek açıklamalarını desteklememesi durumunda alternatif bir içerik tanımlar.

<ruby>  
     漢<rp>(</rp><rt>Kan</rt><rp>)</rp>  
    字 <rp>(</rp><rt>ji</rt><rp>)</rp>  
</ruby>

<rt>

Ruby ek açıklamalarındaki açıklamaları ve telaffuzları tanımlar.

<ruby>  
     漢<rp>(</rp><rt>Kan</rt><rp>)</rp>  
    字 <rp>(</rp><rt>ji</rt><rp>)</rp>  
</ruby>

<ruby>

Ruby ek açıklamalarını temsil etmek için kullanılır.

<ruby>  
     漢<rp>(</rp><rt>Kan</rt><rp>)</rp>  
    字 <rp>(</rp><rt>ji</rt><rp>)</rp>  
</ruby>

<s>

Artık doğru veya alakalı olmayan metni işaretler.

<h2>s etiketi örneği</h2>
<p><s>Çevrimiçi dersler için son başvuru tarihi 12/02/2021'dir</s></p>
<p>Online dersler için son başvuru tarihi 13/03/2021'dir</p>

<samp>

Bir bilgisayar programının örnek çıktısını temsil etmek için kullanılır.

<h2>Samp etiketi</h2>
<p>Sistemime bir yazılım yüklemeye çalışıyorum ama sürekli bir hata mesajı veriyor:
</p>
<p><samp>Hata 5: Erişim reddedildi.</samp></p>

<script>

JavaScript’i HTML belgesi içinde bildirmek/çalıştırmak için kullanılır.

<script>
   // Çalıştırılacak js kodu
</script>

<section>

Bir belge için genel bir bölüm tanımlar.

<section>  
<h3>Başlık </h3>  
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis expedita laudantium eius doloremque voluptate necessitatibus aperiam minima consectetur autem deleniti ea delectus temporibus odit, suscipit, blanditiis modi. Nemo, repellat, iusto! Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repellendus minus totam quaerat inventore dolores quis aspernatur libero amet, in vel, maiores non quod, ut. Fugiat harum enim ducimus ipsa! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt accusamus, vitae, labore sed nihil ab incidunt aspernatur ad blanditiis facere eius minus est, pariatur harum, assumenda tempora iste laborum dolorem.</p>  
</section>

<select>

Seçenekler listesi sağlayan form elemanını temsil eder.

<select>
        <option value="dell">Dell</option>
        <option value="hp">HP</option>
        <option value="lenovo">Lenovo</option>
        <option value="acer">Acer</option>
</select>

<small>

Metin yazı tipini belgenin temel yazı tipi boyutundan bir boyut küçültmek için kullanılır.

<p style="color: green;">Bu normal yazı tipi boyutudur…..
    <small style="color: blue;">Bir öncekinden daha küçük…
        <small style="color: red;">En küçüğüdür.</small>
    </small>
  </p>

<source>

<picture>, <video> ve <audio> öğesi gibi farklı medya öğeleri için birden çok medya kaynağı tanımlar.

<video controls="controls" height="200" width="300">  
    <source src="flower.webm" type="video/webm" >  
    <source src="flower.mp4" type="video/mp4">  
    Tarayıcınız HTML5 video öğesini desteklemiyor. 
</video>

<span>

Satır içi stil vermek ve gruplandırmak için kullanılır.

<p>Yalnızca <span style="color: red;">kırmızı</span>, <span style="color: blue;">mavi</span> ve <span style="color: green;">yeşil</span> seçtiğim renkler. </p>

<strike>

Metnin üzerini çizmek kullanılır. (HTML5’te desteklenmez)

<h2>Strike etiketi örneği</h2>
  <p><strike>Bu geçerli bir paragraf değil</strike></p>
   <p>Bu geçerli bir paragraftır</p>

<strong>

Önemli metni tanımlamak/kalınlaştırmak için kullanılır.

<h1>Strong etiket örneği</h1>
   <h2>Hava tahmini</h2>
    <p>Bugün hava iyi değil.
     <strong>Bugün şiddetli yağmur yağabilir, bu nedenle evinizde olmanız daha iyi olur.</strong>
   </p>

<style>

Bir HTML belgesinin içinde stil/css kodlarını çalıştırmak için kullanılır.

 <style> 
        body{  
            background-color: blue;
        }  
    </style>

<sub>

Alt simge metni olarak görüntülenen bir metni tanımlar.

<h2>Sub etiketi örneği</h2>
<p>Sülfürik asit için kimyasal formül: H<sub>2</sub>SO<sub>4</sub></p>

<summary>

<details> etiketi ile kullanılabilecek özeti tanımlar.

<details>
<summary>Telif hakkı 2021.</summary>
<p> -- Mustafa Boşnak tarafından. Tüm Hakları Saklıdır.</p>
<p>Bu web sitesindeki tüm içerik ve grafikler mustafabosnak.com.tr'ye aittir</p>
</details>

<sup>

Üst simge metni olarak temsil edilen bir metni tanımlar.

<h2>Sup etiketi örneği</h2>
   Ünlü Pisagor Teoremi aşağıdadır:
   <p style="font-size: 20px; color: green;"><var>a</var><sup>2</sup>+<var>b</var><sup>2</sup> =<var>c</var><sup>2</sup>
   </p>

<svg>

SVG (Ölçeklenebilir Vektör Grafikleri) kapsayıcısı olarak kullanılır.

<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

<table>

Verileri tablo şeklinde sunmak veya HTML belgesi içinde tablo oluşturmak için kullanılır.

<table>  
<tr><th>Ad</th><th>E-Posta</th><th>Durum</th></tr>  
<tr><td>Ali</td><td>[email protected]</td><td>Aktif</td></tr>   
<tr><td>Veli</td><td>[email protected]</td><td>Aktif</td></tr>   
<tr><td>Ahmet</td><td>[email protected]</td><td>Aktif</td></tr>   
</table>

<tbody>

Bir HTML tablosunun gövde içeriğini temsil eder. <thead> ve <tfoot> ile birlikte kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
    <title>tbody Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>tbody etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<td>

Bir HTML tablosunun hücrelerini tanımlamak için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
    <title>td Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>td etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<template>

Sayfa yüklendiğinde görüntülenmeyecek ve daha sonra JavaScript kullanılarak oluşturulabilecek istemci tarafında gerekli içerik için kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML Template Etiketi</title>  
<style>  
body{  
  background-color: #e6e6fa;  
}  
</style>  
</head>  
<body>  
  <h2>Template etiketi örneği</h2>  
  <button onclick="clickMe()">Tıklayınız</button><br>  
    
 <template id="mytemplate">  
   <img src="agac.jpg" alt="ağaç resmi" height="100" width="100">  
   <script>  
   alert("Şablonu seçtiğiniz için teşekkür ederiz. Görüntü için Tamam'a tıklayın.")  
   </script>  
  </template>  
  
<script>  
   function clickMe() {  
    var x= document.getElementsByTagName("template")[0];  
    var clon = x.content.cloneNode(true);  
    document.body.appendChild(clon);}  
</script>  
</body>  
</html>

<textarea>

Yorum, geri bildirim ve inceleme vb. gibi birden çok satır girişi tanımlamak için kullanılır.

<textarea rows="9" cols="70">
Satır ve sütunlarla textarea etiketi örneği.
</textarea>

<tfoot>

Bir HTML tablosunun alt bilgi içeriğini tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
    <title>tfoot Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>tfoot etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead> 
      <tfoot>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </tfoot>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<th>

Bir HTML tablosunun başlık hücresini tanımlar.

<!DOCTYPE html>  
<html>  
<head>  
    <title>th Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>th etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead> 
      <tfoot>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </tfoot>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<thead>

Bir HTML tablosunun başlığını tanımlar. <tbody> ve <tfoot> etiketleri ile birlikte kullanılır.

<!DOCTYPE html>  
<html>  
<head>  
    <title>thead Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>thead etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead> 
      <tfoot>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </tfoot>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<time>

Bir HTML belgesinde zaman tanımlamak için kullanılır.

<p>Dükkanımızı <time>09:00</time>'da açıyoruz.</p>
<p>İş toplantısı <time datetime="2021-12-10">önümüzdeki cuma</time> tarihine planlandı.</p>
<p>Ali'nin düğünü <time datetime="2021-12-15 T0 7:00-09:00">çarşamba 19:00 </time> olarak planlandı.</p>

<title>

Bir HTML belgesinin başlığını veya adını tanımlar.

<head>
     <title>İlk web sayfası.</title>
</head>

<tr>

Bir HTML tablosundaki satır hücrelerini tanımlar

<!DOCTYPE html>  
<html>  
<head>  
    <title>tr Etiketi</title>  
    <style>  
        table, td, th {  
        border: 3px solid gray;  
        border-collapse: collapse;}  
    </style>  
 </head>  
 <body>  
    <h2>tr etiketi örneği</h2>  
   <table width="800">  
      <caption>E-Posta Adreslerim</caption>  
      <thead>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </thead> 
      <tfoot>  
        <tr>  
            <th>#</th>  
            <th>Adı</th>  
            <th>E-Posta Adresi</th>  
          </tr>  
        </tfoot>  
       <tbody>  
        <tr>  
            <td>1.</td>  
            <td>İletişim</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>2.</td>  
            <td>Formlar</td>  
            <td>[email protected]</td>  
        </tr>  
        <tr>  
            <td>3.</td>  
            <td>Destek</td>  
            <td>[email protected]</td>  
        </tr>  
    </tbody>  
</table>  
</body>  
</html>

<track>

<audio> ve <video> öğeleri için metin parçalarını tanımlamak için kullanılır.

<h2>Track etiketi örneği</h2>
  <video controls="controls">
      <source src="flower.mp4" type="video/mp4">
     <track src="flower.vtt" kind="subtitles" srclang="tr" label="Türkçe">
     Üzgünüz! Tarayıcınız track desteklemiyor
  </video>

<tt>

Teletype metnini tanımlamak için kullanılır. (HTML5’te desteklenmez)

<h2>tt etiketi örneği</h2>
<p>Bu, varsayılan yazı tipine sahip paragraftır</p>
<p><tt>Bu teletype paragrafıdır</tt></p>

<u>

Metni altı çizili olarak oluşturmak için kullanılır.

<h2>u etiketi örneği</h2>
<p>Bu etiket, bir belgedeki <u>yazım hatalarını </u> vurgulamak için yararlı olabilir.</p>

<ul>

Öğelerin sırasız listesini tanımlar.

<ol>  
 <li>1. liste öğesi</li>  
 <li>2. liste öğesi</li>  
 <li>3. liste öğesi</li>  
 <li>4. liste öğesi</li>  
</ol>

<var>

Matematiksel veya programlama bağlamında kullanılan değişken adını tanımlar.

<h2>var etiketi örneği</h2>
<p>Aşağıda dağıtım yasasının denklemi verilmiştir</p>
<p><var>a</var>(<var>b</var>+<var>c</var>)=<var>ab</var>+<var>ac</var></p>

<video>

Bir video içeriğini bir HTML belgesine gömmek için kullanılır

<h2>Video etiketi örneği</h2>
  <video controls="controls">
      <source src="flower.mp4" type="video/mp4">
     Üzgünüz! Tarayıcınız video etiketini desteklemiyor
  </video>

<wbr>

Metin içinde alt satıra atlamanın mümkün olduğu bir konumu tanımlar. Uzun kelimelerde yanlış yerde alt satıra geçmesinin önüne geçilir.

<html>
<body>
<p> Bu en büyük kelime için bir dünya rekoru,
45 harfli bir kelime büyük bir sözlükte görünüyor.  
<i>pneumonoultramicroscopicsilicovolcanoconiosis</i>  
</p>
<p>İşte <code>wbr</code> etiketi kullanılmadan nasıl göründüğü…<br/>  
<i> pneumonoultramicroscopicsilicovolcanoconiosis </i></p>  
<p> wbr etiketini kullandıktan sonra böyle görünecek. </p>  
<i> pneu<wbr>monoultra<wbr>microsc<wbr>opicsili<wbr>covolcan<wbr>iosis</i>  
</body>
</html>

Hemen hemen bütün HTML etiketleri açıklamaları ve kullanımı hakkında bilgiler verdim ve her birinin kullanım örneğini altına ekledim gerektiğinde bir sözlük olarak kullanabilir veya bilmediğiniz/hatırlamadığınız kodun kullanımını öğrenebilirsiniz. Burada olmayan bir kod var ise yorumlarda belirtebilirsiniz. Anlaşılmayan, hatalı olan veya sizin hata aldığınız bir kod için yorumlarda belirtirseniz yanıtlayabilirim. Paylaşım işinize yaradıysa faydalı olarak işaretleyebilirsiniz.

Bu gönderiyi faydalı buldun mu?

Yorumlar 0

Bir yanıt yazın Cevabı iptal et

Yorum yapabilmek için giriş yapmalısınız.