YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • aside ve div etiketi HTML'de Bölümlendirme Etiketleri
aside ve div etiketi HTML'de Bölümlendirme Etiketleri - html, html dersleri, header, header etiketi, nav, nav etiketi, section, section etiketi, aside, aside etiketi, footer, footer etiketi, div, div etiketi, html bölümlendirme etiketleri, html bölümlere ayırma, #05
Ahmet Aydın - 09/01/2021 - 45 Görüntülenme

aside ve div etiketi HTML'de Bölümlendirme Etiketleri

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de aside etiketi ve div etiketi yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

Bir önceki makalede HTML5 ile gelen bölümlendirme etiketlerini incelemiştik. Yine onlardan bir tanesi olan aside etiketinin incelemeye başlayalım.

aside Etiketi

Web sayfamızda bulunan ana içeriği destekleyici içerikleri barındıran bölümü temsil eden etikettir. Genellikle ana içerik bölümünün sağında veya solunda bir bölüm oluşturmak için tanımlamaktayız. Tüm bölümlendirme etiketlerinde olduğu gibi aside etiketi de tek başına kullanıldığında görsel olarak bir anlam ifade etmeyecektir. Konumunu belirlemek için CSS uygulamamız gerekmektedir.

div Etiketi

HTML5 ile gelen tüm bölümlendirme etiketlerine bir önceki makaleden itibaren göz atmış olduk. Peki bu etiketler gelmeden önce bölümlendirme işlemleri nasıl gerçekleştiriliyordu? Başlığımızdan çıkarabileceğiniz gibi div etiketi ile bu işlemleri gerçekleştiriyorduk ve hala da gerçekleştiriyoruz.

HTML5 ile gelen bölümlendirme etiketlerinin avantajı arama motorlarına daha iyi bilgi verebilme ve bölümlendirmeleri anlamlı hale getirmektir. Bu etiketlerin yerine sadece div etiketini kullanıp gerekli class atamalarını gerçekleştirip sorunsuz bir bölümlendirme elde edebiliriz. HTML5 ile gelen bölümlendirme etiketlerini stillendirmek için de class atamaları yapmak zorunda olduğumuzu unutmayalım.

div etiketini, örneklendirmek için açma ve kapatma etiketleri ile birlikte oluşturalım. Açma etiketinin içerisinde bulunan div ifadesinden sonra bir boşluk bırakalım ve class = “” ifadesini oluşturalım.

class Niteliği

HTML elementlerini CSS ile stillendirmek ve web sayfasını görsel anlamda zenginleştirmek için kullandığımız niteliktir. Elementlerimize class ifadesinden sonra bulunan tırnak işaretleri arasında class değerlerini yazabiliriz. class değeri birden fazla element için kullanılabilir. div etiketini anlamlı bölümlendirme uygulamak için class niteliğiyle düzenleyelim.

Örnek: class = “header-main”

class niteliğine verilen değerler tamamen tasarımcının veya geliştiricinin tercihidir. Ancak anlamlı değerleri ile bu tanımlamanın yapılması Web Tasarım ve Programlama veya Web Uygulaması Geliştirme sürecini kolaylaştıracaktır.

Yukarıdaki örnekte header-main değeri ile HTML5 ile gelen header etiketini kullanarak tanımlayabileceğimiz bir bölümü tanımlamak istediğimizi anlayabiliriz. header yanında bulunan main ifadesi ise ana header bölümünü ifade etmiş ve header-main ile tasarımcı veya geliştirici bu div bölümünün web sayfasının baş kısmını oluşturmuştur.

nav, section, aside, footer, article etiketleriyle oluşturduğumuz bölümleri yine yukarıdaki yöntemle div etiketini kullanarak da oluşturabiliriz. Hangisi daha anlamlı ve kullanışlı buna karar verirsiniz. Bence belirgin bölümler için HTML5 ile gelen ilgili bölümlendirme etiketleri, arada kalan bölümler için div etiketi kullanılabilir.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de aside etiketi ve div etiketi yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...