Avantaj HTML5'e Karşı XHTMLHtml5, geleneksel xhtml'ye göre çok önemli bir avantaj sunar ve bu, anlamsal bir yapı tanımlamak için etiketlere sahip olmasıdır.
Yapının arama motorları için anlamlı olduğu ve bu nedenle SEO konumlandırmasına hizmet ettiği html koduna anlamsal html diyoruz. Her arama motorunun bir web sayfasının her bir bölümünün ne olduğunu anlayabilmesi, hatta tüm içeriği kaldırabilmesi ile ilgilidir.
XHTML, semantik anlamda grup veya eleman bloklarını tanımlamaya izin veren etiketlere sahip değildir.
HTML5, web sayfasının anlamını tanımlamamıza izin veren öğeler ve etiketler sunarak bu sorunu çözer; bunlardan bazıları başlık, altbilgi, gezinme, hgroup, bölüm ve makaledir.
Daha sonra anlamsal anlamda en önemlilerini tanımlayacağız:
- başlık: Web sayfasının başlık bloğunu tanımlayın ve başlık içeriğini içine alın.
- gezinme: bir menüyü temsil eden bir blok tanımlar, bu nedenle arama motorları bu etiketi bulduğunda bunun navigasyon yapısı olduğunu bilir.
- grup: başlıkları tanımlar ve gruplandırır ve böylece her bir başlığa farklı önem verir.
- bölüm ve makale: div> katmanlarını tanımlayan ve bölümler içindeki makaleleri ve bölümleri tanımlarken daha anlamsal bir anlam taşıyan bölüm ve makale etiketleri ile değiştirilen önceki öğeler.
- kenara: Web sayfasının teğetsel öğelerini tanımlar ve gruplandırır. Diğer bir deyişle, web'in yan sütunları veya Kenar Çubuğu gibi ana içerik olmayan içerik
- altbilgi: Web sayfasının altbilgisindeki öğeleri tanımlar ve gruplandırır.
HTML5 kullanımı, XHTML'nin artık kullanılmadığı anlamına gelmez, web sayfasının yapısını ve gruplama öğelerini düzenlemede veya Jquery'yi çağırmada hala çok iyidirler, HTML5'in anlamsal bir anlam vermeye hizmet ettiğini unutmayın, ancak blok içinde devam edebilirsiniz. başka bir XHTML etiketi kullanmak için. Aşağıda bir örnek görelim
Alt yazı
web logosu
Katmanlarla yapının tanımlandığını ve başlık başlığının içinde başlıkları gruplamak için bir grup ve ayrıca logoyu içeren bir katman tanımlandığını görebiliriz.
Böylece, XHTML katmanları, programcı için daha iyi bir organizasyona sahip olmak için web sayfası yapısını tanımlamamıza izin verir, ardından XHTML, yapı için anlamlı bloklar tanımlamamıza yardımcı olur ve HTML5, arama motorları ve SEO için anlamlı bloklar oluşturmamıza izin verir. SEO için HTML5'te bölüm etiketi nasıl kullanılır?
Bölüm etiketini kullanmak, bir div katmanı kullanmaya çok benzer, ancak bölümün anlamsal anlam sağlaması ve bölüm içindeki tüm öğelerin web'in semantiği ile ilgili olması farkıyla. CSS stilleri veya bazı programlama efektleri atamak için anlamsız öğeleri gruplandırmamız gerektiğinden, herhangi bir bloktaki öğeleri gruplamak için bölüm kullanmamak önemlidir.
Blok oluşturma nedeni CSS uygulamak veya koddan bir komut dosyası ile kullanmaksa, bloğun anlamsal içeriği olmadığı için HTML5 kullanmamak daha iyi olur. Bu durumda xhtml'nin div katmanıyla bir blok oluşturmalıyız. Yukarıdaki örnekte görüldüğü gibi, resmi görüntülemek için CSS kullanıldığından logo HTML5 kullanmak mantıklı değildir.
DIV Katmanı veya BölümüBir div katmanı mı yoksa bir bölüm mü olduğunu, web sayfasının ziyaretçisi olup olmadığımı belirlemek için her bloğun alaka düzeyi hakkında düşünmenin bir yolu.Bu blok bana yararlı bilgiler veriyor mu? Cevabınız evet ise katman değilse bölüm olacaktır.
Makale öğesini kullandığımızda, arama motorlarının tarayabileceği, anlamsal anlamı ve içeriği olan bir blok tanımlıyoruz. Makale etiketi mutlaka bir metin notuna atıfta bulunmaz, bir ürün, resim veya form olabilir.
Bir web sayfasının basit bir örneğini ve HTML5'teki kodunu görelim:
Honda Civic
Makalenin içine katmanlar veya paragraflar veya diğer xhtml öğeleri koyabiliriz, bazı durumlarda web içeriği yalnızca bir makaleye sahip olabilir ve sayfanın önceki Autos Online durumunda olduğu gibi listeler veya kataloglar içermesi durumunda bir Gösterilen her ürün için makale ve ayrıca başlıklara daha fazla uygunluk sağlamak için kendi başlığı.
HTML5 öğelerine css stilleri de uygulayabiliriz, HTML5 ve CSS3 içeren çevrimiçi bir blog için basit bir örnek görelim.
Başlık 1
06 Aralık 2014 tarihinde Sergio tarafından yayınlandı - 3 yorum
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus nefreti, ultricies eu pharetra dictum, laoreet id nefreti …
Başlık 2
1 Aralık 2014, Sergio tarafından yayınlandı - 20 yorum
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus nefreti, ultricies eu pharetra dictum, laoreet id nefreti …
Bu, bunların yalnızca anlamsal öğeler olmadığını, aynı zamanda web sayfasının tasarımının ve yapısının bir parçası olabileceğini gösterir.
Bu öğe, web sayfasının yapısı içinde ikincil bir blok tanımlamaya hizmet eder, ziyaretçiye göstermek istediğimiz içerik veya veridir ancak ana içerik değildir.
Kenara etiketini, ikincil gezinme menüsü içeriğine, diğer web sayfalarına bağlantılar, giriş formlarına sahip olacak yan sütunlarla veya yaygın olarak Kenar Çubuğu olarak bilinen ilişkilendirebiliriz. Ayrıca bir makale içinde bir kenar oluşturabiliriz, bu, içeride olanın makale içeriğinin bir tamamlayıcısı olduğu, ancak bu içeriğin doğrudan bir parçası olmadığı anlamına gelir, örneğin bazı satışlarla ilgili bir makalemiz varsa ve bir yandan istatistik yayınlıyoruz. .
Son olarak, Düzenin amacını hatırlayın:
Bir web sayfası düzeni nedir?Bir web sayfası düzeni, grafik tasarımı html koduna getirmektir, css, web sayfasındaki kod aracılığıyla karşılık gelen her öğeyi bulur.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
