Metinlerle ilgili temel bilgiler

Metin düzenleyicinizin <h1> ile <h6> arasındaki başlıkları ve metin bölümlerini anlamlı ve görsel olarak biçimlendirmenin birçok yolunu sunmasına benzer şekilde, HTML de düz yazıya anlam katmak için çok benzer bir dizi semantik ve semantik olmayan öğe sağlar.

Bu bölümde, metin işaretlemenin temel yöntemleri veya metinle ilgili temel bilgiler ele alınmaktadır. Ardından, listeler, tablolar ve formlar gibi metin işaretlemenin ek yollarını incelemeden önce özellikleri ele alacağız.

Başlıklar, yeniden

Altı bölüm başlığı öğesi vardır: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>. Bunlardan <h1> en önemli, <h6> ise en az önemli olanıdır. Uzun yıllar boyunca geliştiricilere, başlıkların tarayıcılar tarafından belgeleri özetlemek için kullanıldığı söylendi. Bu, başlangıçta bir hedefti ancak tarayıcılar hiçbir zaman doküman ana hatları oluşturma özelliklerini uygulamadı ve önerilen ana hat algoritması, HTML spesifikasyonundan resmen kaldırıldı. Ancak ekran okuyucu kullanıcıları, bir sayfanın içeriği hakkında bilgi edinmek için keşif stratejisi olarak başlıklardan yoğun bir şekilde yararlanır ve h tuşuyla başlıklar arasında gezinir. Başlık düzeylerinin, bir dokümanı özetlerken olduğu gibi mantıklı bir şekilde uygulanması, içeriğinizin erişilebilir olmasını sağlar ve önemle tavsiye edilir.

Tarayıcılar varsayılan olarak <h1> öğesini en büyük, <h2> öğesini biraz daha küçük olacak şekilde biçimlendirir. Sonraki her başlık düzeyi varsayılan olarak daha küçüktür. Geçmişte, kullanıcı aracısı stil sayfaları <article>, <aside>, <nav> veya <section> gibi bölümleme öğelerinin içine yerleştirilmiş <h1> öğelerinin yazı tipi boyutunu da küçültüyordu.

Bazı kullanıcı aracısı stil sayfaları, iç içe yerleştirilmiş <h1> öğelerini daha düşük başlık düzeyleri gibi stilize etmek için aşağıdaki seçicileri (veya benzerlerini) içeriyordu:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Ancak, Erişilebilirlik Nesne Modeli (AOM) ve ekran okuyucular, başlık düzeylerini hiçbir zaman iç içe yerleştirmeye göre değiştirmedi. İç içe yerleştirilmiş bir <h1> her zaman "başlık, düzey 1" olarak raporlandı. Bu durum, iç içe yerleştirilmiş başlıkların görsel olarak daha küçük görünmesine ancak yardımcı teknolojiler için üst düzey başlıklar olarak kalmasına neden olan bir uyuşmazlık oluşturdu.

HTML spesifikasyonu, doküman ana hattı algoritmasını kaldırdığından tarayıcılar bu eski kullanıcı aracısı stil sayfası kurallarını kaldırdı. Bu nedenle, iç içe yerleştirilmiş <h1> öğeleri otomatik olarak küçülmek yerine standart <h1> yazı tipi boyutunu korur.

Görsel stil veya yapısal hiyerarşi için <h1> öğelerini bölümleme öğelerinin içine yerleştirmeyin. İçeriğinizi her zaman doküman yapısına göre sıralı başlık öğeleri (<h1> ile <h6>) kullanarak işaretleyin. Bu sayede içeriğinizin arama motorları, ekran okuyucular ve gelecekteki bakımcılar için net ve erişilebilir olması sağlanır.

Başlıklar dışında, yapılandırılmış metnin çoğu bir dizi paragraftan oluşur. HTML'de paragraflar <p> etiketiyle işaretlenir. Kapatma etiketi isteğe bağlıdır ancak her zaman kullanılması önerilir.

#hakkında bölümünde bir başlık ve birkaç paragraf bulunur:

Bu bölümün erişilebilir özellikli adı olmadığından belirgin işaret olarak kabul edilmez. Bunu region (bir belirgin işaret rolü) haline getirmek için aria-labelledby kullanarak erişilebilir özellikli adı sağlayabilirsiniz:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Yalnızca uygun olduğunda ve gerektiğinde önemli noktalar oluşturun. Çok fazla işaret olması, ekran okuyucu kullanıcılarının yönünü kaybetmesine neden olabilir.

Alıntılar ve referanslar

Bir makaleyi veya blog gönderisini işaretlerken, görünür bir alıntı ile veya alıntı olmadan bir alıntı ya da öne çıkan alıntı eklemek isteyebilirsiniz. Görünür bir alıntı için <blockquote>, <q> ve <cite> olmak üzere üç bileşene yönelik öğeler ya da arama için daha fazla bilgi sağlamak amacıyla cite özelliği vardır.

#feedback bölümünde bir başlık ve üç yorum yer alıyor. Bu yorumlar, alıntı içeren bazı blok alıntıların ardından alıntıya ait referansı içeren bir paragraftan oluşuyor. Alandan tasarruf etmek için üçüncü yorumu atlıyoruz. İşaretleme şu şekilde olur:

Alıntı yazar veya alıntı hakkındaki bilgiler alıntının bir parçası olmadığından <blockquote> içinde değil, alıntıdan sonra yer alır. Bunlar, terimin halk arasındaki anlamıyla alıntılar olsa da aslında belirli bir kaynağı alıntılamadıkları için <p> paragraf öğesi içinde yer alır.

Alıntı, yazarın adı, önceki rolü ve mesleki hedefi dahil olmak üzere üç satırda görünüyor. <br> satır sonu, metin bloğunda satır sonu oluşturur. Fiziksel adreslerde, şiirlerde ve imza bloklarında kullanılabilir. Satır sonları, paragrafları ayırmak için satır başı olarak kullanılmamalıdır. Bunun yerine, önceki paragrafı kapatıp yeni bir paragraf açın. Paragraflar için paragraf kullanmak yalnızca erişilebilirlik açısından iyi değildir, aynı zamanda stil oluşturmayı da sağlar. <br> öğesi yalnızca bir satır sonudur ve çok az sayıda CSS özelliğinden etkilenir.

Her alıntı bloğunun ardından bir paragrafta alıntı bilgilerini sağladık. Ancak daha önce gösterilen alıntılar, harici bir kaynaktan gelmedikleri için bu şekilde kodlanmıştır. Bu durumda kaynak belirtilebilir (belirtilmelidir?).

Yorum, bir yorum web sitesinden, kitaptan veya başka bir çalışmadan alınmışsa <cite> öğesi, kaynağın başlığı için kullanılabilir. <cite> içeriği; kitap başlığı, web sitesi veya TV programı adı, hatta bir bilgisayar programının adı olabilir. <cite> kapsülleme, kaynak geçerken bahsediliyor olsa da kaynak alıntılanıyor veya referans veriliyor olsa da kullanılabilir. <cite> içindeki içerik, yazara değil esere aittir.

Blendan Smooth'un alıntısı çevrimdışı dergisinden alınmışsa blok alıntıyı şu şekilde yazarsınız:

Alıntı öğesi <cite>'nin örtülü bir rolü yoktur ve erişilebilir özellikli adını içeriğinden almalıdır. aria-label eklemeyin.

İçeriği görünür hale getiremediğiniz durumlarda alıntı yapılan bilgilerin kaynak dokümanının veya mesajının URL'sini değer olarak alan cite özelliği sayesinde alıntı yaptığınız kaynağa atıfta bulunabilirsiniz. Bu özellik hem <q> hem de <blockquote> üzerinde geçerlidir. URL olsa da makine tarafından okunabilir ancak okuyucu tarafından görülemez:

</p> kapanış etiketi isteğe bağlı olsa da (ve her zaman önerilir) </blockquote> kapanış etiketi her zaman gereklidir.

Çoğu tarayıcı, hem <blockquote> satır içi yönlendirmelere dolgu ekler hem de <cite> içeriğini italik yapar. Bu durum CSS ile kontrol edilebilir. <blockquote> tırnak işareti eklemez ancak CSS ile oluşturulan içeriklere tırnak işareti eklenebilir. <q> öğesi, dile uygun tırnak işaretlerini kullanarak varsayılan olarak tırnak ekler.

#teachers bölümünde HAL, "Üzgünüm ama bunu yapamam." diyor. Bunun İngilizce ve Fransızca kodu:

Satır içi alıntı öğesi <q>, dile uygun alıntılar ekler. Kullanıcı aracısı varsayılan stilleri, open-quote ve close-quote oluşturulmuş içeriğini içerir:

q::before {content: open-quote;}
q::after {content: close-quote;}

lang özelliği, sayfanın temel dili <html lang="en-US"> açılış etiketinde İngilizce olarak tanımlanmış olsa da bu metin paragrafının farklı bir dilde olduğunu tarayıcıya bildirmek için eklenir. Bu sayede Siri, Alexa ve VoiceOver gibi sesli kontrollerde Fransızca telaffuz kullanılır. Ayrıca, tarayıcıya hangi tür alıntıların oluşturulacağını bildirir.

<blockquote> gibi, <q> öğesi de cite özelliğini destekler.

HTML Varlıkları

Kaçış dizisini veya "öğeyi" fark etmiş olabilirsiniz. < karakteri HTML'de kullanıldığından, < veya daha zor hatırlanan bir kodlama < kullanarak bu karakterden kaçmanız gerekir. HTML'de dört ayrılmış öğe vardır: <, >, & ve ". Karakter referansları sırasıyla <, >, & ve "'dir.

Sıkça kullanacağınız diğer birkaç öğe arasında telif hakkı için © (©), ticari marka için ™ (™) ve satır sonu içermeyen boşluk için   yer alır. Satır sonu içermeyen boşluklar, iki karakter veya kelime arasına boşluk eklemek istediğinizde ve satır sonu oluşmasını önlemek istediğinizde kullanışlıdır. 2.000'den fazla adlandırılmış karakter referansı vardır. Ancak gerekirse emoji de dahil olmak üzere her karakterin &# ile başlayan kodlanmış bir eşdeğeri vardır.

ToastyMcToastface'in atölye yorumuna (yukarıdaki kod örneğinde yer almaz) bakarsanız bazı alışılmadık metin karakterleri olduğunu görürsünüz:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

Bu alıntı bloğundaki son cümle şu şekilde de yazılabilir:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Bu kod karmaşasında birkaç çıkış karakteri ve birkaç adlandırılmış karakter referansı var. Karakter kümesi UTF-8 olduğundan, alıntıdaki son birkaç karakterin bu örnekte olduğu gibi kaçırılması gerekmez. Yalnızca karakter kümesi tarafından desteklenmeyen karakterlerin çıkılması gerekir. Gerekirse çeşitli karakterlerin kaçışını etkinleştirmek için birçok araç vardır veya <head> içine <meta charset="UTF-8"> eklediğinizden emin olabilirsiniz.

Karakter kümesini UTF-8 olarak belirtmiş olsanız bile, bu karakteri ekrana yazdırmak istediğinizde < karakterinden kaçmanız gerekir. Genellikle >, " veya & için adlandırılmış karakter referanslarını eklemeniz gerekmez. Ancak HTML öğeleriyle ilgili bir eğitim yazmak istiyorsanız birine < kodlamayı öğretirken < yazmanız gerekir. 😀

Ayrıca, yüz emojisi 😀 olarak gösteriliyor ancak bu doküman UTF-8 olarak tanımlandığı için kaçış karakteri kullanılmıyor.

Bilgilerinizi sınayın

HTML'deki metinlerle ilgili bilginizi test edin.