HTML öğelerinin çoğunu ele aldık, ancak kesinlikle hepsini ele almadık. Bahsetmediğimiz alanlardan biri satır içi metin öğeleridir.
Yaygın inanışın aksine, HTML'nin amacı kedi videoları değil, dokümanları paylaşmaktı. Belgelemede metin anlamları
sağlayan pek çok unsur vardır. Bağlantıları ve <a> öğesini kapsayan bir modül bulunmaktadır. Bu öğelerin geri kalanı burada kısaca ele alınacaktır.
Kod örnekleri ve teknik yazım
Kod örneklerini belgelerken <code> öğesini kullanın. Metin içeriği varsayılan olarak tek aralıklı yazı tipinde görüntülenir. Birden fazla kod satırı eklerken <code> öğesini, önceden biçimlendirilmiş metni temsil eden bir <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çerik parçasını makine tarafından okunabilir bir çeviriyle bağlar. Öğenin value özelliği, öğenin içeriğinin makine tarafından okunabilen çevirisini sağlar. <data> içeriği zaman veya tarihle ilgiliyse bunun yerine belirli bir dönemi temsil eden <time> öğesi kullanılmalıdır.
<time> öğesi, kullanıcıların okuyabileceği saat ve tarihleri makine tarafından okunabilir biçimde sağlamak için datetime özelliğini içerebilir.
Makine tarafından okunabilir olan datetime özelliği, takvimler ve arama motorları gibi uygulamalar için faydalı bilgiler sağlar.
Bir programdan örnek çıktı sağlarken metni içine almak için <samp> öğesini kullanın. Tarayıcı genellikle bu örneği veya alıntılanan çıkışı da tek aralıklı yazı tipinde görüntüler.
Klavye etkileşimiyle talimatlar sağlanırken <kbd> öğesi kullanılabilir. Klavyeden, ses girişinden veya diğer metin giriş cihazlarından alınan metinsel kullanıcı girişini temsil eder.
<var> öğesi, matematiksel ifadeler veya programlama değişkenleri için kullanılabilir. Çoğu tarayıcı, metin içeriğini çevredeki yazı tipinin italik versiyonuyla sunar.
Sık sık matematik yazıyorsanız matematiksel gösterimi tanımlamak için XML tabanlı Matematik Biçimlendirme Dili olan MathML'yi kullanmayı düşünün.
Pisagor teoreminde ikinin kuvveti, <sup> üstsimgesini kullandı. Yalnızca tipografik nedenlerden dolayı alt simge olarak görüntülenmesi gereken satır içi metni belirten benzer bir <sub> alt simge öğesi vardır. Üst simgeler ve alt simgeler, normal tür satırından daha küçük olan ve sırasıyla çizginin biraz üstünde veya altında bulunan sayılar, rakamlar, semboller veya diğer ek açıklamalardır.
Kaldırılmış veya "silinmiş" olan bir metni 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çimindeki tarih veya tarih ile saat ile birlikte datetime özelliğini ekleyin. Üstü çizili öğe <s>, içeriğin artık alakalı olmadığını ancak dokümandan gerçekten kaldırılmadığını belirtmek için kullanılabilir.
<ins>, <del> öğesinin tam tersidir. Eklenmiş veya "eklenen" metni belirtmek için kullanılır ve isteğe bağlı olarak cite veya datetime özelliklerini de içerir.
Tanımlar ve dil desteği
Kısaltmalar veya kısaltmalar eklerken, terimin açılış ve kapanış <abbr> etiketleri arasında kısaltılmış gösterimini eklerken ilk kullanımda her zaman terimin tam genişletilmiş halini düz metin olarak sağlayın. Terim, bu serideki "HTML" ve "CSS" gibi kullanıcılar tarafından iyi bilinmediği sürece geçerlidir. Yalnızca bu ilk örnekte, kısaltma tanımlanırken <abbr> gerekir. title özelliği gerekli veya faydalı değil.
Kısaltma olmayan bir terimi tanımlarken, başındaki içeriği tanımlamak için <dfn> tanım öğesini kullanın.
Tanımlanan terim, etrafındaki metinle aynı dilde değilse dili tanımlamak için lang özelliğini eklediğinizden emin olun.
Farklı yönlerde diller yazarken HTML, iki yönlü olabilecek metinleri etrafındaki metinden ayrı tutmak için <bdi> öğesini sağlar. Bu uluslararasılaştırma öğesi, özellikle bilinmeyen yönlü içerik sayfaya dinamik olarak eklendiğinde yararlı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ş yapar.
Bazı karakter kümeleri, telaffuz hakkında bilgi sağlamak için karakterlerin üst kısmına veya sağına yerleştirilen küçük ek açıklamalar içerir. <ruby> öğesi Korece, Çince ve Japonca gibi yazılı dillerin okunmasını kolaylaştıran bu ek açıklamaları eklemek için kullanılacak kapsayıcıdır. Ruby; İbranice, Arapça ve Vietnamca için de kullanılabilir.
<ruby> görüntülenmesini desteklemeyen tarayıcılar için açılış ve kapanış parantezlerini içerecek şekilde yakut parantezi (<rp>) spesifikasyona eklenmiştir. Tarayıcılar, tüm eski tarayıcılar tarafından desteklenen <ruby>'i desteklediğinde, <rp> öğelerinin içeriği görüntülenmez. Ruby metin öğesi (<rt>) gerçek ek açıklamaları içerir. Bunların her ikisi de <ruby> içinde iç içe yerleştirilmiştir.
Tarayıcınız <ruby> özelliğini destekliyorsa parantezin görünmeyeceğini unutmayın.
Metni vurgulama
Metni vurgulamanın anlamsal nedenine göre metni vurgulamak için kullanılabilecek çeşitli öğeler vardır (bu iş CSS’nin işi olduğu sunum amaçlı nedenler yerine).
- Bir içerik kapsamını vurgulamak veya vurgulamak için
<em>öğesini kullanın.<em>öğesi, her iç içe yerleştirme seviyesi daha fazla vurgu anlamına gelecek şekilde iç içe yerleştirilebilir. Bu öğe semantik anlama sahiptir ve vurgu sağlamak için ekran okuyucular, Alexa ve Siri gibi işitsel kullanıcı aracılarını bilgilendirmek amacıyla kullanılabilir. - Arama terimlerinin arama sonuçlarında geçtiği yerleri vurgulamak (veya "işaretlemek") gibi bir şekilde alakalı olan metinleri tanımlamak veya vurgulamak için
<mark>öğesini kullanın. Bu, işaretlenen içeriğin vurgu veya önem eklenmeden hızlı bir şekilde tanımlanabilmesini sağlar. <strong>öğesi metnin çok önemli olduğunu tanımlar. Tarayıcılar genellikle içeriği daha kalın bir yazı tipi ağırlığıyla oluşturur.- Metin ile ilgili temel bilgiler kapsamındaki
<cite>öğesi; kitapların, makalelerin veya diğer yaratıcı çalışmaların başlıklarını ya da kısaltılmış referans veya alıntı meta verilerini (örneğin, bir kitabın ISBN numarası) işaretlemek için kullanılır.
Geçici olarak kullanımdan kaldırılan, ancak HTML'ye yeniden eklenen üç öğe bulunmaktadır. Bunlar çok az semantik değer sağladığından veya hiç semantik değer sağlamadıklarından ve HTML öğelerinin stil özelliklerini ayarlamak için her zaman CSS kullanılmalıdır. Bu yüzden, tutularak kullanılmaları gerekir.
<i>
<i> öğeleri; teknik terimler, yabancı kelimeler (yine, dili tanımlayan lang özelliği ile), düşünceler veya gemi adları için kullanılabilir. Bu öğe, deyimsel metin, teknik terimler ve sınıflandırmalar gibi belirli bir nedenle satır içi içeriği çevreleyen metinden ayırt etmek için kullanılır. Bu öğe, sadece metni italik yapmak için kullanılmamalıdır.
MLW, Toasty McToastface'ın atölye incelemesinin en altındaki tuhaf metin için bir <span> öğesi kullanıyor. <span> öğesi, anlam içermeyen ve hiçbir şeyi temsil etmeyen genel bir satır içi kapsayıcı sağlar. Bu, <i> özelliğinin de uygun bir kullanımı olur.
<i> öğesinin varsayılan stili, öğenin italik yazı tipiyle oluşturulmasıdır. Bu örnekte, kullanılan karakterler italik yazı tipinde olmadığından font-style: normal ayarını yaptık.
<u>
<u> öğesi, metin dışı ek açıklamaya sahip içerikler içindir. Örneğin, bilerek yanlış yazılan kelimelere ek açıklama eklemek isteyebilirsiniz. İçeriğin altı varsayılan olarak çizilir, ancak bu, kelime işlemci dil bilgisi hatası göstergelerini taklit etmek için kırmızı dalgalı alt çizgi eklenmesi gibi CSS ile kontrol edilebilir.
<p>I always spell <u>licence</u> wrong</p>
<b>
<b> öğesi, başka bir önemli olmayan metne dikkat çekmek için kullanılabilir. Bu öğe, özel anlamsal bilgi aktarmaz ve yalnızca bu bölümdeki diğer öğelerin hiçbiri amaca uygun olmadığında kullanılmalıdır. Geçerli bir kullanım alanı bulamadığım için herhangi bir örnek verilmemiş. Bu "son çare" öğesi budur.
Boşluk
Şiir veya fiziksel adres yazarken olduğu gibi satırlı aralar istediğinizde satır başı eklemek için kendiliğinden kapanan satır sonu öğesi <br> kullanılır.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Teğetsel içeriğin bölümleri arasında (ör. bir kitaptaki bölümler arasında veya 5.000 kelimelik monolog ile kullanıcılarınızın gerçekte aradığı tarif arasında) bir ayırıcı veya tematik boşluk eklemek için bir <hr> öğesi ekleyin. İK, "yatay kural" anlamına gelir. Tarayıcılar genellikle yatay bir çizgi oluşturur, ancak bu öğe semantik anlama sahiptir. Varsayılan rol separator'tur.
HTML'de, kelimelerin bozulmasına izin veren bir öğe de bulunur. Otomatik kapanan <wbr> öğesi, tarayıcıya, bir kelimenin kapsayıcısından taşabileceğine dair bir öneri sunar. Bu nokta, tarayıcının isteğe bağlı olarak satırı kırabileceği bir noktadır. Bu, genellikle uzun URL'lerdeki kelimeleri bölmek için kullanılır. Kısa çizgi eklenmez.
Örneğin, Hal biyografisinde, her bir baytın bir boşlukla ayrıldığı, bayt koduyla yazılmış bir metin bulunmaktadır. Bayt kodunda boşluk yoktur. Uzun bir bayt kodu dizesinin yalnızca satırın sarmalanması gerekiyorsa baytlar arasında kırılmasını sağlamak için her ara fırsatına <wbr> öğesini ekleriz:
<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> öğelerinin tümü boşluk öğeleridir. Diğer bir deyişle, iç içe yerleştirilmiş öğeler veya metinler gibi herhangi bir alt düğüme sahip olamazlar. Bunların hiçbirinin içeriğin depolanabileceği bir "içeri" olmadığından bitiş etiketi yoktur.
Öğrendiklerinizi sınayın
Satır içi metin bilginizi test edin.
Kod örneğini görüntülemek için hangi öğe kullanılmalıdır?
<code><data><kbd><ruby> öğesi ne için kullanılır?