Bugün sahip olduğumuz sektörden sorumlu olan Web Standartları hareketinin önemli bir ilkesi, HTML öğelerini tarayıcıda varsayılan olarak nasıl göründüklerinden ziyade ne oldukları için kullanma fikridir. Bu, Semantik HTML kullanımı olarak bilinir.
Anlamsal HTML nedir
Anlamsal HTML veya semantik işaretleme, sunum yerine web sayfasına anlam katan HTML'dir. Örneğin, bir
etiketi ilişikteki metnin bir paragraf olduğunu belirtir.
Bu hem semantik hem de sunum amaçlıdır, çünkü insanlar hangi paragrafların olduğunu ve tarayıcıların bunları nasıl görüntüleyeceğini bilirler.
Bu denklemin ters yüzünde, ve gibi etiketler semantik değildir, çünkü metnin yalnızca nasıl göründüğünü (kalın veya italik) tanımlarlar ve işaretlemeye herhangi bir ek anlam kazandırmazlar.
Anlamsal HTML etiketlerinin örnekleri,
ile , , ve başlık etiketlerini içerir. Standartlara uygun bir web sitesi oluştururken kullanabileceğiniz çok daha fazla semantik HTML etiketi vardır.
Anlambilimden Neden Olmalı?
Anlamsal HTML yazmanın yararı, herhangi bir web sayfasının sürüş amacı ne olmalıdır - iletişim arzusu kaynaklanıyor. Belgenize semantik etiketler ekleyerek, iletişimde yardımcı olan o belge hakkında ek bilgi sağlarsınız. Özellikle, semantik etiketler, bir sayfanın ve içeriğinin ne anlama geldiğini tarayıcıya açık hale getirir.
Bu açıklık, arama motorlarıyla da iletilir ve doğru sayfaların doğru sorgular için iletilmesini sağlar.
Semantik HTML etiketleri, bu etiketlerin içerikleriyle ilgili olarak, bir sayfada nasıl göründüğünün ötesine geçen bilgiler sağlar. etiketinde bulunan metin, tarayıcı tarafından bir tür kodlama dili olarak hemen tanınmaktadır.
Bu kodu oluşturmaya çalışmak yerine, tarayıcı bu metni bir makale veya bir çeşit çevrimiçi eğitim amacıyla bir kod örneği olarak kullandığınızı anlar.
Anlamsal etiketleri kullanmak, içeriğinizi şekillendirmek için daha fazla kanca sağlar. Belki de bugün kod örneklerinizi varsayılan tarayıcı stilinde görüntülemeyi tercih edersiniz, ama yarın gri bir arka plan rengiyle onları çağırmak ve daha sonra kullanmak istediğiniz tek aralıklı font ailesini veya font yığınını tanımlamak istersiniz. Numunelerin Tüm bunları, semantik işaretleme ve akıllıca uygulanan CSS kullanarak kolayca yapabilirsiniz.
Doğru Semantik Etiketleri Kullanın
Anlamsal etiketler, sunum amaçlı değil, anlam aktarmak için kullanmak istediğinizde, ortak ekran özellikleri için bunları yanlış kullanmamanız konusunda dikkatli olmanız gerekir. En yaygın olarak kullanılan semantik etiketlerden bazıları şunlardır:
- blockquote - Bazı kişiler, teklif olmayan metin girintisi için etiketini kullanır. Bunun nedeni, blokquotes varsayılan olarak girintili olmasıdır. Girintiden faydalanmak istiyorsanız, ancak metin bir blok alıntı değilse, bunun yerine CSS kenar boşluklarını kullanın.
- p - Bazı web editörleri, o sayfadaki metnin gerçek paragraflarını tanımlamak yerine sayfa öğeleri arasında fazladan boşluk eklemek için
& nbsp; p> (paragrapide bulunan boş alan) kullanır. Önceden belirtilen girintili örnekte olduğu gibi, boşluk eklemek için kenar boşluğu veya dolgu stili özelliğini kullanmalısınız.
- ul - Blockquote gibi, bir
etiketinin içine metin ekleyerek çoğu tarayıcıdaki metni girintiler. Bu, yalnızca - etiketleri bir
etiketi içinde geçerli olduğundan, hem yanlış hem de geçersiz HTML'dir. Yine, metni girintilemek için kenar boşluğu veya dolgu stilini kullanın.
- h1 – h6 - Başlık etiketleri yazı tiplerini büyütmek ve büyütmek için kullanılabilir, ancak metin bir başlık değilse, bir başlık etiketinin içinde olmamalıdır. Sayfanızdaki belirli bir metnin boyutunu veya ağırlığını değiştirmek isterseniz font-weight ve font-boyut CSS özelliklerini kullanın.
Anlamı olan HTML etiketlerini kullanarak, her şeyi yalnızca
etiketleriyle çevrelemekten daha fazla bilgi veren sayfalar oluşturursunuz.
Hangi HTML Etiketleri Semantik?
Neredeyse her HTML4 etiketinin ve tüm HTML5 etiketlerinin anlamsal bir anlamı olsa da, bazı etiketler öncelikle doğada semantiktir.
Örneğin, HTML5, ve etiketlerinin anlamını anlamlandırır. etiketi fazladan bir önem taşımamaktadır, ancak genellikle kalın yazılmış metinlerdir. etiketi ayrıca ekstra önem veya vurgu taşımamaktadır, ancak tipik olarak italik olarak yazılmış metni tanımlar.
Anlamsal HTML Etiketleri
Kısaltma Kısaltma
Uzun tırnak Tanım Belgenin yazar (lar) ı için adres alıntı
Kod referansı Teletype metni Mantıksal bölüm Genel satır içi stil kapsayıcısı Silinen metin Eklenen metin vurgu Güçlü vurgu
Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci seviye başlık
Altıncı seviye başlık
Tematik mola Kullanıcı tarafından girilecek metin
Önceden biçimlendirilmiş metin Kısa satır içi tırnak Örnek çıkış Alt simge Üst simge Değişken veya kullanıcı tanımlı metin
, ve başlık etiketlerini içerir. Standartlara uygun bir web sitesi oluştururken kullanabileceğiniz çok daha fazla semantik HTML etiketi vardır.
Anlambilimden Neden Olmalı?
Anlamsal HTML yazmanın yararı, herhangi bir web sayfasının sürüş amacı ne olmalıdır - iletişim arzusu kaynaklanıyor. Belgenize semantik etiketler ekleyerek, iletişimde yardımcı olan o belge hakkında ek bilgi sağlarsınız. Özellikle, semantik etiketler, bir sayfanın ve içeriğinin ne anlama geldiğini tarayıcıya açık hale getirir.
Bu açıklık, arama motorlarıyla da iletilir ve doğru sayfaların doğru sorgular için iletilmesini sağlar.
Semantik HTML etiketleri, bu etiketlerin içerikleriyle ilgili olarak, bir sayfada nasıl göründüğünün ötesine geçen bilgiler sağlar. etiketinde bulunan metin, tarayıcı tarafından bir tür kodlama dili olarak hemen tanınmaktadır.
Bu kodu oluşturmaya çalışmak yerine, tarayıcı bu metni bir makale veya bir çeşit çevrimiçi eğitim amacıyla bir kod örneği olarak kullandığınızı anlar.
Anlamsal etiketleri kullanmak, içeriğinizi şekillendirmek için daha fazla kanca sağlar. Belki de bugün kod örneklerinizi varsayılan tarayıcı stilinde görüntülemeyi tercih edersiniz, ama yarın gri bir arka plan rengiyle onları çağırmak ve daha sonra kullanmak istediğiniz tek aralıklı font ailesini veya font yığınını tanımlamak istersiniz. Numunelerin Tüm bunları, semantik işaretleme ve akıllıca uygulanan CSS kullanarak kolayca yapabilirsiniz.
Doğru Semantik Etiketleri Kullanın
Anlamsal etiketler, sunum amaçlı değil, anlam aktarmak için kullanmak istediğinizde, ortak ekran özellikleri için bunları yanlış kullanmamanız konusunda dikkatli olmanız gerekir. En yaygın olarak kullanılan semantik etiketlerden bazıları şunlardır:
- blockquote - Bazı kişiler, teklif olmayan metin girintisi için etiketini kullanır. Bunun nedeni, blokquotes varsayılan olarak girintili olmasıdır. Girintiden faydalanmak istiyorsanız, ancak metin bir blok alıntı değilse, bunun yerine CSS kenar boşluklarını kullanın.
- p - Bazı web editörleri, o sayfadaki metnin gerçek paragraflarını tanımlamak yerine sayfa öğeleri arasında fazladan boşluk eklemek için
& nbsp; p> (paragrapide bulunan boş alan) kullanır. Önceden belirtilen girintili örnekte olduğu gibi, boşluk eklemek için kenar boşluğu veya dolgu stili özelliğini kullanmalısınız.
- ul - Blockquote gibi, bir
etiketinin içine metin ekleyerek çoğu tarayıcıdaki metni girintiler. Bu, yalnızca - etiketleri bir
etiketi içinde geçerli olduğundan, hem yanlış hem de geçersiz HTML'dir. Yine, metni girintilemek için kenar boşluğu veya dolgu stilini kullanın.
- h1 – h6 - Başlık etiketleri yazı tiplerini büyütmek ve büyütmek için kullanılabilir, ancak metin bir başlık değilse, bir başlık etiketinin içinde olmamalıdır. Sayfanızdaki belirli bir metnin boyutunu veya ağırlığını değiştirmek isterseniz font-weight ve font-boyut CSS özelliklerini kullanın.
Anlamı olan HTML etiketlerini kullanarak, her şeyi yalnızca
etiketleriyle çevrelemekten daha fazla bilgi veren sayfalar oluşturursunuz.
Hangi HTML Etiketleri Semantik?
Neredeyse her HTML4 etiketinin ve tüm HTML5 etiketlerinin anlamsal bir anlamı olsa da, bazı etiketler öncelikle doğada semantiktir.
Örneğin, HTML5, ve etiketlerinin anlamını anlamlandırır. etiketi fazladan bir önem taşımamaktadır, ancak genellikle kalın yazılmış metinlerdir. etiketi ayrıca ekstra önem veya vurgu taşımamaktadır, ancak tipik olarak italik olarak yazılmış metni tanımlar.
Anlamsal HTML Etiketleri
Kısaltma Kısaltma
Uzun tırnak Tanım Belgenin yazar (lar) ı için adres alıntı
Kod referansı Teletype metni Mantıksal bölüm Genel satır içi stil kapsayıcısı Silinen metin Eklenen metin vurgu Güçlü vurgu
Birinci düzey başlık
İkinci düzey başlık
Üçüncü düzey başlık
Dördüncü düzey başlık
Beşinci seviye başlık
Altıncı seviye başlık
Tematik mola Kullanıcı tarafından girilecek metin
Önceden biçimlendirilmiş metin Kısa satır içi tırnak Örnek çıkış Alt simge Üst simge Değişken veya kullanıcı tanımlı metin