Metinle ilgili etiketler

Bu makale, metinle ilgili etiketler hakkında bilgi verir.

Açıklama, anlamsal ve anlamsal olmayan etiketler olarak ikiye ayrılmıştır.

YouTube Video

Önizleme için CSS oluşturma

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Temel metinle ilgili etiketler

<div> etiketi

1<div>This is a division of content.</div>

• <div> etiketi, HTML içinde bölümler oluşturmak için kullanılan bir blok seviyesinde öğedir.

• <div> etiketi anlamsız bir etikettir.

  Anlamsal HTML'ye odaklanırken, (örneğin <section>, <article> gibi) anlamlı etiketler kullanılabilir. Bu, arama motorlarının ve ekran okuyucularının sayfanın içeriğini daha iyi anlamasına yardımcı olur.

• CSS ve JavaScript ile birleştirerek, sayfanın görünümünü ve davranışını kontrol edebilirsiniz.

  <div> etiketi, bir sayfadaki içeriği blok düzeyinde bir öğe olarak gruplamak için kullanılır. Sayfa düzenini ayarlamak, stil vermek ve elementleri manipüle etmek için ağırlıklı olarak CSS ve JavaScript ile birlikte kullanılır.

<p> etiketi

1<p>This is a paragraph of text.</p>

• <p> etiketi, HTML'de bir paragraf tanımlamak için kullanılan bir elementtir. <p>, bir paragrafı temsil eder ve genellikle metni gruplamak ve göstermek için kullanılır. Metin bölümlerini görsel olarak ayırarak içeriği daha okunabilir hale getirir.
• Başka bir <p> etiketi veya <div> etiketi gibi diğer blok düzeyindeki etiketleri <p> etiketinin içine yerleştiremezsiniz. Bu, HTML standardı tarafından yasaklanmıştır. Bunu yaparsanız, tarayıcı otomatik olarak etiketi kapatacak ve doğru şekilde görüntülenmeyecektir.

<a> etiketi

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a> etiketi bağlantılar oluşturmak için kullanılır.

  <a> etiketi, diğer sayfalara, harici sitelere veya dosyalara bağlantılar oluşturmak için kullanılır. href özelliği, bağlantının hedefini belirtmek için kullanılır.

• Metin veya resim bağlantıları için kullanılabilir ve target="_blank" kullanılarak bağlantı yeni bir sekmede açılır.

• target özelliği, bağlantı verilen hedefin nasıl görüntüleneceğini belirtmek için kullanılır.

  • _self (varsayılan): Bağlantıyı mevcut pencere veya sekmede açar.
  • _blank: Bağlantıyı yeni bir pencere veya sekmede açar.
  • _parent: Bağlantıyı üst çerçevede açar.
  • _top: Bağlantıyı herhangi bir çerçeveyi göz ardı ederek tam pencerede açar.

• title özelliği, bir bağlantıda araç ipucu göstermek için kullanılır. Bir kullanıcı bağlantının üzerine geldiğinde, belirtilen başlık gösterilir.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a> etiketi ayrıca aynı sayfa içinde belirli konumlara atlamak için kullanılır. Bunu başarmak için, hedef elemente bir id özelliği atar ve bu id'yi bağlantının href özelliğinde kullanırsınız.

<span> etiketi

1Here is some <span style="color: red;">highlighted text

• <span> etiketi, satır içi bir öğedir.

  <span> etiketi bir satır içi (inline) öğesidir, bu yüzden metin, bağlantılar, resimler veya diğer satır içi öğeler arasında kullanıldığında satırı kırmaz. Sayfanın akışına doğal bir şekilde uyum sağlar.

• Belirli stilleri kısmen uygulayabilirsiniz.

  Belgenin yalnızca bir bölümüne stil uygulamak istediğinizde, belirli bir alana bir CSS sınıfı veya kimliği atamak ve stiller uygulamak için <span> etiketini kullanabilirsiniz.

• <span> etiketi anlamsız bir öğedir.

  <span> etiketinin belirli bir anlamı veya yapısal rolü olmadığı için yalnızca stil veya betik amaçlarıyla kullanılır. Anlamsal vurgulama gerektiğinde, daha sonra tanıtılacak olan <strong> veya <em> gibi anlamsal etiketleri kullanmak daha uygundur.

<br> etiketi

1Here is some text with a <br> line break.

• <br> etiketi satır içi bir öğedir.

  <br> etiketi bir satır içi (inline) öğe olduğundan, tüm bloğu kaplamaz ve yerleştirildiği yerde metinde bir satır sonu oluşturur. <p> etiketi paragrafları ayırmak için yukarı ve aşağıya kenar boşluğu eklerken, <br> etiketi herhangi bir kenar boşluğu eklemeden bir satır sonu oluşturur.

• Bu, kendi kendini kapatan bir etikettir, bu yüzden bir kapanış etiketi (</br>) gerekmez.

• Aşırı kullanımdan kaçınılmalı, paragrafları ayırmak veya yerleşim düzenlemesi yapmak için <p> etiketleri veya CSS kullanılmalıdır.

  Metni paragraflara ayırırken <p> etiketini kullanmak daha uygundur. Yerleşim düzenlemeleri için CSS kullanmak da tavsiye edilir. Örneğin, CSS'de white-space özelliğini kullanmak, metinde görünen satır sonları ve boşlukları olduğu gibi gösterebilir.

<hr> etiketi

1This is some text.<hr>This is another section of text.

• <hr> etiketi bir blok seviyesi öğesidir.

  <hr> etiketi, içeriğin bölümlerini görsel olarak ayırmak için yatay bir çizgi eklemek amacıyla kullanılır. Bağlamsal olarak anlamsal bir kesintiyi ifade etmek için de kullanılabilir.

• Kendi kendine kapanan bir etikettir, dolayısıyla bir kapatma etiketi (</hr>) gerekmez.

• Rengini, uzunluğunu ve kalınlığını CSS kullanarak özelleştirebilirsiniz.

Anlamsal metinle ilgili etiketler

<h1> etiketinden <h6> etiketine kadar

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• <h1>'den <h6>'ya kadar olan etiketler, HTML'de kullanılan başlık etiketleridir.

  <h1> etiketi en önemli başlığı temsil eder ve genellikle sayfanın ana başlığı olarak kullanılır. Her HTML belgesinde yalnızca bir <h1> etiketi kullanmak yaygındır.

  <h2> etiketi, <h1> den sonraki en önemli başlık olup, sayfa içindeki bölüm veya bölüm başlıkları için kullanılır.

  <h3> etiketi, <h2> altındaki alt başlıkları veya daha küçük bölümleri temsil eder.

  <h4>, <h5> ve <h6> etiketleri, daha ayrıntılı öğeler veya bölüm başlıkları için kullanılan daha alt seviyedeki başlıkları temsil eder.

• Başlık etiketleri metnin önemini belirtir ve bir sayfanın mantıksal yapısını oluşturmaya yardımcı olur. Arama motorları da sayfanın içeriğini anlamak için başlık etiketlerini kullanır.

<strong> etiketi

1<strong>Important text</strong> to emphasize significance.

• <strong> etiketi, metnin önemini veya vurgusunu belirtmek için kullanılan bir HTML etiketidir ve genellikle kalın olarak gösterilir.

• <strong> etiketi, anlamsal bir etiket olup, esas amacı anlam katmaktır.

  Metnin bağlamsal olarak önemli olduğunu gösterebilir. Örneğin, metnin arama motorları için önemini gösterebilir, bu da onu SEO için faydalı kılar. Ayrıca, ekran okuyucular kullanan kullanıcılara metnin önemini iletir. Öte yandan, daha sonra tanıtılacak olan <b> etiketi, sadece metni kalın yapmak için kullanılan bir etikettir ve anlamsal vurgu sağlamaz.

<em> etiketi

1<em>Emphasized text</em> for italics and emphasis.

• <em> etiketi, metinde önem veya vurgu belirtmek için kullanılan bir HTML etiketidir ve genellikle italik olarak gösterilir.

• <em> etiketi, anlamsal bir etiket olup, esas amacı anlam sağlamaktır.

  <strong> etiketi gibi, metnin bağlamsal olarak önemli olduğunu gösterebilir. <strong> etiketi genellikle kalın olarak gösterilirken, <em> etiketi genellikle italik olarak gösterilir. Her ikisi de ekran okuyucular ve arama motorları tarafından anlamsal vurgu için tanınır, ancak <strong> daha güçlü bir önem belirtirken, <em> duygusal vurgu iletir. Ayrıca daha sonra tanıtılacak olan <i> etiketi, sadece metni italik yapar ve anlamsal vurgu sağlamaz.

<mark> etiketi

1<mark>Highlighted text</mark> for attention.

• <mark> etiketi, belirli bir metnin bağlamsal olarak önemli olduğunu belirtmek için kullanılır. Arama sonuçlarını veya önemli noktaları vurgulamak için faydalıdır.
• Varsayılan olarak, <mark> etiketi içinde yer alan metin, sarı bir arka plana sahip olarak gösterilir ve görsel olarak önemini vurgular.

<del> etiketi

1<del>Deleted text</del> shows removed content.

• <del> etiketi, metnin silindiğini veya değiştirildiğini belirtmek için kullanılır. Bu etiket, metne yapılan değişikliklerin veya revizyonların geçmişini göstermek için yararlıdır.

• <del> etiketiyle çevrelenmiş metin genellikle üstü çizili olarak gösterilir. Bu, silinen içeriği görsel olarak belirtir.

  <del> etiketiyle çevrelenmiş metin, ekran okuyucular tarafından da silinmiş olarak tanınır. Bu, görsel olarak belirgin olmayan içeriğin yine de anlaşılmasına olanak tanır.

<ins> etiketi

1<ins>Inserted text</ins> shows added content.

• <ins> etiketi, bir belgede yeni eklenen veya değiştirilmiş metni belirtmek için kullanılır. Bu etiket, metin eklemelerinin veya revizyonlarının geçmişini göstermek için yararlıdır.

• Tarayıcılarda, <ins> etiketiyle çevrelenmiş metin genellikle altı çizili olarak görüntülenir. Bu, eklenen içeriği görsel olarak belirtir.

  <ins> etiketiyle çevrelenmiş metin, ekran okuyucular tarafından da yeni eklenmiş olarak algılanır. Bu, görsel olarak belirgin olmayan içeriğin yine de anlaşılmasına olanak tanır.

<abbr> etiketi

1<abbr title="World Health Organization">WHO</abbr>

• <abbr> etiketi, kısaltmaları veya akronimleri belirtmek için kullanılan bir satır içi elementtir. Bu etiketin kullanılması kısaltmaların tam anlamını sağlar ve SEO ile erişilebilirliğin artırılmasına katkıda bulunur. Özellikle kısaltmaya aşina olmayan okuyuculara ve ekran okuyucu kullanıcılarına içeriği daha iyi anlamalarında yardımcı olur.

Metin süsleme ile ilgili etiketler

<b> etiketi

1<b>Bold text</b> without semantic emphasis.

• <b> etiketi, metni kalınlaştırmak için kullanılan bir satır içi elementtir. Tanıtacağımız diğer etiketler gibi, görsel vurgu için kullanılır ancak anlamsal vurgu için kullanılmaz.

<i> etiketi

1<i>Italic text</i> for style.

• <i> etiketi, metni italik yapmak için kullanılan bir satır içi elementtir.

<u> etiketi

1<u>Underlined text</u> for decoration.

• <u> etiketi, metni altını çizmek için kullanılan bir satır içi elementtir.

<small> etiketi

1<small>This is small text.</small>

• <small> etiketi, metni daha küçük bir boyutta görüntülemek için kullanılan bir satır içi öğesidir. Genellikle ana içeriğe ek olarak ikincil olan tamamlayıcı bilgiler veya açıklamalar için kullanılır.

<s> etiketi

1<s>Strikethrough text</s>

• <s> etiketi, metin üzerine üstü çizili bir çizgi çekmek için kullanılan bir satır içi elementtir.

<sub> etiketi

1H<sub>2</sub>O

• <sub> etiketi, alt simge metni görüntülemek için kullanılan bir satır içi öğesidir.

<sup> etiketi

1E = mc<sup>2</sup>

• <sup> etiketi, üst simge metni görüntülemek için kullanılan bir satır içi öğesidir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video