Html5 Yeni Taglar İle Standart Sayfa Yapısını Tasarlayalım

html5 yeni standart etiketlerin kullanımı ve sayfa yapısının tassarlanması

Html programlama dili değil içeriğin yorumlandığı kodlama yapısıdır. Yani web programlama dilleri(php,asp) ile yazılan uygulamaları kullanıcıların anlayabileceği şekilde yorumlayarak aktaran birimdir. Bizler metin, resim, video vb. gibi içerikleri html ile düzenler ve görüntüleriz.

Html5 ile standart yapıda değişiklikler meydana geldiğini biliyoruz. Özellikle arama motorlarının web sitelerini daha iyi anlayabilmesi için son yıllarda bir çok değişikliğin yaşandığını gördük. Aynı zamanda artık mobil kullanımın yaygın olması ve internet alt yapısının büyük gelişmeler göstermesiyle bu değişikliğe ayak uyduracak yeni html yorumlama etiketleri(taglar) standart olarak html5 ile kullanılmaya başlandı.

Son güncel html5 etiketlerin kullanım alanına ve kapsadığı yorumlama içeriğine de baktığımızda Seo ve Mobil içeriğin önemli olduğuna vurgu yapıldığını görüyoruz. Hatasız bir kullanımda modern bir web sitesi ve w3c standartlarında sorunsuz kodlama ile web sitelerimizi oluşturabileceğiz.

W3C uluslararası html genel standart kodlamasını kontrol eden birim olarak kabul edilmiştir. Bu nedenle hazırladığınız web sitelerinin veya kullandığınız alt yapının hatasız kodlanmış olduğunu bu sitedeki yönergeler doğrultusunda kontrol etmeniz gerekmektedir. Kontrolü en kısa yol olarak buradan yapabilirsiniz. W3C Web Site Doğrulaması.

Html Standart Sayfa Yapısı


Html5 Yeni Standart Kodlama Yapısına Giriş

Bu yazıda içerik düzenlemek için kullanılan yeni html5 sayfa yapısına değineceğiz. Sayfa içeriği oluşturulurken W3C şu kodların kullanıldığını söylemektedir;

<b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.

Bu etiketler(tag) içerisinde html5 ile yeni gelen içerik oluşturma ve düzenleme etiketlerinin kullanımına değineceğiz. Html de div etiketi ile oluşturduğumuz tüm içerik elemanlarının yerine, yeni özel etiket sistemlerini kullanacağız. Örnek vermek gerekirse;


<div class="box">

<h1>İlk Başlık</h1>

<p>Bu benim ilk içerik yazımın birinci satırıdır.</p>

</div>


Yukarıdaki içeriği kapsayan eleman div etiketinin altında yorumlanacak. Bunun gibi sayfa başlığı ve alt metin satırları artık <article></article> etiketleri altında yorumlanabilir. Zaten article Türkçe karşılığı makale demektir. Buradan esinlenerek metin içerikleriniz de artık article kullanabilirsiniz.

Eğer <h1> etiketimiz bir başlık değilde tanımlama olarak kullanılsaydı, o zaman <section></section> etiketlerini kullanabilirdik. İşte bu nokta karmaşık gibi gösterilmiş, aslında olay bu kadar basittir. Örnekle; "H1" etiketi içerisinde W3C nedir? "P" etiketi içerisinde açıklama yazacaksak: <section> etiketini kullanmak daha doğrudur.

Yukarıdaki örnek <action></action> ile yazılacak olursa;


<article class="box">

<h1>İlk Başlık</h1>

<p>Bu benim ilk içerik yazımın birinci satırıdır.</p>

</article>


Eğer tanımlama olsaydı aşağıdaki kod bloğunu kullanacaktık;


<section class="box">

<h1>İlk Başlık</h1>

<p>Bu benim ilk içerik yazımın birinci satırıdır.</p>

</section>


Html5 İçeriğimizi Oluştururken Kullanacağımız Etiketleri Tanıyalım

Yukarıdaki örnek tüm yeni etiketlerin kullanımının genel özeti niteliğindedir. Tek tek değineceğimiz etiketlerimiz ise şunlar;

header, footer, nav, main, article, section ve aside.

Yukarıdaki etiketler html standart sayfa yapısı için kullanacağımız etiketlerdir. İçerik oluşturmak için html de bir çok etiket bulunmaktadır. Bir başka konu da içerik etiketlerine de ayrıca değineceğiz.

Standart Html Sayfamızın Üst Bilgisi

Sayfa yapımızı oluşturmadan önce varsayılan üst bilgi ve html etiketlerimize bu kodlama üzerinden devam edeceğiz.


<!DOCTYPE html>

<html lang='tr'>

<head>

<meta charset='utf-8'/>

<meta content='text/html; charset=ISO-8859-9' http-equiv='Content-Type'/>

<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

<meta content='Standart Html5 Sayfa Yapısı Örneğini İçeren Html5 Kodlama Standartları' name='description'/>

<meta content='standart html,html5 standartları,html etiketleri,yeni html etiket sistemi' name='keywords'/>

<link href='images/favicon.ico' rel='icon' type='image/x-icon'/>

<link href='http://www.domain.tld' rel='canonical'/>

<title>Standart Html5 Sayfa Yapısı</title>

<link href="stylesheet.css" rel="stylesheet" media="all"/>

</head>

<body>

Web sitemizin dökümanları bu kısıma eklenecek...

</body>

</html>


Html Header Etiketi

Sayfa üst bilgisi gibi açıklama, logo, icon, menü vb. gibi içeriklerin yazdırıldığı alandır. Bir <header> etiketi <footer> veya <address> gibi etiketlerin alt elemanı olarak kullanılamaz. Header etiketinin kullanımına dair örnek verelim.


<header>

  <span class="logo fleft">LOGO</span>

  <nav>

    <ul class="navigation fright">

      <li><a href="#" title="Anasayfa">Anasayfa</a></li>

      <li><a href="#" title="Ürünler Kategorisi">Ürünler</a></li>

      <li><a href="#" title="Devam Eden ve Biten Projelerimiz">Projeler</a></li>

      <li><a href="#" title="Firma Hakkında Yazızı">Hakkımızda</a></li>

      <li><a href="#" title="Bize Ulaşın">İletişim</a></li>

    </ul>

  </nav>

</header>


Nav Etiketinin Kullanımı

Web sayfamızın tüm bağlantılarının bir yerde toplanarak ulaşımı kolaylaştırdığı üst menü gibi bağlantı elemanlarını <nav> etiketi altında toplayabiliriz.


  <nav>

    <ul class="navigation fright">

      <li><a href="#" title="Anasayfa">Anasayfa</a></li>

      <li><a href="#" title="Ürünler Kategorisi">Ürünler</a></li>

      <li><a href="#" title="Devam Eden ve Biten Projelerimiz">Projeler</a></li>

      <li><a href="#" title="Firma Hakkında Yazızı">Hakkımızda</a></li>

      <li><a href="#" title="Bize Ulaşın">İletişim</a></li>

    </ul>

  </nav>


Main Etiketinin Kullanımı

Main etiketi web sayfamızda ana içeriği belirleyen metin,resim,video vb. gibi içerikleri kapsayan etikettir. Main, <article>, <section> gibi etiketlerin alt etiketi olarak kullanılamaz. Ancak bu etiketlerin tümünü kapsayabilir.


<main>

  <section>

    <h1>Standart html etiketleri: Main</h1>

    <p>Main etiketi genel sayfa içeriği elemanlarını kapsar.</p>

  </section>



  <article>

    <h1>Birinci Başlık</h1>

    <p>Birinci başlık ile ilgili açıklamalar.</p>

  </article>



  <article>

    <h1>Birinci Başlık</h1>

    <p>Birinci başlık ile ilgili açıklamalar.</p>

  </article>



  <article>

    <h1>Birinci Başlık</h1>

    <p>Birinci başlık ile ilgili açıklamalar.</p>

  </article>

</main>


Article Etiketinin Kullanımı

İçeriklerimizi bu etiket altında sarabiliriz. Article kullanım alanına forum mesajları, blog yazıları, makaleler, yorumlar gibi içerikleri örnek verebiliriz.


<article>
  <h1>Birinci Başlık</h1>
  <p>Birinci başlık ile ilgili açıklamalar.</p>
</article>

Section Etiketinin Kullanımı

Web sayfamızın üst bilgi, alt bilgi veya metin içeriğine girmeden kısa bir üst başlık ve tanımlama yapılacaksa kullanılır. Karışık gibi gösterilen <section> etiketi aşağıda ki örnekle ve yukarıda verdiğimiz tanımlama ile net bir şekilde anlaşılabilir.


<section>

  <h1>Standart html etiketleri: Main</h1>

  <p>Main etiketi genel sayfa içeriği elemanlarını kapsar.</p>

</section>


Aside Etiketinin Kullanımı

Türkçe karşılığı "kenara" olarak çevirebileceğimiz <aside> etiketi web sayfamızın sol veya sağ kenarında oluşturduğumuz içeriği kapsar. Link yada metin içerik olabilir.


<aside class="col-4">
  <section>
    <h1>Aside Etiketinin Kullanımı</h1>
    <p>Aside etiketi kenar içeriğimizin kullanımı için uygundur.</p>
  </section>
</aside>

Footer Etiketinin Kullanımı

<footer> etiketi web sayfamızın alt bilgilerini içeren bölümü kapsamaktadır. Footer genel olarak oluşturulduğu içeriğe bakarsak;

  • Yazar Hakkında Bilgiler,
  • Telif Hakları Bilgileri
  • Bilgi Sayfaları,
  • İletişim Bilgileri,
  • Geri Dönüş Bağlantıları,
  • Site Haritası,
  • Sosyal Hesap Bağlantıları,
  • Benzer Sayfalar vb. gibi içerik ve bağlantılardan oluşmaktadır.

<footer>

  <p>Hazırlayan ve Düzenleyen: ozkiremitci</p>

  <p>İletişime Geçin: <a href="mailto:mail@domain.tld">mail@domain.tld</a>.</p>

</footer>


Footer etiketinin tanımıyla beraber standart web sayfası oluştururken en önemli etiketlerin tanımlamalarına ve örneklere yer verdik. Bu etiketler içerisinde yalnız tek sefer kullanılması mantıklı olan etiketler olduğu gibi birden çok kullanılmasında sorun oluşturmayacak etiketlerde var. Örneğin sayfa üst ve alt bilgilerinin oluşturulduğu <header>, <footer> etiketlerinin yalnız bir defa kullanılması o sayfanın arama motorları tarafından da daha iyi yorumlanmasını sağlayacaktır. <nav> etiketi sayfamızın üst menülerini oluşturuyorsa her sayfada menüyü yalnız bir defa kullanmak daha mantıklıdır. Öte yandan içerikleri oluştururken <article>, <section> etiketleri <p> etiketi gibi düşünülebilir.

Head etiketleri olan <h1>, <h2>, <h3>... için kullanım sayısı soruluyor. Bu etiketlerin arama motorları açısından kullanımı faydalıdır. Google gibi arama motorları bu etiketlerin kullanılmasını istiyorlar. Yalnız ne Google' da ne de başka bir arama motorunda bu etiketlerin sayısı hakkında bir bilgi verilmemektedir. Çeşitli seo açıklamalarında ise h1 bir adet, h2 bir veya iki adet, h3 üç-altı arası gibi rakamlar konuşulmaktadır. Sizde bu sayılara riayet edebilirsiniz. Sonuçta bir web sayfası bir başlık ve bir meta açıklamasından oluşmaktadır.

Yukarıdaki örnekleri tek bir dokümanda birleştirerek yazımı sonlandırıyorum. Kaynak olarak kullanabilirsiniz. Başka bir yazı da görüşünceye dek hoş çakalın.

https://jsfiddle.net/kodinternet/0L9c8mdd/

Kaynaklar
http://www.w3schools.com/tags/ref_byfunc.asp
https://w3c.github.io/html/dom.html#kinds-of-content-phrasing-content
https://validator.w3.org/
https://tr.wikipedia.org/wiki/HTML
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content

2 yorum

  1. Paylaşımınız için teşekkürler. Kurumsal Web Tasarımı yaparken artık tarayıcıların desteklemediği kodların kullanılmaması, güncelliğe uyulması gerekiyor.

    YanıtlaSil

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0