Metinlerle ilgili temel bilgiler

Metin düzenleyicinizin <h1> - <h6> arası başlıklar sağlamasına benzer şekilde, metin bölümlerini anlamlı ve görsel yollarla biçimlendirmek için pek çok yönteme benzer şekilde HTML de düz yazıyı anlamlandırmak için çok benzer semantik ve anlamsal olmayan öğeler sağlar.

Bu bölümde, metni işaretlemenin temel yolları veya metinlerle ilgili temel bilgiler yer alır. Ardından listeler, tablolar ve formlar gibi metin işaretlemenin diğer yollarını keşfetmeden önce özellikleri tartışacağız.

Başlıklar, yeniden ziyaret edildi

<h1>, <h2>, <h3>, <h4>, <h5> ve <h6> olmak üzere altı bölüm başlığı öğesi vardır. <h1> en önemli, <h6> ise en az önemlidir. Geliştiricilere uzun yıllar boyunca başlıkların, dokümanları özetlemek için tarayıcılar tarafından kullanıldığı söylenmişti. Bu, başlangıçta bir hedefti, ancak tarayıcılar ana hatlarını belirleyen özellikleri uygulamadı. Bununla birlikte, ekran okuyucu kullanıcıları h tuşuyla başlıklar arasında gezinerek sayfanın içeriği hakkında bilgi edinmek için başlıkları keşif stratejisi olarak kullanır. Bu nedenle, başlık seviyelerinin bir belgeyi ana hatlarıyla uygulandığından emin olmak içeriğinizi erişilebilir hale getirir ve yine de bu konuda teşvik edilir.

Varsayılan olarak tarayıcı stili, <h1> en büyük, <h2> biraz daha küçük olur ve sonraki her başlık düzeyi varsayılan olarak daha küçük olur. İlginçtir ki tarayıcılar, varsayılan olarak <h1> yazı tipi boyutunu, öğenin kaç <article>, <aside>, <nav> veya <section> öğesine bağlı olduğuna bağlı olarak küçültür.

Bazı kullanıcı aracısı stil sayfaları, iç içe yerleştirilmiş <h1> öğelerini daha az önemli bir seviyedeler gibi biçimlendirmek için aşağıdaki seçicileri veya benzerlerini içerir:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Ancak Erişilebilirlik Nesne Modeli veya AOM, öğenin düzeyini doğru şekilde bildirmeye devam eder (bu örnekte "başlık, düzey 1"). Tarayıcının bunu diğer başlık düzeyleri için yapmadığını unutmayın. Bununla birlikte, başlık düzeyine dayalı tarayıcı stili kullanmayın. Tarayıcılar içerik oluşturmayı desteklemese de, öyleymiş gibi yapın; içerik başlıklarınızı yapıyormuş gibi işaretleyin. Bu, içeriğinizin arama motorlarına, ekran okuyuculara ve gelecekteki sanatçılar (siz de olabilirsiniz) için daha anlamlı olmasını sağlar.

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

#about bölümünün bir başlığı ve birkaç paragrafı vardır:

Erişilebilir bir adı olmadığı için bu bölüm önemli nokta değil. Bu öğeyi önemli bir rol olan region öğesine dönüştürmek için aria-labelledby öğesini kullanarak erişilebilir adı sağlayabilirsiniz:

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

Önemli noktaları yalnızca uygun durumlarda oluşturun. Çok fazla önemli noktanın olması, ekran okuyucu kullanıcılarının kafasını karıştırabilir.

Alıntılar ve alıntılar

Bir makaleyi veya blog yayınını işaretlerken görünür bir alıntıyla veya alıntı olmadan alıntı ya da alıntı ekleyebilirsiniz. Bu üç bileşen için öğeler vardır: Görünür bir alıntı için <blockquote>, <q> ve <cite> veya arama için daha fazla bilgi sağlamak üzere cite özelliği.

#feedback bölümünde bir başlık ve üç yorum bulunur. Bu yorumlar, bir kısmı alıntılar ve ardından alıntının alıntısını içeren bir paragraf içeren blok alıntılardır. Alandan tasarruf etmek için yapılan üçüncü inceleme atlanırsa işaretleme şu şekilde olur:

Alıntıyı yapan kişi veya alıntıyla ilgili bilgiler, alıntının parçası olmadığı için <blockquote> içinde değil, alıntıdan sonra gelir. Bunlar, terimin genel anlamıyla alıntılar olsa da aslında belirli bir kaynaktan alıntı yapmadıkları için bir <p> paragraf öğesine dahil edilir.

Alıntı, yazarın adı, önceki görevi ve mesleki fikri dahil olmak üzere üç satırdan oluşur. <br> satır sonu, bir metin blokunda satır sonu oluşturur. Fiziksel adreslerde, şiirlerde ve imza bloklarında kullanılabilir. Satır sonları, ayrı paragraflara satır başı karakteri 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 özelliklerini de etkinleştirir. <br> öğesi yalnızca bir satır sonudur; çok az sayıda CSS özelliğinden etkilenir.

Alıntı bilgilerini her bloktan sonra bir paragrafta sağladık. Ancak daha önce gösterilen alıntılar harici bir kaynaktan gelmedikleri için bu şekilde kodlandı. Doğrulanmışsa kaynaktan alıntı yapılabilir (belirtilmelidir).

Yorum bir inceleme web sitesinden, kitaptan veya başka bir çalışmadan alınmışsa kaynağın başlığı için <cite> öğesi kullanılabilir. <cite> içeriği bir kitabın başlığı, bir web sitesinin veya TV programının adı, hatta bir bilgisayar programının adı olabilir. <cite> kapsüllemesi, kaynaktan bahsediliyorsa ya da kaynaktan alıntılanıyor veya referans veriliyorsa kullanılabilir. <cite> içeriğinin içeriği yazar değil eserdir.

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

<cite> alıntı öğesinin örtülü bir rolü yoktur ve erişilebilir adını içeriklerinden almalıdır; aria-label eklemeyin.

İçeriği görünür hale getiremediğiniz durumlarda, kredinin verilmesi gereken yere kredi vermek için cite özelliğini kullanabilirsiniz. Bu özellik, alıntılanan bilgi için kaynak dokümanın veya mesajın URL'sini değer olarak alır. Bu özellik hem <q> hem de <blockquote> üzerinde geçerlidir. Bu bir URL olsa da makine tarafından okunabilir ancak okuyucu tarafından görülemez:

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

Çoğu tarayıcı, hem <blockquote> satır içi yönlerine dolgu ekler hem de <cite> içeriğini italik hale getirir. Bu, CSS ile kontrol edilebilir. <blockquote>, tırnak işareti eklemez ancak bu işaretler CSS tarafından oluşturulan içerikle eklenebilir. <q> öğesi, dile uygun tırnak işaretleri kullanarak varsayılan olarak tırnak işareti ekler.

#teachers bölümünde HAL, "Üzgünüm , ama maalesef bunu yapamıyorum." şeklinde alıntılanıyor. Bunun kodu İngilizce ve Fransızca olarak şöyledir:

Satır içi tırnak öğesi (<q>), dile uygun tırnak işaretleri ekler. Kullanıcı aracısı varsayılan stilleri, açık tırnak ve kapanış alıntısı ile oluşturulan içeriği içerir:

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

Sayfanın temel dilinin <html lang="en-US"> açılış etiketinde İngilizce olarak tanımlanmasına rağmen, bu metin paragrafının farklı bir dilde olduğunu tarayıcıya bildirmek için lang özelliği eklenir. Bu şekilde Siri, Alexa ve voiceOver gibi sesli kontrollerde Fransızca telaffuz kullanılabilir. Ayrıca tarayıcıya, oluşturulacak alıntı türlerini de bildirir.

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

HTML Varlıkları

Kaçış dizisini veya "entity"yi fark etmiş olabilirsiniz. <, HTML'de kullanıldığından, < veya hatırlaması daha kolay olmayan bir kodlamadan (<) çıkış yapmanız gerekir. HTML'de dört ayrılmış varlık bulunur: <, >, & ve ". Karakter referansları sırasıyla <, >, & ve " şeklindedir.

Sıklıkla kullanacağınız diğer tüzel kişiler arasında telif hakkı için ©, Ticari Marka (TM) için ™ ve bölünmeyen alanlar için   yer alıyor. Bölünmeyen boşluklar, iki karakter veya kelime arasına boşluk eklerken satır sonu eklemek istemediğiniz durumlarda kullanışlıdır. 2.000'den fazla adlandırılmış karakter referansı vardır. Ancak gerekirse emojiler de dahil olmak üzere her karakterin &# ile başlayan kodlanmış bir eşdeğeri vardır.

ToastyMcToastface'ın atölye incelemesine göz atarsanız (yukarıdaki kod örneğine dahil değildir) bazı olağan dışı metin karakterleri vardır:

<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 blok alıntıdaki son cümle de şu şekilde yazılabilir:

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

Bu kod karmasında birkaç çıkışsız karakter ve birkaç adlandırılmış karakter referansı var. Karakter kümesi UTF-8 olduğundan, bu örnekte olduğu gibi, blok alıntısındaki son birkaç karakterin aslında kod dışı bırakılmasına gerek yoktur. Yalnızca karakter kümesi tarafından desteklenmeyen karakterlere çıkış yapılması gerekir. Gerekirse çeşitli karakterlere çıkış karakteri eklemeyi sağlayan birçok araç vardır. Dilerseniz <head>'e <meta charset="UTF-8"> öğesini de dahil edebilirsiniz.

Karakter kümesini UTF-8 olarak belirtseniz bile, bu karakteri ekrana yazdırmak istediğinizde < dışına çıkmanız gerekir. Genellikle >, " veya & için adlandırılmış karakter başvurularını eklemeniz gerekmez ancak HTML varlıkları hakkında bir eğitim yazmak isterseniz bir kişiye < kodunu nasıl kodlayacağınızı öğretirken < yazmanız gerekir. 😀

Bu smiley emojisi 😀 olmasına rağmen bu doküman UTF-8 olarak tanımlandığı için kod dışı bırakılmıyor.

Öğrendiklerinizi sınayın

HTML metin bilginizi test edin.

HTML'de telif hakkı simgesini nasıl gösterirsiniz?

c

Tekrar deneyin.

©

Doğru.

&copyright.

Tekrar deneyin.

Bir şeyin tırnak işareti olduğunu göstermek için hangi öğe kullanılır?

<blockquote>

Doğru

<quote>

Tekrar deneyin.

<cite>

Tekrar deneyin. <cite> öğesi, alıntının kendisini değil, alıntının kaynağını belirtmek için kullanılır.