Başlıklar ve bölümler

Son bölümde, bir sayfadaki kelimelerin anlamını bilmeseniz bile semantik öğeler dokümana anlamlı bir yapı sağladığında diğerlerinin (arama motoru, yardımcı teknolojiler, gelecekteki bakımcı, yeni bir ekip üyesi) dokümanın ana hatlarını anlayacağını öğrendiniz.

Bu bölümde, doküman yapısını keşfedecek, önceki bölümdeki bölümleme öğelerini özetleyecek ve uygulamanızın ana hatlarını işaretleyeceksiniz.

Kod yazarken iş için doğru öğeleri seçmek, HTML'nizi yeniden düzenlemeniz veya yorum satırı yapmanız gerekmediği anlamına gelir. İş için doğru öğeyi kullanmayı düşünürseniz çoğu zaman doğru öğeyi seçersiniz. Aksi takdirde muhtemelen yapamazsınız.

Biçimlendirme anlamsal yapısını anladığınıza ve doğru öğeyi seçmenin neden önemli olduğunun farkında olduğunuza göre, tüm farklı öğeleri öğrendikten sonra genellikle çok fazla ek çaba harcamadan doğru öğeyi seçebilirsiniz.

Site <header>

Öncelikle bir site üstbilgisi oluşturmalısınız. Anlamsal olmayan işaretlemeyle başlayın ve HTML bölümü ile başlık öğelerinin avantajlarını öğrenmek için iyi bir çözüme doğru ilerleyin.

Başlığımızın anlamsal yapısı hakkında pek düşünmediyseniz aşağıdaki 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 aslında ek iş yükü oluşturur. CSS ile birden fazla <div> hedeflemek için içeriği tanımlamak üzere kimlikler veya sınıflar kullanırsınız. Kod, her kapanış </div> için hangi açılış etiketinin kapatıldığını belirten bir yorum da içerir.</div>

id ve class özellikleri, stil ve JavaScript için kancalar sağlasa da ekran okuyucu ve (çoğu durumda) arama motorları için anlamsal bir değer katmaz.

Ekran okuyucular için iyi bir erişilebilirlik nesne modeli (AOM) oluşturmak üzere anlamsal yapı sağlamak için 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 semantik sağlar ve CSS'de özellik seçicilerin kullanılmasına olanak tanır ancak hangi <div> öğesinin hangi </div> öğesini kapattığını belirlemek için yorumlar eklemeye devam eder.

HTML biliyorsanız yapmanız gereken tek şey içeriğin amacını düşünmektir. Ardından, role kullanmadan ve kapatma etiketlerini yorumlamanıza gerek kalmadan bu kodu anlamsal 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 kodda iki semantik işaret kullanılıyor: <header> ve <nav>.

Bu, ana başlıktır. <header> öğesi her zaman bir dönüm noktası değildir. İç içe yerleştirildiği yere göre farklı anlamlara sahiptir. <header> üst düzey olduğunda, role kod bloğunda belirtmiş olabileceğiniz bir dönüm noktası rolü olan banner sitesidir. <header>, <main>, <article> veya <section> içine yerleştirildiğinde yalnızca ilgili bölümün başlığı olarak tanımlanır ve önemli nokta olarak kabul edilmez.

<nav> öğesi, içeriği gezinme olarak tanımlar. Bu <nav>, site başlığında yer aldığından sitenin ana gezinme bölümüdür. <article> veya <section> içine yerleştirilmişse yalnızca söz konusu bölüm için dahili gezinme olur. Semantik öğeler kullanarak anlamlı bir erişilebilirlik nesne modeli (AOM) oluşturursunuz. AOM, ekran okuyucunun kullanıcıya bu bölümün, gezinilebilecek veya atlanabilecek önemli bir gezinme bloğundan oluştuğunu bildirmesini sağlar.

</nav> ve </header> kapatma etiketlerinin kullanılması, her bir bitiş etiketinin hangi öğeyi kapattığını belirlemek için yorum kullanma ihtiyacını ortadan kaldırır. Ayrıca, farklı öğeler için farklı etiketler kullanmak id ve class kancalarına olan ihtiyacı ortadan kaldırır. CSS seçiciler düşük özelliğe sahip olabilir. Çakışma konusunda endişelenmeden bağlantıları header nav a ile hedefleyebilirsiniz.

Çok az HTML içeren, sınıf veya kimlik içermeyen bir başlık yazmışsınızdır. Anlamsal HTML kullanırken buna gerek yoktur.

Site <footer>

Site altbilgisini kodlayın.

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

<header> ile benzer şekilde, altbilginin önemli bir nokta olup olmadığı, altbilginin yerleştirildiği yere bağlıdır. Site altbilgisi olduğunda bir dönüm noktasıdır ve her sayfada bulunmasını istediğiniz site altbilgisi bilgilerini (ör. telif hakkı bildirimi, iletişim bilgileri, gizlilik ve çerez politikalarınıza giden bağlantılar) içermelidir. Site altbilgisi için örtülü role değeri contentinfo'dir. Aksi takdirde, altbilginin örtülü bir rolü yoktur ve bir dönüm noktası değildir. Bu durum, Chrome'daki AOM'nin aşağıdaki ekran görüntüsünde gösterilmektedir (<article> ile <header> ve <footer> arasında <header> ve <footer> bulunur).

Bu ekran görüntüsünde iki altbilgi var: biri <article> içinde, diğeri ise üst düzeyde. Üst düzey altbilgi, contentinfo örtülü rolüne sahip bir belirgin işarettir. Diğer altbilgi bir işaret değil. Chrome'da FooterAsNonLandmark, Firefox'ta ise section olarak gösterilir.

Bu, <footer> kullanmamanız gerektiği anlamına gelmez. Örneğin, bir blogunuz varsa contentinfo rolüne sahip bir site altbilginiz olabilir. Her blog yayınında <footer> da olabilir. Blogunuzun ana açılış sayfasında tarayıcı, arama motoru ve ekran okuyucu, ana altbilginin üst düzey altbilgi olduğunu ve diğer tüm altbilgilerin, iç içe yerleştirildikleri yayınlarla ilgili olduğunu bilir.

<footer>, <article>, <aside>, <main>, <nav> veya <section> öğesinin alt öğesi olduğunda önemli yer olarak kabul edilmez. Yayın kendi başına görünüyorsa işaretlemeye bağlı olarak bu altbilgi tanıtılabilir.

İletişim bilgilerini genellikle <address> ile sarmalanmış olarak altbilgilerde bulabilirsiniz. Bu, iletişim adresi öğesidir. Bu öğe, iyi adlandırılmamış bir öğedir. Fiziksel posta adresleri için değil, şahısların 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 yer (veya "bölümlendirme") öğeleri oldukları için <header> ve <footer> ile başlar. Daha sık kullanılan birkaç bölümleme öğesi vardır.

Başlık, iki kenar çubuğu ve altbilgi içeren düzene holy grail layout (kutsal kâse düzeni) adı verilir. 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> içinde 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>

Tarayıcılar, anlamsal öğeler kullanıldığında anlamlı erişilebilirlik ağaçları oluşturabilir. Bu, ekran okuyucuların gezinme şeklini iyileştirmeye yardımcı olur. Burada, bir site <header> ve <footer> aracılığıyla banner ve contentinfo sağlanır. Buraya eklenen yeni öğeler arasında <main>, <aside> ve <article>; ayrıca daha önce kullandığınız <h1> ve <nav> ile henüz kullanmadığınız <section> yer alır.

<main>

Tek bir <main> dönüm noktası öğesi var. <main> öğesi, belgenin 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 teğetsel olarak ilgili içerikler için kullanılır. Örneğin, bu belge HTML ile ilgilidir. Üç site başlığı örneği (div, role ve semantic) için CSS seçici özgüllüğüyle ilgili bir bölümde, dolaylı olarak ilgili olan aside, <aside> içinde yer alabilir. Çoğu gibi, <aside> da büyük olasılıkla bir kenar çubuğunda veya açıklama kutusunda gösterilir. <aside>, complementary rolünü üstlenen bir dönüm noktasıdır.

<article>

<main> öğesinin içine iki <article> öğesi ekledik. Ana içerik yalnızca tek bir kelime veya gerçek dünyada tek bir içerik bölümü olduğunda ilk örnekte bu gerekli değildi. Ancak ikinci örneğimizde olduğu gibi bir blog yazıyorsanız her yayın <article> içinde <main> olmalıdır.

<article>, prensipte bağımsız olarak yeniden kullanılabilen, eksiksiz veya bağımsız bir içerik bölümünü temsil eder. Bir makaleyi, gazetede yer alan bir makale gibi düşünebilirsiniz. Basılı bir gazetede, Yeni Zelanda Başbakanı Jacinda Ardern ile ilgili bir haber makalesi yalnızca bir bölümde (ör. dünya haberleri) yer alabilir. Gazetenin web sitesinde ise 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 spor, yaşam tarzı ya da teknoloji bölümlerinde yer alabilir. Makale, Pocket veya Yahoo News! gibi diğer sitelerde de görünebilir.

<section>

<section> öğesi, kullanılacak daha spesifik bir anlamsal öğe olmadığında bir belgenin genel bağımsız bölümlerini kapsamak için kullanılır. Çok az istisna dışında, bölümlerde başlık bulunmalıdır.

Jacinda Ardern örneğine geri dönecek olursak gazetenin ana sayfasındaki banner'da gazetenin adı, ardından tek bir <main> yer alır. Bu <main>, her biri "Dünya haberleri" ve "Siyaset" gibi bir başlığa sahip olan birkaç <section>'ye bölünür. Her bölümde bir dizi <article> bulunur. Her <article> içinde bir veya daha fazla <section> öğesi de bulabilirsiniz. Bu sayfaya baktığınızda, "başlıklar ve bölümler" kısmının tamamı <article>'dir. Bu <article> daha sonra site header, site footer ve belge yapısı dahil olmak üzere birkaç <section>'ye bölünür. Makalenin kendisinin ve her bölümün bir başlığı vardır.

Bir <section>, erişilebilir özellikli adı olmadığı sürece önemli yer değildir. Erişilebilir özellikli adı varsa örtülü rol region olur. Önemli yer rolleri, belgenin genel olarak daha büyük bölümlerini tanımlamak için seyrek kullanılmalıdır. Çok fazla belirgin işaret rolü kullanmak ekran okuyucularda "gürültüye" neden olabilir ve sayfanın genel düzenini anlamayı zorlaştırabilir. <main> iki veya üç önemli alt bölüm içeriyorsa her <section> için erişilebilir özellikli ad eklemek faydalı olabilir.

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

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

Bir başlık, doküman banner'ına <header> yerleştirildiğinde uygulama veya site başlığı olur. <main> içine yerleştirildiğinde, <main> içinde <header> içine yerleştirilmiş olsun veya olmasın, tüm site için değil, söz konusu sayfanın başlığıdır. <article> veya <section> içine yerleştirildiğinde, sayfanın ilgili alt bölümünün başlığıdır.

Başlık düzeylerini, metin düzenleyicideki başlık düzeylerine benzer şekilde kullanmanız önerilir: Ana başlık olarak <h1> ile başlayın, alt bölümlerin başlıkları için <h2>, bu alt bölümlerin bölümleri varsa <h3> kullanın. Başlık düzeylerini atlamayın. Bölüm başlıklarıyla ilgili iyi bir makaleyi burada bulabilirsiniz.

Bazı ekran okuyucu kullanıcıları, bir sayfanın içeriğini anlamak için başlıklara erişir. Başlangıçta, başlıkların bir dokümanın ana hatlarını oluşturması amaçlanıyordu. MS Word veya Google Dokümanlar'ın başlıkları temel alarak ana hat oluşturabilmesi gibi, ancak tarayıcılar bu yapıyı hiçbir zaman uygulamadı. Tarayıcılar, aşağıdaki örnekte gösterildiği gibi iç içe yerleştirilmiş başlıkları giderek küçülen yazı tipi boyutlarında gösterse de aslında ana hat oluşturmayı desteklemez.

Artık MachineLearningWorkshop.com'un ana hatlarını belirleyecek kadar bilgiye sahipsiniz:

MLW.com'un <body> yapısını özetleme

Makine öğrenimi atölyesi sitesinin görünür içeriğinin ana hatları şöyledir:

Hiçbir içerik bağımsız ve eksiksiz bir içerik olmadığı için <section>, <article> ifadesinden daha uygundur. Her birinin başlığı olsa da hiçbir bölüm <footer> ifadesini hak etmez.

Bu noktada belirtmeye gerek olmasa da 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ıza olanak tanıyan semantik öğeler de vardır. Metinlerle ilgili temel bilgileri ve özellikleri daha ayrıntılı olarak ele aldıktan sonra bu konuyu da inceleyip sayfanın içeriğinin büyük bir kısmını dolduracağız.

Bilgilerinizi sınayın

Başlıklar ve bölümler hakkındaki bilginizi test edin.