Yeni Başlayanlar İçin Sık Kullanılan 19 HTML Etiketi

Yayınlanan: 2022-12-08

Front-end geliştirici olmak istiyorsanız alacağınız en yaygın tavsiyelerden biri HTML öğrenmek olacaktır. HTML olarak kısaltılan Köprü Metni Biçimlendirme Dili, çoğu web sayfasının temelidir.

HTML, etiketler, nitelikler ve öğeler gibi farklı şeylerden oluşur. Odağımız HTML etiketleri olacak. Tarayıcılara içeriği başlıklara, başlıklara, paragraflara, resimlere ve çok daha fazlasına göre nasıl yapılandıracaklarını söylemek için HTML etiketleri kullanıyoruz. Bu nedenle HTML etiketleri, tarayıcının içeriği nasıl görüntüleyeceğini veya biçimlendireceğini tanımlayan anahtar kelimeler gibidir.

Sunucular HTML etiketlerini yukarıdan aşağıya okur. Bir web sayfasının sahip olması gereken HTML etiketlerinin sayısında herhangi bir kısıtlama yoktur.

Tüm HTML etiketleri <> içine alınır
Her HTML etiketi farklı bir işlev gerçekleştirir
Çoğu HTML etiketinde açılış <tag> ve kapanış </tag> vardır.

HTML etiketleri ve HTML öğeleri ve HTML nitelikleri

Çoğu kişi HTML etiketleri ve öğeleri terimlerini birbirinin yerine kullanır. Ama onlar aynı mı? Teknik olarak, HTML öğeleri ve HTML etiketleri farklıdır.

HTML etiketleri, HTML öğelerini tanımlar. Bunu başarmak için içerik, birlikte çalıştığımız etiketin içeriğiyle eşleşen bir açılış ve kapanış etiketi adı kullanılarak sarılır.

Bu, bir HTML öğesi örneğidir:

 <p> This is a paragraph </p>

<p> , bir HTML etiketi örneğidir

HTML nitelikleri, bir belgedeki HTML öğeleri hakkında ek bilgi verir. Nitelikler HTML öğelerinde bulunur.

Bu, bir HTML özniteliğine bir örnektir

 <button id=" SubmitOrder" class="btn">Order</button>

Herkesin bilmesi gereken HTML Etiketleri

Bir biçimlendirme dili olarak HTML, Tim Berners-Lee'nin onu 1993'te tanıtmasından bu yana yıllar içinde gelişti. İlk HTML sürümü 18 etikete sahipti. Her HTML sürümünde yeni etiketler eklenir; en son yükseltme 2014'te HTML5 idi.

HTML ve HTML5'in yakından karşılaştırılması, HTML5'in içeriği açıkça tanımlayan <article>, <header> ve <footer> gibi semantik etiketlere sahip olduğunu gösterir. Artık 100'den fazla HTML etiketimiz var. Aşağıdakiler, bilmeniz gereken en popüler etiketlerden bazılarıdır:

<!BELGE TÜRÜ>

DOCTYPE teknik olarak bir etiket değil, tarayıcıya ne tür bir dosyanın yükleneceğini bildiren bir bildirimdir. Bu etiket, tarayıcıya yüklenecek HTML türünü söyler.

HTML5'te dosyanızı şu şekilde bildirebilirsiniz:

 <!DOCTYPE html>

Veya

 <!doctype html>

Not: Bildirimin bir kapanış etiketi yoktur ve büyük/küçük harfe duyarlı değildir.

<html> </html>

<html> ….. </html> etiketi DOCTYPE etiketinden sonra gelir. Bu etiket, belgeyi bir web sayfası olarak tanımlar; diğer tüm öğeler iç içe geçmiş olacaktır. HTML etiketi, bir HTML belgesinin başlangıcını ve sonunu belirtir.

Bir <html> etiketi şu şekilde temsil edilir;

 <html>Content</html>

<head></head>

Bir HTML belgesinin başlık bölümü <head> etiketi ile temsil edilir. Bu etiket <html> etiketinin içine alınır ve web sayfası hakkında genel bilgi verir.

<head> etiketi, sayfanın başlığı ve yazarı gibi web sayfasının özelliklerini veren diğer etiketleri içerir. Bu etiketin içeriği web sayfasında görüntülenmiyor

Bu, bir <head> etiketinin söz dizimidir;

 <head> …….. </head>

<title></title>

<title> etiketi web sayfasının başlığını bildirir. Bu etiket <head> etiketinin içine alınır. <title> etiketi, başlık çubuğunda veya tarayıcı penceresindeki sekmede görünür, ancak gerçek web sayfasında görünmez.

<title> etiketinin sözdizimi;

 <title>HTML Tags for Beginners</title>

<head> etiketinin içine girildiğinde ise;

 <head> <title>HTML Tags for Beginners</title> </head>

<body> </body>

<body> etiketi, bir web sayfasındaki tüm görünür içeriği görüntüler. Resimler, bağlantılar, düz metinler, videolar ve daha fazlası <body> ve </body> etiketlerinin içinde bulunabilir.

Gövde içinde bulacağınız diğer etiketlerden bazıları arasında paragraf için <p> etiketi, resimler için <a> etiketi, kalın metin için <strong> etiketi ve sıralı bir liste için <ol> etiketi sayılabilir.

<body> etiketinin sözdizimi;

 <body> Content </body>

<h1> - <h6> Etiketleri

Bir HTML belgesinde en fazla 6 başlık etiketi olabilir. Etiketlerin her biri 1'den 6'ya kadar bir sayı ile <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> olarak temsil edilir.

H1 en büyük başlık etiketi, H6 ise en küçük başlık etiketidir.

Bir HTML belgesinde başlık etiketleri şu şekilde temsil edilebilir:

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

<h1> - <h6> etiketleri, <body> etiketi içine alınır.

Örneğin, bir ,<H1> etiketi;

 <body> <h1> This is heading 1 >/h1> </body>

<p> </p>

İçeriği bir paragraf olarak yapılandırmak istediğinizde <p> </p> veya sadece paragraf etiketi kullanılır. Kod düzenleyicinizdeki bir HTML belgesinde 'enter' düğmesine basmak yeni bir paragraf oluşturmaz.

Birden fazla paragraf istiyorsanız, belgenizde birkaç <p> </p> etiketi kullanmanız gerekir. Paragraf etiketleri <body> etiketi içine alınmalıdır.

Bir paragraf etiketi için sözdizimi;

 <p> ….some content here….</p>

Eğer dört paragrafınız olsun istiyorsanız, kodunuz şu şekilde yapılandırılacaktır;

 <body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>

<b> </b>

<b> </b> veya basitçe kalın etiketi, açılış <b> ile kapanış </b> arasındaki herhangi bir içeriği kalın olarak biçimlendirir.

Kalın etiketi, H1 gibi bir başlık arasında veya hatta bir paragraf etiketi içinde olabilir.

Bunlar kalın etiket örnekleridir;

 <b> Bold Tag </b>

'Kalın Etiket' ibaresi kalın görünür.

 <h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>

Beşinci baskı kalın olacaktır.

<i> </i>

<i> ile gösterilen italik etiket, etiketlerin içindeki metni italik yapar.

Örneğin, eğer sahipsek

 <i> These are italics </i>

" Bunlar italiktir " ifadesi italik olarak görünecektir.

<u> </u>

Alt çizgi etiketi veya <u>, bir HTML belgesinde belirli bir metin parçasının altını çizmek istediğinizde kullanılır.

Örneğin;

 <u> underline these words </u>

Etiketler arasındaki ifadenin altı çizilir.

<merkez> </merkez>

Merkez etiketi, <center>, içeriği bir HTML belgesinde ortalamak için kullanılır.

Örneğin <h2> Centering Content in HTML </h2> şeklinde yazılmış bir h2 tag'imiz varsa şu şekilde ortalayabiliriz;

 <center> <h2> Centering Content in HTML </h2> </center>

<span></span>

Yayılma etiketi <span>, varsayılan bir stille gelmeyen genel bir satır içi kapsayıcıdır. Stil vermek istediğiniz metinleri gruplandırmak için yayılma etiketini kullanabilirsiniz.

Etiketi, başlıklar ve paragraflar gibi diğer etiketlerin içine yayabilirsiniz;

 <h2> Learn HTML <span> from experts </span> and be ready for the market </h2>

 <p> Learn HTML <span> from experts </span> and be ready for the market </p>

<div></div>

Div olarak kısaltılan bir bölme etiketi, bir HTML belgesinde farklı etiketleri gruplandırmanıza izin veren bir etikettir.

CSS kullanarak harici stil eklemek için bir div etiketine bir 'sınıf' verilebilir.

Bir h1, h2 ve bir paragraf etiketini kapsayan bir div bu şekilde temsil edilecektir.

 <div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>

<em></em>

Vurgu veya <em> etiketi, bir HTML belgesindeki belirli kelimeleri vurgulamak için kullanılır.

<em> etiketleri arasındaki içerik eğik veya italik görünür.

Vurgulanan içeriğin bir paragraf içinde görünebileceği bir kod düzenleyicide şu şekilde görünecektir;

 <p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>

<sup></sup>

<sup> veya superscript etiketi, ekteki metnin geri kalanının üzerinde olmasını sağlar. Mükemmel bir örnek, bir X sayısının karesini almak ve size X ² vermek için onu matematiksel olarak temsil etmek istediğiniz zamandır.

Bir paragraf etiketi içindeki <sup> için sözdizimi şöyle olacaktır;

 <H1> Harveys <sup>TM </sup> Company Limited </H1>

<sub></sub>

Alt simge veya <alt> etiketi, üst simge etiketinin tersidir. <sub> etiketinin içindeki içerik, normal metin satırının altında görünecektir. Mükemmel bir örnek, suyun kimyasal formülünü H ₂ 0 olarak yazmaktır.

Alt simge etiketi için sözdizimi şöyle olacaktır;

 Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

<br>, mola anlamına gelen kendi kendine kapanan bir etikettir. <br> sonrasındaki tüm içerik yeni bir satırda başlayacak.

Bir paragrafta <br> için sözdizimi şöyle olacaktır;

 <p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>

<ol></ol> ve <li> </li>

Sıralı liste etiketi veya <ol>, <li> gibi başka bir etiketle birlikte kullanılmalıdır.

İkisi bir kod düzenleyicide şu şekilde görünebilir;

 <ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>

Tarayıcıda işlendiğinde, içerikler numaralandırılmış olarak görünecektir.

<img kaynağı=””/>

Görsel çekicilik için bir resim veya hatta bir logo eklemek isteyebilirsiniz. Kendi kendine kapanan resim etiketi <img src=””/> böyle bir durumda işe yarar.

Resim etiketi için sözdizimi şöyle olacaktır;

 <img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

Tırnak işaretleri içindeki içerik, kaynak URL'yi temsil eder.

Sarma

100'den fazla HTML etiketi vardır, ancak yukarıdakiler yeni başlayan biri olarak bilmeniz gerekenlerdir. HTML, çoğu kod düzenleyicide desteklenir ve bu nedenle, öğrenmeye başladığınızda asla yanlış yapmayacağınızdan emin olabilirsiniz.