Her seferinde div etiketlerini kullanmanıza gerek yoktur. Sitenizi daha yapılandırılmış ve erişilebilir hale getirmek için bu anlamsal HTML etiketlerini kullanın.
Anlamsal HTML'nin tanıtılmasından önce, geliştiriciler içeriği düzenlemek için div'leri kullandılar. Div öğelerinin kendi başlarına bir anlamı yoktur. Yalnızca stilleri uygulamak ve içeriği düzenlemek için bir yol sağlarlar.
Semantik kelimesinin anlamı anlam ile ilgili. Anlamsal HTML öğeleri, içeriklerinin amacını tanımlar. Geliştiriciye, kullanıcıya, arama motorlarına ve yardımcı teknolojilere anlam katarlar. İşte bir sonraki projenizde kullanabileceğiniz popüler semantik HTML etiketlerinin bir listesi.
Div Nedir?
HTML'de div (bölme) öğesi, blok düzeyinde bir kapsayıcıdır. Bir web sayfasındaki HTML öğelerini gruplandırmak veya bölümlere ayırmak için bir div kullanırsınız. Sözdizimi aşağıda gösterildiği gibidir:
<div>
div>
Semantik HTML Öğelerini Div'ler Üzerinden Kullanmanın Yararları
HTML5, kodu okumayı kolaylaştırmak için semantik HTML öğelerini tanıttı. Anlamsal öğeler, web içeriğine anlam ve yapı sağlar.
Kodunuzu diğer geliştiriciler için anlaşılır hale getirirler. Ayrıca, arama motorlarının içeriğinizi bulmasını ve sitenize trafik çekmesini kolaylaştırır. Burada kullanabileceğiniz bazı semantik öğeler HTML ve CSS projeleri.
1.
bu etiketi, bir belgedeki başlık bölümünü tanımlar. Tipik olarak, site logosunu, gezinmeyi ve sayfanın başlığını içerir. Bir web sayfasının üst kısmında görünen bölümdür. Başlığı ihtiyacınıza göre özelleştirebilirsiniz. Sözdizimi aşağıdaki gibidir:
<vücut><başlık>
<h1> Merhaba!h1>
<P>ben bir başlığımP>
başlık>
vücut>
2.
bu etiketi, web sitesi için gezinme bağlantılarını içerir. Bunlar menüler, içindekiler tablosu veya dizinler olabilir. Genellikle içine yerleştirilir etiket. Sözdizimi aşağıdaki gibidir:
<başlık><gezinme>
<Ul>
<li>Web site bağlantılarımli>
<li><Ahref="#"> EvA>li>
<li ><Ahref="#"> Hakkımızda A>li>
Ul>
gezinme>
<h1>Yukarıdaki, web sitemin gezinme kısmıdır.h1>
başlık>
Tarayıcıda şöyle görünecek:
Gibi CSS düzen modellerini kullanabilirsiniz. CSS esnek kutusu hizalamak için
3.
bu etiketi, web sayfasının ana içeriğini içerir. İçeriği başlık, kenar çubuğu ve alt bilgiden ayırır. Ana, baskın içeriği temsil eder. bölüm.
<vücut><başlık>
<başlık> Web sitesi gerçekleri başlık>
başlık>
<ana>
<P> Bu web sitesi, ana etiketin nasıl çalıştığının kısa bir gösterimidir.P>
<P> Web sitesinin yararlı içerik içeren kısmını çevreler.P>
ana>
<altbilgi>
<h3> Bu bir alt bilgi h3>
altbilgi>
vücut>
Şu şekilde görünür:
4.
Kullan Bir belgede veya web sitesinde bağımsız bölümleri tanımlamak için etiket. Örneğin, bunları blog gönderilerini, dergileri veya ürün kartlarını yapılandırmak için kullanabilirsiniz. bu öğesi, diğer makaleler, bölümler ve başlıklar dahil olmak üzere diğer öğeleri içine alabilir. Ekteki öğeler makale konusuyla ilgili olmalıdır.
<madde>
<h1>Kurgudan Daha Yabancıh1><madde>
<h3>giriişh3>
<P>Bu kitapta anlatılan olay ve kişiler tamamen hayal ürünüdür.P>
madde>
<madde>
<h3>Birinci bölümh3>
<P> Gün parlaktı ve güneş gökten gülümsediP>
madde>
madde>
Öyle görünüyor:
5.
bu etiketi, ana içerikle ilgili içeriği içerir. Alıntılar, yorumlar veya duyurular için kenar çubukları oluşturmak üzere bu etiketi kullanın. okuyucunun gözden kaçırabileceği bilgileri vurgular. İçeriğin geri kalanından sıyrılıyor.
html><html>
<stil>
vücut{
arkaplan rengi:#abdbe3;
}
kenara {
genişlik: %30;
sol dolgu: 0.5rem;
sol kenar boşluğu: 1rem;
esnek: sol;
kutu gölgesi: iç metin 5px 0 5px -5px yeşil;
yazı tipi stili: italik;
kırmızı renk;
}
kenara > p {
marj: 0.5rem;
stil>
<vücut>
<ana>
<h1> Dokumacı Kuşlarh1>
<P>Ploceidae, küçük ötücü kuşlardan oluşan bir ailedir. Birçoğuna dokumacılar, dokumacı kuşları, dokumacı ispinozları ve piskoposlar denir.P>
<kenara>
<P>Krallık: Hayvanlar
Şube: ChordataP>kenara>
<P>En son sınıflandırmalarda, Ploceidae bir sınıftır, tarihsel olarak aileye yerleştirilmiş bazı kuşları hariç tutar. Serçelerden bazıları, ancak Amblyospizinae monotipik alt familyasını içerir.P>
ana>
vücut>
html>
6.
bu öğesi, belirli bir anlamsal öğe içermeyen sayfanın bir bölümünü içerir. Bölümler, içeriği tanıtmak ve diğer HTML öğelerini içine almak için bir başlığa sahip olabilir. bir kitap veya blogdaki bölümler gibi bir web sayfasının bileşenlerini temsil eder.
html><html>
<vücut>
<h1>İncilh1>
<bölüm>
<h2>giriişh2>
<P>İncil, Hristiyanlık, Yahudilik ve Samaritanizm'de kutsal olan dini yazıların bir koleksiyonudur. İncil bir antolojidir – çeşitli formlardaki metinlerin bir derlemesi – orijinal olarak İbranice, Aramice ve Koine Yunanca olarak yazılmıştır.P>
bölüm>
<bölüm>
<h2>Birinci Bölüm: Yaratılışh2>
<P>Yaratılış Kitabı, İbranice İncil'in ve Hıristiyan Eski Ahit'in ilk kitabıdır. İbranice adı, ilk kelimesi olan Bereshit ile aynıdır. Yaratılış, dünyanın yaratılışının, insanlığın erken tarihinin ve İsrail'in atalarının ve Yahudi halkının kökenlerinin bir anlatımıdır.P>
bölüm>vücut>
html>
Öyle görünüyor:
7.
bu öğe, resimler veya diyagramlar gibi bağımsız çizimleri kapsar. Bu çizimler, ana sayfadaki içeriğe atıfta bulunmaktadır. Rakamlar, tarafından belirtilen başlıklarla birlikte gelir. eleman. bu görüntünün ne hakkında olduğunu açıklar. bu
html><html>
<vücut>
<ana>
<bölüm>
<h1>Bilgisayarın Parçalarıh1>
<P> Bir bilgisayarı oluşturmak için birlikte çalışan birkaç parça vardır.P>
<figür>
<imgkaynak="bazı-url.jpg"alternatif="Bilgisayar faresi">
<şekil yazısı>Bu bir bilgisayar faresişekil yazısı>
figür>
bölüm>
ana>
vücut>
html>
Daha ileri gidebilir ve öğrenebilirsiniz duyarlı görüntüler nasıl oluşturulur HTML'de.
bu HTML öğesi, web sayfasının alt kısmındaki bilgileri içerir. Bunun tam tersi eleman. bu sayfanın sahibi hakkında bilgi içerebilir. Buna telif hakkı verileri veya sitenin ek bilgilerine bağlantılar dahildir.
html><html>
<vücut>
<ana>
<bölüm>
<h1>Bilgisayarın Parçalarıh1>
<figür>
<imgkaynak="bazı-url.jpg"alternatif="Bilgisayar faresi">
<şekil yazısı>Bu bir bilgisayar faresişekil yazısı>
figür>
bölüm>
ana>
<altbilgi>
<P> ComputerTech tarafından üretilmiştir © 2023P>
altbilgi>
vücut>
html>
Yukarıdaki kod, dosyaya bir alt bilgi ekler. Bilgisayarın Parçaları aşağıdaki resimde gösterildiği gibi sayfa.
Anlamsal HTML Öğelerini Neden Kullanmalı?
Anlamsal HTML öğelerini kullanmak, koda bağlam sağlar. Koda bakan herkes kolayca anlayabilir. Etiketler, öğelere stil vermeyi ve projeler üzerinde işbirliği yapmayı kolaylaştırır.
Anlamsal HTML'yi ön uç kitaplıkları ve çerçeveleriyle kullanabilirsiniz. Çoğu modern web tarayıcısı, geleneksel öğeler yerine semantik HTML öğelerini tercih eder. Semantik HTML kullanmaya başlayın ve kodunuzun modern, okunabilir ve şık görünmesini izleyin.
