HTML & CSS için Başlangıç ​​(Bölüm 18): Web için Anlamsallık (1)

"Semantik Web" terimi artık neredeyse şişirilmiş bir şekilde kullanılmaktadır. Ancak pek çok insan bu övülen anlamın ne anlama geldiğinin farkında değil. Aslında çok basittir: Semantik sayesinde dev veri miktarlarından gerçekten gereken/arzu edilen bilgiler çıkarılabilir.

Anlamlı bir örnek, Semantiğin önemini göstermelidir. Dijital fotoğraflar harika bir şeydir. Çekimden hemen sonra internet aracılığıyla dünyaya yayılabilirler. Özel alanlarda geçerli olan şey, uzun zamandır profesyonel ortamda da yerleşmiştir. Resim ajansları, müzeler, kütüphaneler ve fotoğrafçılar, değerli metinlerin dijital versiyonları dahil fotoğraf, resim veya diğer içerikleri profesyonel görüntü veritabanlarında sunmaktadır. İlgili web sitelerinde arama maskeleri bulunur ve platformun bu maskeler aracılığıyla taranabilir. Web 2.0'daki en popüler resim arama motoru örneği, kuşkusuz Flickr'dır.



Bu tür resim arama motorlarını kullananlar, sınırlarını bilirler: Örneğin "Lahana" terimini girdiğinizde, farklı alanlardan fotoğraflar görürsünüz. Yahoo! Görsel araması, örneğin, bir lahana baykuşu, Lahana adında bir tenis oyuncusu ve eski şansölye Helmut Kohl'un fotoğraflarını göstermektedir.

Burada klasik WWW'nin eksilerinden biri açıkça ortaya çıkmaktadır: Şu anda sunulan bilgiler insanlar tarafından anlaşılabilirken, makineler - bu örnekte arama motorları - doğru şekilde yorumlayamamaktadır. Makineler, bilgi gerçekten varsa bilgiyi sadece okuyabilirler. Ve işte Semantik oyununun devreye girdiği nokta burasıdır.

Belgeleri Yapılandırma

Eski HTML sürümlerinde belgeleri anlamsal olarak yapılandırmanın bir yolu yoktu. Web sayfasını yapılandırmak istediğinizde genellikle yalnızca başlıklar ve metin paragrafları vardı. İşte klasik bir web sayfası yapısının tipik bir örneği:

<h1>
   Başlık
</h1>
<p>
   Paragraf
</p>
<h2>
   Alt Başlık
</h2>
<p>
   Alt başlık paragrafı
</h2>
<h3>

Belgeyi yapılandırmak için HTML, h1 ila h6 elementlerini sağlar. Bununla birlikte, gerçekten çok derin bir yapılandırma sağlamak mümkün değildir. Çünkü HTML'de bir h7 veya h8 öğesi bulunmamaktadır. İşte tam bu noktada HTML5 devreye girer ve bazı ek yapılandırma elementleri ekler.

• article

• aside

• dialog

• figure

• footer

• header

• nav

• section

Bu elementler bu eğitimde tanıtılacaktır. Ancak önce şunu belirtmek gerekir: Bu elementlerden optik açıdan mucizeler beklemeyin. Çünkü semantik elementlere dayalı web sayfalarının hoş görünmesi için CSS kullanılmalıdır. Ve bunun için daha sonra döneceğiz. Birçok anlamsal elementi zaten görmüş olabilirsiniz, hatta bunların başlangıçta Semantikle bir ilgisi olmadığı görünebilir. İşte böyle bir öğe örneği:

<progress min="0" max="100" value="40"></progress>

Bu bir yükleme çubuğu oluşturur. (progress öğesi bu seride detaylı bir şekilde tanıtılmıştı.)

Bu öğe, içeriklerin tanımlandığı bir bağlam oluşturabildiği için, ne kadar az çaba harcanarak içerikler oluşturulabileceğini gösterir. Yazılım için doğrudan bir yükleme çubuğu olduğu hemen anlaşılır. JavaScript kullanarak bir yükleme çubuğu oluşturmanın çözümlerinde, bu durum geçerli değildir.

Anlamsal Öğe Yapıları

"Normal" HTML belgelerinde, içeriklerin yapılandırılması için genellikle div öğelerine başvurulur. Bu öğelere biçim vermek için CSS kullanmak için bunlara sınıflar veya kimlikler atanır. Bu ilkeyi HTML5'te de kullanabilirsiniz. Aslında Google tarafından yapılan bir anket, belgelerde genellikle aynı sınıfların kullanıldığını gösterdi.

<div class="nav"></div>

Birçok geliştirici, örneğin navigasyonu bu div öğesine yerleştirmek için nav kullanır. Ancak HTML5'te durum şöyle görünmektedir:

<nav>İçerik</nav>

nav öğesi sayesinde, yalnızca bir hyperlink listesi olmadığı açıktır. Aslında bu öğe, web sitesinin navigasyonu hakkında bilgileri belirli bir bağlamda içeren bir içerik bloğunu tanımlar.

Modern Yapılandırma

Aslında bir HTML belgesinin yapısı genellikle nasıldır? Genel olarak, sayfanın içeriğine bağlı olarak fark etmeksizin benzerdir. Çoğu zaman aşağıdaki bölgeler bulunmaktadır:

• Üst kısım

• Ana menü

• İçerik alanı

• Alt kısım

Yapılandırma için div öğelerine başvuran bir web sitesi şu şekilde olabilir:

<body>
   <div id="header">
     <div id="logo">Logo</div>
     <div id="search">Arama</div>
     <div id="nav">Ana Menü</div>
   </div>
   <div id="content">
     <h1>Burada İçerik Var</h1>
     <div class="section">
       <h2>Alt Başlık</h2>
       <h3>Bölüm</h3>
       <!-- Burada içerik bulunmaktadır -->
     </div>
     <div class="section">
       <h2>Alt Başlık</h2>
       <!-- Burada içerik bulunmaktadır -->
     </div>
   </div>
   <div id="sidebar">
     <div id="subnav">Alt Menü</div>
   </div>
   <div id="footer">Alt Bilgi Alanı</div>
 </body>

Bu tür div yapılarını belki daha önce görmüşsünüzdür. Geliştiriciler için yapıyı mantıklı kılmak için, "div" alanlarına anlamlı adlar taşıyan uygun sınıflar veya kimlikler atarlar. Böylece geliştiriciler için örneğin, "footer" kimliğine sahip "div" alanında sayfanın alt bilgi alanına ait olan içeriklerin bulunduğu açıktır. Ancak bu durumda olan sorun şudur: İsimler web sitesinin yapısını tahmin etmenizi sağlasa da, web sitesi semantik olarak yapılandırılmış değildir. İşte tam da burada yeni HTML öğeleri devreye girer. Çünkü bunlar belgelerin veya web sitelerinin gerçekten yapılandırılmasını sağlarlar.

Daha iyi anlamak için aşağıdaki HTML5 belgesine bir göz atın:

<body>
   <header>
     <div id="logo">Logo</div>
     <div id="search">Arama</div>
     <nav>Ana Menü</nav>
   </header>
   <article>
     <h1>Bu İçeriktir</h1>
     <section>
       <h2>Alt Başlık</h2>
       <h3>Bölüm</h3>
       <!-- Burada içerik bulunmaktadır -->
     </section>
     <section>
       <h2>Alt Başlık</h2>
       <!-- Burada içerik bulunmaktadır -->
     </section>
   </article>
   <aside>
     <nav>Alt Menü</nav>
   </aside>
   <footer>Alt Bilgi Alanı</footer>
 </body>

Tabii ki, bu kullanılan öğelerle ilgili olanları daha sonra detaylı olarak ele alacağım. Ancak bu örneğe bir göz atmak bile, kullanılan öğelerin avantajlarının nerede olduğunu göstermektedir. Artık sayfa alanlarını, özel olarak bu alanlar için tasarlanmış olan öğelerle işaretleyebilirsiniz. Sayfanın üst kısmına ait olan her şey, "header" öğesine entegre edilebilir.

Ayrıca artık "section" ve "article" öğeleri mevcuttur, gerçek sayfa içeriğini çok daha iyi yapılandırabilirsiniz. Gördüğünüz gibi, HTML5'in belgelerin semantik yapılandırılması konusundaki sunmuş olduğu imkanlara detaylı bir şekilde bakmanın faydalı olacağı anlaşılıyor.