Başlıklar ve bölümler

Son bölümde, bir sayfadaki kelimelerin ne anlama geldiğini bilmeseniz bile, anlamsal öğeler dokümana anlamlı bir yapı sağladığında, diğerleri (arama motoru, yardımcı teknolojiler, geleceğin bakımını yapan bir kişi, yeni bir ekip üyesi) belgenin ana hatlarını nasıl anlayacağını öğrendiniz.

Bu bölümde belge yapısını keşfedeceksiniz; önceki bölümde yer alan bölümlendirme öğelerini özetleyecek ve başvurunuzun ana hatlarını işaretleyeceksiniz.

Kod yazarken iş için doğru öğeleri seçmek, HTML'nizi yeniden düzenlemenize veya açıklamanıza gerek kalmayacağı anlamına gelir. İş için doğru öğeyi kullanmayı düşünüyorsanız çoğunlukla iş için doğru öğeyi seçersiniz. Aksi takdirde muhtemelen almazsınız.

Artık işaretleme semantiğini anladığınıza ve doğru öğeyi seçmenin neden önemli olduğunu bildiğinize göre, tüm farklı öğelerle ilgili bilgi edindikten sonra genellikle doğru öğeyi çok fazla ek çaba harcamadan seçersiniz.

Site <header>

Şimdi bir site başlığı oluşturalım. Anlamsal olmayan işaretlemeyle başlayıp iyi bir çözüme ulaşacaksınız. Böylece bu süreçte HTML bölümünün ve başlık öğelerinin yararlarını öğrenebilirsiniz.

Başlığımızın anlamını çok az düşünür veya hiç düşünmezseniz şunun gibi bir kod kullanabilirsiniz:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS, (neredeyse) tüm işaretlemelerin doğru görünmesini sağlayabilir. Ancak her şey için anlamsal olmayan <div> kullanmak ekstra iş yaratır. CSS ile birden fazla <div> hedeflemek istiyorsanız içeriği tanımlamak için kimlikler veya sınıflar kullanmanız gerekir. Kod, her </div> kapanışında, her bir </div> öğesinin hangi açılış etiketini kapattığını belirten bir açıklama da içerir.

id ve class özellikleri stil ve JavaScript için kancalar sağlar, ancak ekran okuyucu ve (çoğunlukla) arama motorları için anlamsal değer sağlamaz.

Ekran okuyucular için iyi bir erişilebilirlik nesne modeli (AOM) oluşturmak amacıyla anlamsal sağlamak üzere role özelliklerini ekleyebilirsiniz:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

Bu, en azından CSS'de özellik seçicilerin kullanılmasını sağlar ve her bir </div> öğesinin hangi <div> öğesini kapatacağını belirlemek için yorumlar ekler.

HTML biliyorsanız tek yapmanız gereken içeriğin amacını düşünmektir. Ardından bu kodu, role kullanmadan ve kapanış etiketleri için yorum yazmaya gerek kalmadan semantik olarak yazabilirsiniz:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Bu kod, iki anlamsal önemli nokta kullanır: <header> ve <nav>.

Bu, ana başlıktır. <header> öğesi her zaman önemli nokta değildir. İç içe yerleştirildikleri yere bağlı olarak farklı anlamlara sahiptir. <header> en üst düzey olduğunda, role kod bloğunda fark etmiş olabileceğiniz önemli bir rol olan banner sitesidir. <header>; <main>, <article> veya <section> içine iç içe yerleştirilmişse bunu yalnızca söz konusu bölümün başlığı olarak tanımlar ve bir önemli nokta değildir.

<nav> öğesi, içeriği gezinme olarak tanımlar. Bu <nav>, site başlığına yerleştirilmiş olduğundan sitenin ana gezinme çubuğudur. <article> veya <section> içine yerleştirilmişse yalnızca söz konusu bölüme yönelik dahili gezinme olur. Anlamsal öğeleri kullanarak anlamlı bir erişilebilirlik nesne modeli veya AOM oluşturursunuz. AOM, ekran okuyucunun kullanıcıya bu bölümün, içinde gezinebileceği veya atlayabileceği önemli bir gezinme bloğu olduğunu bildirmesini sağlar.

</nav> ve </header> kapanış etiketlerinin kullanılması, yorumların her bir bitiş etiketinin hangi öğesi kapatıldığını tanımlama ihtiyacını ortadan kaldırır. Ayrıca farklı öğeler için farklı etiketler kullanmak, id ve class kancalarına duyulan ihtiyacı ortadan kaldırır. CSS seçicilerin spesifikliği düşük olabilir; muhtemelen, çakışma konusunda endişelenmeden header nav a ile bağlantıları hedefleyebilirsiniz.

Çok az HTML içeren ve sınıf veya kimlik içermeyen bir üstbilgi yazdınız. Anlamsal HTML kullanırken bunu yapmanıza gerek yoktur.

Site <footer>

Site altbilgisini kodlayalım.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header> özelliğine benzer şekilde, altbilginin yer işareti olup olmaması altbilginin iç içe yerleştirildiği yere bağlıdır. Site altbilgisi olduğunda ise önemli noktadır ve her sayfada bulunmasını istediğiniz site altbilgisi bilgilerini (telif hakkı beyanı, iletişim bilgileri ve gizlilik ile çerez politikalarınızın bağlantıları gibi) içermelidir. Site altbilgisi için örtülü role, contentinfo şeklindedir. Aksi takdirde, Chrome'da AOM'nin aşağıdaki ekran görüntüsünde de gösterildiği gibi altbilginin dolaylı bir rolü yoktur (alt bilgi, <header> ile <footer> arasında <header> ve <footer> bulunan bir <article> içerir).

Bu ekran görüntüsünde, biri <article> diğeri ise üst düzeyde olmak üzere iki altbilgi yer almaktadır. Üst düzey altbilgi, dolaylı contentinfo rolüne sahip bir önemli noktadır. Diğer altbilgi önemli nokta değildir. Chrome bunu FooterAsNonLandmark, Firefox ise section olarak gösterir.

Bu, <footer> kullanmamanız gerektiği anlamına gelmez. Bir blogunuz olduğunu varsayalım. Blog, dolaylı contentinfo rolüne sahip bir site altbilgisine sahip. Her blog yayınının bir <footer> öğesi de olabilir. Blogunuzun ana açılış sayfasındaki tarayıcı, arama motoru ve ekran okuyucu, ana altbilginin en üst düzey altbilgi olduğunu, diğer tüm altbilgilerin ise iç içe yerleştirildikleri yayınlarla ilgili olduğunu bilir.

<footer> bir <article>, <aside>, <main>, <nav> veya <section> alt öğesiyse yer işareti değildir. Yayın, işaretlemeye bağlı olarak kendi başına görünüyorsa bu altbilginin düzeyi yükseltilebilir.

Altbilgiler, genellikle iletişim adresi öğesi olan <address> ile sarmalanmış şekilde iletişim bilgilerini bulacağınız yerdir. Bu öğe pek iyi adlandırılmamış bir öğedir. Fiziksel posta adresleri yerine bireyler veya kuruluşların iletişim bilgilerini eklemek için kullanılır.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Belge yapısı

Bu modül, yalnızca bazen önemli nokta veya "bölüm ayırma" öğesi olmaları nedeniyle benzersiz olduğundan <header> ve <footer> ile başlıyor. Şimdi en yaygın sayfa düzenlerini ele alarak "tam zamanlı" bölümlendirme öğesini ele alalım:

Bir başlık, iki kenar çubuğu ve bir alt bilgi içeren bir düzen, kutsal plan düzeni olarak bilinir. Bu içeriği işaretlemenin birçok yolu vardır. Örneğin:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Blog oluşturuyorsanız <main> alanında bir dizi makaleniz olabilir:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Anlamsal öğeler kullanıldığında, tarayıcılar anlamlı erişilebilirlik ağaçları oluşturabilir ve böylece ekran okuyucu kullanıcılarının daha kolay gezinmesini sağlayabilir. Burada, <header> ve <footer> sitesi üzerinden bir banner ve contentinfo sağlanır. Buraya eklenen yeni öğeler arasında <main>, <aside> ve <article> ile daha önce kullandığınız <h1> ile <nav> ile henüz kullanmadığınız <section> yer alıyor.

<main>

Tek bir <main> önemli nokta öğesi var. <main> öğesi, dokümanın ana içeriğini tanımlar. Sayfa başına yalnızca bir <main> olmalıdır.

<aside>

<aside>, dokümanın ana içeriğiyle dolaylı veya yakından alakalı olan içerikler içindir. Örneğin, bu makale HTML hakkındadır. Üç site başlığı örneğine (div, rol ve semantik) ilişkin CSS seçici belirginliğiyle ilgili bir bölümde, teğet olarak alakalı kenar bir <aside> içinde bulunabilir ve çoğu durumda olduğu gibi, <aside> öğesi de bir kenar çubuğu veya ek bilgi kutusunda sunulur. <aside> aynı zamanda, dolaylı complementary rolüyle önemli bir noktadır.

<article>

<main> içine iki adet <article> öğesi ekledik. Ana içeriğin tek bir kelimeden oluştuğu veya gerçek dünyada tek bir içerik bölümünden oluştuğu ilk örnekte bu gerekli değildi. Ancak, ikinci örneğimizde olduğu gibi bir blog yazıyorsanız her yayının <main> içine yerleştirilmiş bir <article> içinde olması gerekir.

<article>, prensipte bağımsız olarak yeniden kullanılabilen eksiksiz veya bağımsız bir içerik bölümünü temsil eder. Makaleleri, bir gazetedeki makale gibi düşünün. Basılı olarak, Yeni Zelanda Başbakanı Jacinda Ardern ile ilgili bir haber makalesi yalnızca tek bir bölümde, belki de dünya haberlerinde yer alabilir. Gazetenin web sitesinde, aynı haber makalesi ana sayfada, siyaset bölümünde, Okyanusya veya Asya Pasifik haberleri bölümünde ve haberin konusuna bağlı olarak belki de spor, yaşam tarzı veya teknoloji bölümlerinde gösterilebilir. Makale, Pocket veya Yahoo News!

<section>

<section> öğesi, kullanılacak daha spesifik bir semantik öğe olmadığında, bir dokümanın bağımsız bölümlerini kapsamak için kullanılır. Bölümler, çok az istisna dışında bir başlığa sahip olmalıdır.

Jacinda Ardern örneğine dönersek, gazetenin ana sayfasındaki banner'da gazetenin adı ve ardından tek bir <main> yer alıyordu. Bu sembollerin her biri "Dünyadan haberler" ve "Politika" gibi başlıklara sahip birkaç <section>'ye ayrılmıştı. Her bölümde bir dizi <article> göreceksiniz. Her <article> içinde bir veya daha fazla <section> öğesi de bulabilirsiniz. Bu sayfaya bakarsanız, tüm "başlıklar ve bölümler" bölümü <article>'dir. Daha sonra bu <article>; site header, site footer ve doküman yapısı dahil olmak üzere çeşitli <section> öğelerine bölünür. Makalelerin her bölümünde olduğu gibi makale de bir başlık içerir.

<section>, erişilebilir bir adı olmadığı sürece önemli nokta değildir. Erişilebilir bir adı varsa örtülü rolü region olur. Önemli nokta rolleri, dokümanın daha geniş kapsamlı bölümlerini tanımlamak için tutumlu bir şekilde kullanılmalıdır. Çok fazla önemli nokta rolü kullanmak, ekran okuyucularda "gürültü" oluşmasına neden olabilir. Bu durum, <main> iki veya üç önemli alt bölüm içeriyorsa ve her <section> için erişilebilir bir ad eklemek yararlı olabilir. Bu nedenle, sayfanın genel düzeninin anlaşılmasını zorlaştırabilir.

Başlıklar: <h1>-<h6>

Altı bölüm başlığı öğesi vardır: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>. Her biri, <h1> en yüksek veya en önemli bölüm düzeyi, <h6> ise en düşük bölüm olmak üzere altı bölüm başlığı düzeyinden birini temsil eder.

Bir başlık, doküman banner'ında <header> yer aldığında, uygulamanın veya sitenin başlığı olur. <main> içine iç içe yerleştirildiğinde, <main> içindeki bir <header> içerisine yerleştirilmiş olsun veya olmasın, sitenin tamamının değil, söz konusu sayfanın başlığı olur. Bir <article> veya <section> içine iç içe yerleştirildiğinde bu, sayfanın ilgili alt bölümünün başlığı olur.

Bir metin düzenleyicide başlık seviyelerine benzer şekilde başlık seviyeleri kullanılması önerilir: Ana başlık olarak <h1> ile başlayıp alt bölümler için <h2> ile ve bu alt bölümlerde bölümler varsa <h3> ile başlayın. Başlık düzeylerini atlamaktan kaçının. Burada bölüm başlıklarıyla ilgili güzel bir makale var.

Bazı ekran okuyucu kullanıcıları, bir sayfanın içeriğini anlamak için başlıklara erişir. MS Word veya Google Dokümanlar'ın başlıklara dayalı bir anahat oluşturabildiği gibi, başlangıçta başlıkların da bir dokümanı ana hatlarıyla belirtmesi gerekiyordu, ancak tarayıcılar bu yapıyı hiçbir zaman uygulamadı. Tarayıcılar, iç içe yerleştirilmiş başlıkları aşağıdaki örnekte gösterildiği gibi giderek küçülen yazı tipi boyutlarında görüntülese de, dış çizgiyi aslında desteklemez.

Artık MachineLearningWorkshop.com bilgilerini ana hatlarıyla çizmek için yeterli bilgiye sahipsiniz:

MLW.com'un <body> ana hatlarını belirleme

Makine öğrenimi atölyesinin ana hatlarını aşağıda görebilirsiniz:

Hiçbir içerik bağımsız, eksiksiz bir içerik olmadığından <section>, <article> ile kıyaslandığında daha uygundur. Her birinin bir başlığı olsa da hiçbir bölüm <footer> niteliği taşımaya değmez.

Bu noktaya kadar söylemeye gerek yok ancak metni kalın veya büyük yapmak için başlıklar kullanmayın; bunun yerine CSS kullanın. Metni vurgulamak istiyorsanız bunu yapmanın anlamsal öğeleri de vardır. Özellikleri derinlemesine ele aldıktan sonra, metinlerle ilgili temel bilgilerden bahsederken bu konuyu ele alacağız ve sayfa içeriğinin büyük bir kısmını dolduracağız.

Öğrendiklerinizi sınayın

Başlıklar ve bölümlerle ilgili bilginizi test edin.