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ı. Belgeler için metin semantiği sağlayan birçok öğe vardır.

Bağlantıları ve <a> öğesini kapsayan bir modül vardı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, takvimler ve arama motorları gibi uygulamalar için yararlı bilgiler sağlayan, makine tarafından okunabilir bir özelliktir.

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ı tek aralıklı yazı tipiyle de oluşturur.

Klavyeyle etkileşim talimatları verirken <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 etrafındaki 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 kullanabilirsiniz.

Pisagor teoremindeki iki kuvveti, <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, isteğe bağlı olarak cite veya datetime özellikleri de dahil olmak üzere eklenen ya da "yerleştirilen" metni belirtmek için kullanılır.

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. Yalnızca kısaltma veya akronimin tanımlandığı ilk kullanımda <abbr> gerekir. 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 edilmiştir. 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 semantik 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 metni tanımlamak veya vurgulamak için <mark> öğesini kullanın. Örneğin, arama sonuçlarındaki arama terimlerinin oluşumunu vurgulayın (veya "işaretleyin"). 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, metinlerle 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 kullanımdan kaldırılan ancak HTML'ye tekrar eklenen üç öğe vardır. Çok az veya hiç kullanılmamalıdır. Çünkü çok az veya hiç anlamsal değer sunarlar ve HTML öğelerinde stil oluşturmak için her zaman CSS 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, belirli bir nedenle (ör. deyimsel metin, teknik terimler ve sınıflandırma adları) 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 yorumunun alt kısmındaki garip metin için <span> öğesini kullanıyor. <span> öğesi, anlamsız 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 ayarını yaptı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 ayırıcı veya tematik kesinti 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 vardır. 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, uzun URL'lerdeki 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ış metinler var. Bayt kodunda boşluk yok. Uzun bir bayt kodu dizisinin yalnızca satırın kaydırılması gerektiğinde baytlar arasında bölünmesini sağlamak için her bölünme 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.

Anlayıp anlamadığınızı kontrol etme

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