Diğer satır içi metin öğeleri

HTML öğelerinin çoğunu ele aldık ancak kesinlikle hepsini değil. Bahsetmediğimiz bir alan da satır içi metin öğeleridir. Yaygın inanışın aksine, HTML başlangıçta kedi videoları için değil, doküman paylaşımı için tasarlanmıştı. Dokümanlar için metin anlamları sağlayan birçok öğe vardır.

Bağlantıları ve <a> öğesini kapsayan bir modül bulunmaktadır. Bu öğelerin geri kalanı burada kısaca ele alınmıştır.

Kod örnekleri ve teknik yazılar

Kod örneklerini belgelendirirken <code> öğesini kullanın. Metin içeriği varsayılan olarak tek aralıklı yazı tipinde gösterilir. Birden fazla kod satırı eklerken <code> karakterini, önceden biçimlendirilmiş metni temsil eden <pre> öğesinin içine yerleştirin.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

<data> öğesi, belirli bir içeriği makine tarafından okunabilen bir çeviriyle bağlar. Öğenin value özelliği, öğenin içeriğinin makine tarafından okunabilir çevirisini sağlar. <data> içeriği zaman veya tarihle ilgiliyse bunun yerine belirli bir zaman aralığını temsil eden <time> öğesi kullanılmalıdır.

<time> öğesi, makine tarafından okunabilen biçimde kullanıcı dostu zaman ve tarihler sağlamak için datetime özelliğini içerebilir. datetime özelliği, makine tarafından okunabilir olduğundan takvimler ve arama motorları gibi uygulamalar için yararlı bilgiler sağlar.

Bir programdan örnek çıktı sağlarken metni eklemek için <samp> öğesini kullanın. Tarayıcı genellikle bu örneği veya alıntılanan çıktıyı sabit aralıklı yazı tipiyle de oluşturur.

Klavye etkileşimiyle ilgili talimatlar verilirken <kbd> öğesi kullanılabilir. Bu, klavye, ses girişi veya başka bir metin giriş cihazından gelen metin biçimindeki kullanıcı girişini temsil eder.

<var> öğesi matematik ifadeleri veya programlama değişkenleri için kullanılabilir. Çoğu tarayıcı, metin içeriğini çevreleyen yazı tipinin italik sürümünde gösterir. Çok fazla matematiksel ifade yazıyorsanız matematiksel notasyonu tanımlamak için XML tabanlı Matematiksel Biçimlendirme Dili olan MathML'yi kullanmayı düşünebilirsiniz.

Pisagor teoremindeki iki üssü, <sup> üst simge öğesiyle gösterilir. Yalnızca tipografik nedenlerle alt simge olarak gösterilmesi gereken satır içi metni belirten benzer bir <sub> alt simge öğesi vardır. Üst simgeler ve alt simgeler, normal yazı satırından daha küçük olan ve sırasıyla satırın biraz üstüne veya altına yerleştirilen sayılar, şekiller, semboller ya da diğer ek açıklamalardır.

Kaldırılan veya "silinen" metinleri belirtmek için <del> simgesini kullanın. İsteğe bağlı olarak, değişikliği açıklayan kaynağa ayarlanmış cite özelliğini ve makine tarafından okunabilir tarih ve saat biçiminde tarih veya tarih ve saat içeren datetime özelliğini ekleyin. Üstü çizili öğesi <s>, içeriğin artık alakalı olmadığını belirtmek için kullanılabilir ancak içerik belgeden kaldırılmaz.

<ins>, <del> öğesinin tersidir. Bu öğe, eklenen veya "yerleştirilen" metni belirtmek için kullanılır. İsteğe bağlı olarak cite veya datetime özellikleri de eklenebilir.

Tanımlar ve dil desteği

Kısaltma veya akronim eklerken terimin tam sürümünü ilk kullanımda her zaman düz metin olarak belirtin. Ardından, açılış ve kapanış <abbr> etiketleri arasındaki terimin kısaltılmış gösterimini tanıtın. <abbr> yalnızca kısaltma veya akronim tanımlanırken ilk kez kullanıldığında gereklidir. title özelliği gerekli veya faydalı değil.

Bu kuralın istisnası, terimin okuyucu tarafından iyi bilindiği durumlardır. Örneğin, bu serideki HTML ve CSS terimleri.

Kısaltma veya akronim olmayan bir terimi tanımlarken, tanımlanan terimi çevreleyen içerikte tanımlamak için tanım <dfn> öğesini kullanın.

Tanımlanan terim, çevreleyen metinle aynı dilde değilse dili tanımlamak için lang özelliğini eklediğinizden emin olun.

HTML, farklı yönlerdeki diller yazılırken olası çift yönlü metinleri çevreleyen metinden ayrı olarak ele almak için <bdi> öğesini sağlar. Bu uluslararasılaştırma öğesi, özellikle yönü bilinmeyen içerik sayfaya dinamik olarak eklendiğinde kullanışlıdır. <bdo> öğesi, metnin mevcut yönünü geçersiz kılarak metni farklı bir yönde oluşturur. W3C, iki yönlü algoritmalara giriş sunar.

Bazı karakter kümelerinde, telaffuz hakkında bilgi vermek için karakterlerin üstüne veya sağına yerleştirilmiş küçük notlar bulunur. <ruby> öğesi, Korece, Çince ve Japonca gibi yazılı dillerin okunmasını kolaylaştıran bu ek açıklamaları içeren kapsayıcıdır. Ruby, İbranice, Arapça ve Vietnamca için de kullanılabilir.

Ruby parantezi (<rp>), <ruby> karakterinin gösterilmesini desteklemeyen tarayıcılarda açılış ve kapanış parantezlerini içerecek şekilde spesifikasyona dahil edildi. Tarayıcılar <ruby> özelliğini desteklediğinde (tüm kalıcı tarayıcılar destekler) <rp> öğelerinin içerikleri gösterilmez. Ruby metin öğesi (<rt>) gerçek notları içerir. Bunların her ikisi de <ruby> içinde yer alır.

Tarayıcınız <ruby> simgesini destekliyorsa parantezlerin görünmeyeceğini unutmayın.

Metni vurgulama

Metni vurgulamanın anlamsal nedenine bağlı olarak (CSS'nin işi olan sunum nedenleriyle değil) metni vurgulamak için kullanılabilecek çeşitli öğeler vardır.

• Bir içerik aralığını vurgulamak veya öne çıkarmak için <em> öğesini kullanın. <em> öğesi iç içe yerleştirilebilir. İç içe yerleştirme düzeyleri, vurgunun derecesini gösterir. Bu öğenin anlamsal anlamı vardır ve vurgu sağlamak için ekran okuyucular, Alexa ve Siri gibi işitsel kullanıcı aracılarını bilgilendirmek amacıyla kullanılabilir.
• Bir şekilde alakalı olan metinleri tanımlamak veya vurgulamak için <mark> öğesini kullanın. Örneğin, arama sonuçlarında arama terimlerinin geçtiği yerleri vurgulayabilirsiniz (veya "işaretleyebilirsiniz"). Bu sayede, vurgu veya önem eklenmeden işaretli içeriklerin hızlıca tanımlanması sağlanır.
• <strong> öğesi, metnin çok önemli olduğunu belirtir. Tarayıcılar genellikle içeriği daha kalın bir yazı tipi ağırlığıyla oluşturur.
• <cite> öğesi, metinle ilgili temel bilgiler bölümünde ele alınmıştır. Kitapların, makalelerin veya diğer yaratıcı çalışmaların başlıklarını ya da bunların kısaltılmış referans veya alıntı meta verilerini (ör. bir kitabın ISBN numarası) işaretlemek için kullanılır.

Geçici olarak desteği sonlandırılan ancak HTML'ye tekrar eklenen üç öğe vardır. Anlamsal değerleri çok az olduğundan veya hiç olmadığından ve stil için her zaman HTML öğeleri yerine CSS kullanılması gerektiğinden, bu öğeler mümkün olduğunca az kullanılmalıdır.

<i>

<i> öğeleri; teknik terimler, yabancı kelimeler (dili tanımlayan lang özelliğiyle birlikte), düşünceler veya gemi adları için kullanılabilir. Bu öğe, deyimsel metin, teknik terimler ve sınıflandırma adları gibi belirli bir nedenle satır içi içeriği çevresindeki metinden ayırt etmek için kullanılır.

Bu öğe, metni italik yapmak için kullanılmamalıdır.

MLW, Toasty McToastface'in atölye incelemesinin alt kısmındaki garip metin için <span> öğesini kullanıyor. <span> öğesi, anlamsal yapıya sahip olmayan ve hiçbir şeyi temsil etmeyen genel bir satır içi kapsayıcı sağlar. Bu, <i> için de uygun bir kullanım olurdu.

<i> öğesinin varsayılan stili, öğeyi italik yazı tipinde oluşturmaktır. Bu örnekte, kullanılan karakterler italik olarak kullanılamadığından font-style: normal olarak ayarladık.

<u>

<u> öğesi, metin dışı ek açıklaması olan içerikler içindir. Örneğin, bilerek yanlış yazılmış kelimelere açıklama eklemek isteyebilirsiniz. İçerik varsayılan olarak altı çizili gösterilir ancak bu durum, kelime işlemci dilbilgisi hata göstergelerini taklit etmek için kırmızı dalgalı bir alt çizgi eklemek gibi CSS ile kontrol edilebilir.

<p>I always spell <u>licence</u> wrong</p>

<b>

<b> öğesi, aksi takdirde önemli olmayan metinlere dikkat çekmek için kullanılabilir. Bu öğe herhangi bir özel anlamsal bilgi iletmez ve yalnızca bu bölümdeki diğer öğelerden hiçbiri amaca uygun olmadığında kullanılmalıdır. Geçerli bir kullanım alanı bulamadığım için örnek verilmemiştir. Bu öğe, "son çare" olarak kullanılır.

Boşluk

Şiir veya açık adres yazarken olduğu gibi satır sonu istediğinizde satır başı eklemek için kendi kendini kapatan satır sonu öğesi, <br> kullanılır.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Bir ayraç veya tematik ara sağlamak için (ör. bir kitaptaki bölümler arasında ya da 5.000 kelimelik monolog ile kullanıcılarınızın aradığı tarif arasında) <hr> öğesini ekleyin. HR, "horizontal rule" (yatay çizgi) anlamına gelir. Tarayıcılar genellikle yatay bir çizgi oluştururken bu öğenin semantik anlamı vardır. Varsayılan rol separator'dir.

HTML'de kelimelerin bölünmesine olanak tanıyan bir öğe de bulunur. Kendi kendini kapatan <wbr> öğesi, tarayıcıya bir kelimenin kapsayıcısından taşma olasılığı varsa tarayıcının satırı isteğe bağlı olarak bölebileceği bir yer olduğunu bildirir. Bu karakter, uzun URL'lerde kelimeler arasında ayraç oluşturmak için yaygın olarak kullanılır. Kısa çizgi eklemez.

Örneğin, Hal biyografisinde her baytın boşlukla ayrıldığı, bayt koduyla yazılmış bir metin var. Bayt kodunda boşluk yok. Satırın kaydırılması gerektiğinde uzun bir bayt kodu dizesinin yalnızca baytlar arasında bölünmesini sağlamak için her bölme fırsatında <wbr> öğesini ekliyoruz:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br>, <hr> ve <wbr> öğeleri, boş öğelerdir. Bu nedenle, iç içe yerleştirilmiş öğeler veya metin gibi alt düğümleri olamazlar. Bunların hiçbirinde içeriğin depolanabileceği bir "iç kısım" olmadığından bitiş etiketleri yoktur.

Bilgilerinizi sınayın

Satır içi metinlerle ilgili bilginizi test edin.