# HTML5'te Yapısal Etiketler

Kaynak: https://webodasi.com/html5te-yapisal-etiketler-nelerdir-nasil-kullanilir/
Yazar: Meryem Işık
Yayın: 2020-06-25
Güncelleme: 2020-07-14

Önceki derslerimizde  **HTML5'te Anlamsal Etiketler** nelerdir kısaca açıklamıştık. Bugünkü yazımızda  **HTML'te yapısal etiketler**  nelerdir, nasıl kullanılır bunlardan bahsedeceğiz. Bir görselle birlikte başlayalım.

 

![HTML5 yapısal etiketler](https://webodasi.com/wp-content/uploads/2020/07/1.gif)

 

Yukarıda HTML5 öncesine ve sonrasına ait bir görselimiz var. HTML5 sonrasında gelen etiketlerle birlikte kodların ne kadar sadeleştiğini görebiliyoruz. Şimdi bu etiketler ne işe yarar nasıl kullanılır birlikte inceleyelim.

 

#### **Header Etiketi**

 

Sayfamızın başlığını ifade eder. Genellikle sayfamızın en üstünde ya da solunda yer alır. Sitemize ait logo, navigasyon menüleri, sosyal medya butonları, ticari sitelerde üye girişi, sepetim gibi alanların yer aldğı etikettir. Nasıl kullanılır?

 

```
<header style="background-color: pink">
    <img src="images/logo.png" width="150px" height="120px"/> 
    <h1 >Sayfamıza ait başlık, logo, navigasyon menülerinin  yer aldığı kısımdır.</h1>
</header>
```

 

![HTML5' yapısal etiketler header etiketi](https://webodasi.com/wp-content/uploads/2020/06/header-1024x93.png)

 

#### **Nav Etiketi**

 

Açılımı  *navigation* 'dur. Dilimizde navigasyon(yönlendirme) anlamına gelir. Sitemize ait menülerin yer aldığı etikettir. Nasıl kullanılır?

 

```
 <nav>
     <ul>
         <li><a href="main.html">Anasayfa</a></li>
         <li><a href="about.html">Hakkımızda</a></li>
         <li><a href="references.html">Referanslar</a></li>
         <li><a href="contact.html">İletişim</a></li>
     </ul>
</nav>
```

 

![HTML5 yapısal etiketler nav etiketi](https://webodasi.com/wp-content/uploads/2020/06/nav.png)

 

Kodlarımızda CSS kullanmadığımız için tarayıcı ekranında liste olarak karşımıza çıkıyor. Dilerseniz[CSS derslerine](https://webodasi.com/css-nedir-ne-ise-yarar-css-kullanmanin-avantajlari/) göz attıktan sonra istediğiniz gibi biçimlendirebilirsiniz.

 

Dört tane menümüz var. Bu menülerden birine tıkladığımız zaman hangi .html sayfasının çalışmasını istiyorsak href="" kısmına çalışmasını istediğimiz dosyanın adını yazıyoruz. Örneğin burda anasayfa menüsüne tıklandığı zaman main.html sayfası çalışacak. Örneğimizde tüm dosya uzantıları .html şeklinde ama dosya uzantıları .html olmak zorunda değil.

 

#### **Article Etiketi**

 

Article, makale anlamına gelmekte. Sitemizde yer almasını istediğimiz yazıları bu etiket içersine yazarız. Nasıl kullanılır?

 

```
<article>
  <h1>CSS Nedir?</h1>
  <p>
     Açılımı “Cascading Style Sheets” olan CSS basitçe, sayfamızın içinde 
     bulunan tüm görsel yapıyı düzenlememizi sağlayan bir işaretleme 
     dilidir.
  </p>
</article>
```

 

#### **Section Etiketi**

 

Dilimizde *kısım*  anlamına gelir. Bazen tasarımda o kadar çok <div> etiketini kullanırız ki bu div'lerin birbirleri ile karışmaması için <section> etiketine başvuruyoruz. Örneğin;

 

```
<section>
    <div>
        <p>Birinci section birinci paragraf</p>
    </div>
    <div>
        <p>Birinci section ikinci paragraf</p>
    </div>
</section>
<section>
    <div>
        <p>İkinci section birinci paragraf</p>
    </div>
    <div>
        <p>İkinci section ikinci paragraf</p>
    </div>
</section>
```

 

![HTML5'te yapısal etiketler section etiketi
](https://webodasi.com/wp-content/uploads/2020/06/section.png)

 

#### **Aside Etiketi**

 

Sayfanın  *sidebar*  olarak tanımlanan  *yan taraf* ını belirtir. Sayfanın sağında ya da solunda yer alır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram kutusu, anketler, sabit bağlantılar ve reklam alanı (  *banner*  ) yer alır.

 

#### Footer Etiketi

 

Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, "hakkımızda", "iletişim" gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.

 

#### Figure ve Figcaption Etiketi

 

Sitedeki görsellerin figure etiketi içinde kullanılması tavsiye edilmektedir. Figcaption, görselin başlığını belirtmek için kullanılır. Örneğin;

 

```
<figure>
  <img src="lake.png" alt="Van" width="304" height="228">
  <figcaption>Van Gölü</figcaption>
</figure>
```

 

Bugünkü yazımızda **HTML5'te yapısal etiketler**  konusuna değindik. Dilerseniz [linkteki](https://www.youtube.com/watch?v=T_IcfGuaeGc)videodan konu tekrarı yapabilirsiniz.