Skip to content

Neden Anlamsal HTML Kullanılır?

21 de Nisan de 2021

Web tasarımında önemli bir ilke, tarayıcıda varsayılan olarak nasıl görünebileceklerinden ziyade, gerçekte ne olduklarını belirtmek için HTML öğelerinin kullanılması fikridir. Bu, anlamsal HTML kullanımı olarak bilinir.

Anlamsal HTML Nedir?

Anlamsal HTML veya anlamsal biçimlendirme, yalnızca sunumdan ziyade web sayfasına anlam katan HTML’dir. Örneğin,

etiketi, eklenen metnin bir paragraf olduğunu belirtir. Bu hem anlamsal hem de sunumsaldır çünkü insanlar paragrafların ne olduğunu bilir ve tarayıcılar bunları nasıl göstereceklerini bilir. Bu denklemin diğer tarafında, ve gibi etiketler anlamsal değildir. Yalnızca metnin nasıl görünmesi gerektiğini (kalın veya italik) tanımlarlar ve işaretlemeye herhangi bir ek anlam sağlamazlar. Anlamsal HTML etiketlerinin örnekleri şunları içerir:

  • ile

    arasındaki üstbilgi etiketleri

Standartlarla uyumlu bir web sitesi oluştururken kullanabileceğiniz daha birçok anlamsal HTML etiketi vardır.

Anlambilimle Neden Önem Vermelisiniz?

Anlamsal HTML yazmanın yararı, herhangi bir web sayfasının itici amacı olması gereken şeyden kaynaklanır: iletişim kurma arzusu. Belgenize anlamsal etiketler ekleyerek, o belge hakkında iletişime yardımcı olan ek bilgiler sağlarsınız. Özellikle, anlamsal etiketler tarayıcıya bir sayfanın anlamının ve içeriğinin ne olduğunu açıklar. Bu netlik, arama motorları ile de iletilir ve doğru sorgular için doğru sayfaların teslim edilmesini sağlar. Anlamsal HTML etiketleri, bir sayfada nasıl göründüklerinin ötesine geçen bu etiketlerin içeriği hakkında bilgi sağlar. etiketi içine alınan metin, tarayıcı tarafından hemen bir tür kodlama dili olarak tanınır. Tarayıcı, bu kodu oluşturmaya çalışmak yerine, bu metni bir makale veya çevrimiçi eğitim amacıyla kodun bir örneği olarak kullandığınızı anlar. Anlamsal etiketleri kullanmak, içeriğinizi şekillendirmek için size çok daha fazla kanca sağlar. Belki bugün kod örneklerinizin varsayılan tarayıcı stilinde görüntülenmesini tercih edersiniz, ancak yarın onları gri bir arka plan rengiyle çağırmak isteyebilirsiniz; daha sonra, örnekleriniz için kullanmak üzere tek aralıklı kesin yazı tipi ailesini veya yazı tipi yığınını tanımlamak isteyebilirsiniz. Tüm bunları semantik işaretleme ve akıllıca uygulanmış CSS kullanarak kolayca yapabilirsiniz.

Anlamsal Etiketleri Doğru Kullanmak

Anlamsal etiketleri sunum amaçlı kullanmak yerine anlam ifade etmek için kullanırken, bunları yalnızca genel görüntü özellikleri için yanlış kullanmamaya dikkat edin. En yaygın olarak yanlış kullanılan semantik etiketlerden bazıları şunları içerir:

  • blok alıntı - Bazı kişiler, alıntı olmayan metni girintilemek için

    etiketini kullanır. Bunun nedeni, blok alıntıların varsayılan olarak girintili olmasıdır. Blok alıntı olmayan bir metni girintilemek istiyorsanız, bunun yerine CSS kenar boşluklarını kullanın.

  • p - Bazı web editörleri, o sayfanın metni için gerçek paragrafları tanımlamak yerine, sayfa öğeleri arasına fazladan boşluk eklemek için

    & nbsp;

    (bir paragrafta bulunan bölünemez boşluk) kullanır. Önceki örnekte olduğu gibi, boşluk eklemek yerine kenar boşluğu veya dolgu stili özelliğini kullanmalısınız.

  • ul -

    ile olduğu gibi, bir

      etiketi içine metin eklemek, çoğu tarayıcıda bu metni girintiler. Bu hem anlamsal olarak yanlış hem de geçersiz HTML'dir, çünkü bir

        etiketi içinde yalnızca

      • etiketleri geçerlidir. Yine, metni girintilemek için kenar boşluğunu veya dolgu stilini kullanın.
      • h1, h2, h3, h4, h5 ve h6 - Yazı tiplerini daha büyük ve daha kalın yapmak için başlık etiketlerini kullanabilirsiniz, ancak metin bir başlık değilse, bunun yerine yazı tipi ağırlığı ve yazı tipi boyutu CSS özelliklerini kullanın.

      Anlamı olan HTML etiketlerini kullanarak, her şeyi

      etiketleriyle çevreleyen sayfalardan daha fazla bilgi veren sayfalar oluşturursunuz.

      Hangi HTML Etiketleri Anlamsaldır?

      Hemen hemen her HTML4 etiketinin ve tüm HTML5 etiketlerinin semantik anlamları olmasına rağmen, bazı etiketler öncelikle anlamsal. Örneğin, HTML5, ve etiketlerinin anlamını anlamsal olacak şekilde yeniden tanımlamıştır. etiketi fazladan bir önem taşımaz; bunun yerine, etiketli metin tipik olarak kalın gösterilir. Benzer şekilde, etiketi de fazladan bir önem veya vurgu ifade etmez; daha ziyade, tipik olarak italik olarak gösterilen metni tanımlar.

      Anlamsal HTML Etiketleri

      <abbr> Kısaltma
      <acronym> Kısaltma
      <blockquote> Uzun teklif
      <dfn> Tanım
      <address> Belgenin yazar (lar) ı için adres
      <cite> Alıntı
      <code> Kod referansı
      <tt> Teletype metni
      <div> Mantıksal bölüm
      <span> Genel satır içi stil kapsayıcı
      <del> Metin silindi
      <ins> Eklenen metin
      <em> Vurgu
      <strong> Güçlü vurgu
      <h1> Birinci düzey başlık
      <h2> İkinci düzey başlık
      <h3> Üçüncü düzey başlık
      <h4> Dördüncü düzey başlık
      <h5> Beşinci düzey başlık
      <h6> Altıncı seviye başlık
      <hr> Tematik mola
      <kbd> Kullanıcı tarafından girilecek metin
      <pre> Önceden biçimlendirilmiş metin
      <q> Kısa satır içi teklif
      <samp> Örnek çıktı
      <sub> Alt simge
      <sup> Üst simge
      <var> Değişken veya kullanıcı tanımlı metin

      Lifewire'dan daha fazlası

      • Biçimlendirme Dilleri Nelerdir?

      • HTML'deki bir blok alıntı örneğini gösteren çizim

        Blok Alıntı Nedir?

      • Plan gibi görünmesi için yapılmış "HTML" kelime sanatı

        HTML Öğesine Karşı HTML Etiketi Nedir?

      • HTML soru işareti

        HTML Etiketi Tanımı

      • Dizüstü bilgisayar kullanarak telefonda gözlüklü adam

        İK Etiketi ile HTML'ye Satır Ekleme

      • Bir web sayfasını iki farklı stilde oluşturan, sayfanın ortasında eğik çizgiyle ayrılmış bir tarayıcının vektör sanat görüntüsü

        HTML'de Metin Rengi Nasıl Değiştirilir

      • HTML ile Web Kodlaması

        HTML nedir?

      • Ofiste yayları kalibre etmek için yazılım kullanan çalışanlar

        HTML Kullanarak Web Sayfalarına Görsel Ekleme

      • Programlama çizimi

        Görüntüleri ve Diğer HTML Nesnelerini Ortalamak için CSS Nasıl Kullanılır

      • HTML soru işareti

        Sekmeler ve Aralık Oluşturmak için HTML ve CSS Nasıl Kullanılır?

      • bilgisayarda çalışan kadın web geliştiricisi

        Bir Web Sayfasındaki Metnin Solunda Bir Görüntü Nasıl Kaydırılır

      • Bir e-postada birden çok yazı tipi kullanan bir kişi

        Gmail'in Yazı Tipi Ayarları Nasıl Değiştirilir

      • Asılı girintiyle yapılandırılmış metin

        Word'de Asılı Girinti Nasıl Oluşturulur

      • Bu metin HTML'de kalındır

        HTML Vurgu Etiketleri

      • Bir kaykay üzerinde oturan ve dizüstü bilgisayarında yazan takım elbiseli adam

        Google Dokümanlar Nasıl Asılı Girinti Yapılır

      • Bir iş sunumu veren bir kadın fotoğrafı

        Google Slaytlarda Asılı Girinti Nasıl Yapılır?

      Cankurtaran

      Bizi takip edin

      • Facebook

      • Hakkımızda
      • Reklam Verin
      • Gizlilik Politikası
      • Çerez politikası
      • Kariyerler
      • Yazım Yönergeleri
      • İletişim
      • Kullanım Şartları
      • AB Gizliliği
      • California Gizlilik Bildirimi



      Gizlilik Haklarınız

      Lifewire ve üçüncü taraf ortaklarımız tanımlama bilgileri kullanır ve bir cihazda bilgi depolama ve / veya bu bilgilere erişme, kişiselleştirilmiş reklamlar görüntüleme ve içerik ölçümü, hedef kitle anlayışı ve ürün geliştirme izninize bağlı olarak benzersiz tanımlayıcılar gibi kişisel verileri işler. Meşru menfaatin kullanıldığı durumlarda itiraz etme hakkınız da dahil olmak üzere hayateli.com için onay seçeneklerinizi değiştirmek veya geri çekmek için aşağıya tıklayın. İstediğiniz zaman, herhangi bir sayfanın altındaki "AB Gizliliği" bağlantısını kullanarak ayarlarınızı güncelleyebilirsiniz. Bu seçimler, küresel olarak ortaklarımıza bildirilecek ve tarama verilerini etkilemeyecektir. İş Ortakları Listesi (satıcılar)

      Biz ve ortaklarımız verileri şu amaçlarla işleriz:

      Tanımlama için cihaz özelliklerini aktif olarak tarayın. Kesin coğrafi konum verilerini kullanın. Bir cihazda bilgi depolayın ve / veya bunlara erişin. Kişiselleştirilmiş içeriği seçin. Kişiselleştirilmiş bir içerik profili oluşturun. Reklam performansını ölçün. Temel reklamları seçin. Kişiselleştirilmiş bir reklam profili oluşturun. Kişiselleştirilmiş reklamları seçin. Kitle içgörüleri oluşturmak için pazar araştırması uygulayın. İçerik performansını ölçün. Ürünleri geliştirin ve iyileştirin. İş Ortakları Listesi (satıcılar)