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ğer kullanıcıların (arama motoru, yardımcı teknolojiler, gelecekteki bir bakım uzmanı, 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.

Kodlama yaparken işe uygun öğeleri seçerseniz HTML'nizi yeniden düzenlemeniz veya açıklama satırı yapmanız gerekmez. Doğru elementi kullanmayı düşünürseniz genellikle doğru elementi seçersiniz. Bunu yapmazsanız muhtemelen başarılı olamazsı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ı öğeler hakkında bilgi edindikten sonra genellikle çok fazla ek çaba harcamadan doğru öğeyi seçebilirsiniz.

Site <header>

Öncelikle bir site başlığı oluşturmanız gerekir. Anlamsal olmayan işaretlemeyle başlayın ve iyi bir çözüme ulaşmak için çalışın. Böylece HTML bölümü ve başlık öğelerinin avantajlarını öğrenebilirsiniz.

Başlığımızın semantiği üzerinde çok az düşündüyseniz veya hiç düşünmediyseniz şöyle 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) her işaretlemenin doğru görünmesini sağlayabilir. Ancak her şey için anlamsal olmayan <div> kullanmak aslında fazladan iş yaratır. CSS ile birden fazla <div> öğesini hedeflemek için içeriği tanımlamak üzere kimlikleri veya sınıfları kullanırsınız. Kodda ayrıca, her bir kapanış </div> için hangi açılış etiketinin </div> kapatıldığını belirten bir yorum da bulunur.

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

Ekran okuyucular için iyi bir erişilebilirlik nesne modeli (AOM) oluşturmak amacıyla semantik 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ını mümkün kılar ancak her bir </div> öğesinin hangi <div> öğesini kapattığını belirlemek için yine de yorum ekler.

HTML biliyorsanız tek yapmanız gereken içeriğin amacını düşünmektir. Ardından, role kullanmadan ve kapanış etiketlerini yorumlamaya 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 referans noktası kullanılır: <header> ve <nav>.

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

<nav> öğesi, içeriği gezinme olarak tanımlar. Bu <nav>, site başlığının içinde yer aldığından sitenin ana gezinme öğesidir. <article> veya <section> içine yerleştirilmiş olsaydı yalnızca o bölüm için dahili gezinme olurdu. Anlamsal öğeleri kullanarak anlamlı bir erişilebilirlik nesne modeli (AOM) oluşturmuş olursunuz. AOM, ekran okuyucunun kullanıcıya bu bölümün, içinde gezinebileceği veya atlayabileceği önemli bir gezinme bloğundan oluştuğunu bildirmesini sağlar.

</nav> ve </header> kapatma etiketlerini kullanmak, her bir bitiş etiketinin hangi öğeyi kapattığını belirlemek için yorum ekleme 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çicilerin özgüllüğü düşük olabilir. Çakışma konusunda endişelenmeden bağlantıları header nav a ile hedefleyebilirsiniz.

Çok az HTML içeren ve sınıf veya kimlik içermeyen bir başlık yazdınız. 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> öğesine benzer şekilde, altbilginin bir referans noktası olup olmadığı, altbilginin nerede iç içe yerleştirildiğine bağlıdır. Sitenin altbilgisi olduğunda bir referans noktasıdır ve her sayfada olmasını istediğiniz site altbilgisi bilgilerini (ör. telif hakkı beyanı, iletişim bilgileri, gizlilik ve çerez politikalarınızın bağlantıları) içermelidir. Site altbilgisi için dolaylı role, contentinfo şeklindedir. Aksi takdirde, altbilginin örtük bir rolü yoktur ve Chrome'daki AOM'nin aşağıdaki ekran görüntüsünde gösterildiği gibi bir referans noktası değildir (<header> ve <footer> arasında <header> ve <footer> içeren bir <article> vardır).

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ük rolüne sahip bir belirgin işarettir. Diğer altbilgi bir referans noktası değildir. Chrome bunu FooterAsNonLandmark, Firefox ise section olarak gösterir.

Bu, <footer> kullanmamanız gerektiği anlamına gelmez. Örneğin, bir blogunuz varsa dolaylı contentinfo rolüne sahip bir site altbilginiz olabilir. Her blog yayınında <footer> da bulunabilir. 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 bir nirengi noktası değildir. Yayın tek başına görünüyorsa işaretlemeye bağlı olarak bu altbilgi tanıtılabilir.

Altbilgiler genellikle iletişim bilgilerini bulabileceğiniz yerlerdir ve <address> iletişim adresi öğesiyle sarmalanır. Bu, çok iyi adlandırılmamış bir öğedir. Fiziksel posta adreslerini 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 birer referans noktası (veya "bölümleme") öğesi oldukları için <header> ve <footer> ile başlar. Daha sık kullanılan birkaç bölümleme öğesi daha vardır.

Üstbilgi, iki kenar çubuğu ve altbilgi içeren bir düzen, kutsal kase 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>

Bir 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>

Anlamsal öğeler kullanıldığında tarayıcılar anlamlı erişilebilirlik ağaçları oluşturabilir. Bu, ekran okuyucunun gezinme şeklini iyileştirmeye yardımcı olur. Burada, banner ve contentinfo, <header> ve <footer> sitesi üzerinden sağlanır. Buraya eklenen yeni öğeler arasında <main>, <aside> ve <article> yer alır. Ayrıca daha önce kullandığınız <h1> ve <nav> ile henüz kullanmadığınız <section> de bulunur.

<main>

Tek bir <main> referans noktası öğ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 teğetsel olarak ilgili olan içerikler için kullanılır. Örneğin, bu doküman HTML ile ilgilidir. Üç site başlığı örneği (div, rol ve anlamsal) için CSS seçici özgüllüğüyle ilgili bir bölümde, dolaylı olarak alakalı kenar çubuğu bir <aside> içinde yer alabilir ve çoğu gibi <aside> de muhtemelen bir kenar çubuğunda veya açıklama kutusunda sunulur. <aside>, complementary rolüyle aynı zamanda bir referans noktasıdır.

<article>

<main> öğesinin içine iki <article> öğesi ekledik. Ana içeriğin tek bir kelime olduğu ilk örnekte veya gerçek dünyada tek bir içerik bölümü olduğunda buna gerek yoktu. Ancak ikinci örneğimizdeki gibi bir blog yazıyorsanız her yayın, <main> içine yerleştirilmiş bir <article> içinde 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. Makaleyi, bir gazetedeki 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, örneğin dünya haberleri bölümünde yer alabilir. Gazetenin web sitesinde aynı haber makalesi ana sayfada, politika bölümünde, Okyanusya veya Asya Pasifik haberleri bölümünde ve haberin konusuna bağlı olarak spor, yaşam tarzı veya teknoloji bölümlerinde görünebilir. Makale, Pocket veya Yahoo News! gibi diğer sitelerde de görünebilir.

<section>

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

Jacinda Ardern örneğine dönersek gazetenin ana sayfasındaki banner'da gazetenin adı, ardından tek bir <main> yer alır. Bu, her biri "Dünya haberleri" ve "Siyaset" gibi bir başlığa sahip birkaç <section>'ye bölünmüştür ve her bölümde bir dizi <article> bulunur. Her <article> içinde bir veya daha fazla <section> öğesi de bulabilirsiniz. Bu sayfaya bakarsanız "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ı gibi çeşitli <section>'lere bölünür. Makalenin kendisinde ve her bölümde bir başlık vardır.

<section>, erişilebilir özellikli adı yoksa bir yer işareti değildir. Erişilebilir özellikli adı varsa örtük rolü region olur. Yer işareti rolleri, belgenin daha büyük bölümlerini tanımlamak için dikkatli bir şekilde kullanılmalıdır. Çok fazla sayıda nirengi rolü kullanmak ekran okuyucularda "gürültü" oluşturarak sayfanın genel düzeninin anlaşılmasını zorlaştırabilir. <main> öğeniz 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, altı bölüm başlığı 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 sitenin başlığı olur. <main> içine yerleştirildiğinde, <main> içindeki bir <header> içine yerleştirilmiş olsun veya olmasın, tüm sitenin değil, o 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ümler için <h2> başlıklarını kullanın ve bu alt bölümlerde bölümler varsa <h3> başlıklarını kullanın. Başlık düzeylerini atlamaktan kaçının. Bölüm başlıklarıyla ilgili iyi bir makaleyi burada bulabilirsiniz.

Bazı ekran okuyucu kullanıcıları, sayfanın içeriğini anlamak için başlıklara erişir. Başlangıçta başlıkların, MS Word veya Google Dokümanlar'ın başlıklara göre bir ana hat oluşturabilmesi gibi bir belgenin ana hatlarını oluşturması gerekiyordu ancak tarayıcılar bu yapıyı hiçbir zaman uygulamadı ve önerilen ana hat algoritması HTML spesifikasyonundan kaldırıldı. Tarayıcılar geçmişte bölümleme öğeleri içinde iç içe yerleştirilmiş <h1> öğelerini daha küçük yazı tipi boyutlarında gösterirken modern tarayıcılar bu varsayılan stilleri kaldırmıştır ve otomatik belge ana hatlarını desteklemez.

Artık MachineLearningWorkshop.com'un ana hatlarını oluşturmak için yeterli bilgiye sahipsiniz:

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

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

Hiçbir içerik parçası bağımsız ve eksiksiz bir içerik parçası olmadığından <section>, <article> etiketinden daha uygundur. Her birinin başlığı olsa da hiçbir bölüm <footer> etiketine uygun değildir.

Bu noktada 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 yapabileceğiniz semantik öğeler de vardır. Özellikleri daha ayrıntılı inceledikten sonra metinle ilgili temel bilgileri ele alırken bu konuya değinecek ve sayfa 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.