Doğru HTML5 Anlamına Bir Bakış
HTML belgelerinizin yapısını dikkatlice planlıyorsanız, bilgisayarların içeriğinizin anlamını anlamalarına yardımcı olun. Doğru sözdizimi kesindir, ancak temelde sadece ayrıştırıcıları, arama motorlarını ve anlamsız veri demetleriyle yardımcı teknolojiler sağlar.
Semantik konulara dikkat ederek ön uç iş akışınızı iyileştirirseniz, daha fazla ziyaretçi çeken daha kaliteli bir içerik oluşturabilirsiniz. Anlambilim anlam çalışması, daha geniş bir bağlamda bir mantık ve dilbilim dalı.
Web geliştirme dünyasında, bilgisayarlar bir belgenin yapısını anladıklarında anlamsal içerikten ve içindeki elementlerin rolleri. Uygun bir anlambilim oluşturmak istiyorsak, derinden sarf etmemiz gerekir. yapıyı anlamak içeriğimizin ve yetenekleri ön teknolojilerin.
Peki maddi faydalar nelerdir? Uygun anlambilim bir anlamına gelir daha fazla aranabilir içerik bu bir yol açar daha iyi arama motoru sıralaması. Ayrıca, yardımcı teknolojiler gibi erişilebilirliği de arttırıyoruz. ekran okuyucular, içeriğimizin anlamını daha iyi yorumlayabilir.
Geliştiricilerin semantik sayfa yapısı elde etmelerini sağlayan pek çok farklı ön uç geliştirme teknolojisi vardır. Bu gönderi size semantik HTML etiketlerine ve belge anahattı kavramına kısa bir giriş sağlayacaktır..
Anlamsal ve Anlamsız HTML Etiketleri
Anlambilim kavramı göründüğü kadar yeni değildir, HTML5 döneminden çok önce var olmuştur. Anlamsal ağ terimi, Sir Tim Berners-Lee tarafından 2001’de olduğu kadar erken icat edildi. Altında “anlamsal ağ” makineler tarafından işlenebilecek bir veri ağı anlamına geliyordu..
Bu öncelikle demek ki ayrı HTML öğelerinin ayırt edici yapısal rollerine sahip olmaları gerekir. W3C tanımına göre “Anlamsal bir öğe, hem tarayıcıya hem de geliştiriciye anlamını açıkça açıklar.”.
HTML5'ten Önce Anlamsal Öğeler
Anlamsal öğeler HTML5'ten önce de mevcuttu, ancak çoğu durumda geliştiriciler bunun farkında değildi. Kullandıkları bazı etiketler aslında anlamsaldı.. Sadece düşün ya da
Rolleri hem biz hem de kullanıcı aracısı için açıktır: sadece bir form içerir, tıpkı
düzenli ve sıralanmamış listeler, paragraflar, h1-h6 başlık etiketleri HTML5'ten önceki anlamsal öğelerdir..
Anlamsal Olmayan Öğeler
Anlamsal olmayan öğelerin özel bir anlamı yoktur, aralarındaki hierşik ilişkiler sadece aldatıcıdır. Anlamsal olmayan HTML etiketlerinin en yaygın kullanılan örnekleri ve etiketler.
Siteniz hiç korkunç hastalık yakaladıysa divitis, ne hakkında konuştuğumu biliyorsun. Evet. Divs mutlaka yanlış değildir, ancak divitis eğer sürdürülebilir, modüler ve anlamlı bir HTML kodu yazmak istiyorsak, mücadele etmek gerekiyor..
Smashing Magazine, asıl sorunun aşırı ve mantıksız kullanımıyla ne olduğunu güzelce açıklıyor İkisi arasında bir ilişki yok, aynen olduğu gibi Hala bağlı hissederseniz panik yapmayın HTML5, kolay içerik organizasyonunu mümkün kılan birçok yeni anlamsal öğe tanıttı. Yalnızca belgenin düzeyinde içerik düzenlemenize yardımcı olmaz (sonraki bölümdeki ayrıntılara bakın), ayrıca satır içi etiketler olarak da metin bloklarının içinde. Muhtemelen en popüler metin düzeyinde anlamsal etiketler Şu anda kullanımda olan tüm metin düzeyinde anlamsal öğeler için bu listeye bakın.. Belge anahattı bir HTML belgesinin yapısıdır. Öğelerin birbirleriyle nasıl ilişkili olduğunu gösterir. Belge taslağı yalnızca başlıklar, tablo başlıkları, form başlıkları ve HTML4.01 ve XHTML gibi önceki HTML sürümlerinde diğerleri gibi öğeler eşleştirilerek oluşturulmuştur. HTML5'te, ana hat algoritması yeni bölümleme elemanları tarafından geliştirilmiştir, yani: HTML5'te beşinci bir bölümleme öğesi var, ancak yeni değil, o İyi yapılandırılmış bir belge taslağı oluşturmak istiyorsak, aşağıdaki kurallara dikkat etmemiz gerekir: 1. En dıştaki bölümleme elemanı her zaman 2. HTML5’teki bölümler yuvalanabilir. 3. Her bölümün kendi başlık hiyerarşisi vardır. Bunların her biri (en içteki bölüm bile dahil) 4. Belge taslağı öncelikle 5 bölümleme elemanı tarafından tanımlanırken, her bölüm için uygun başlıklar gerekir.. 5. Verilen bölümün başlığını tanımlayan her zaman ilk başlık elemanıdır (h1 ya da alt sıra başlık etiketi olsun). Aynı bölüm içindeki aşağıdaki başlık etiketlerinin buna göre olması gerekir. (İlk başlık bölümleme elemanının içinde bir h3 ise, bundan sonra bir h3 koymayın.) 6. tarafından tanımlanan bölümler 7. Her bölümün (vücut, bölüm, makale, bir yana, nav) kendine ait olabilir Nasıl çalıştığını görmek için semantik bir belge taslağı örneği görelim. Örnek kodumuz aşağıdaki belge yapısına yol açacaktır: Ve işte uygun anlamsal bölümlemeli kod: İşte logomuz ve sloganımız. Paragraf 1 birinci bölümde Paragraf 2 birinci bölümde Paragraf 1 ikinci bölümde Paragraf 2 ikinci bölümde Yukarıdaki kod pasajına bakarsanız, üstbilgi ve altbilgilerin isteğe bağlı olduğunu görürsünüz, bunları kullanmak isteyip istemediğimizi özgürce seçebiliriz, ancak bu Her bölüm için daima bir başlık içermesi şiddetle tavsiye edilir., aksi takdirde bölüm olacak “Başlıksız” belge anahattında. Neyse ki, tüm internette belgenin ana hatlarını kontrol etmemizi sağlayan birçok harika araç var, bu sefer html5.org Outliner aracını kullanacağız.. Kod snippet'imizi dış hat ile sağlanan forma eklersek, “Anahat bu!” düğmesine aşağıdaki sonucu göreceğiz: Bu örnek kodumuzun belge ana hatları, arama motorları bunu görüyor ve ekran okuyucuları görme engelli kullanıcılarına okuyor. Anlamsal, iyi yapılandırılmış ve kötü bir şey yok “Başlıksız” içindeki bölümler. Başlıksız bölümün Outliner'da nasıl göründüğüne bakmak istiyorsanız, sadece örnek koddaki başlık etiketlerinden bazılarını silin. Anlamsal HTML etiketleri ve belge ana hatları web anlambiliminin sadece küçük bir kısmıdır. Bir web sayfasının içeriği, WAI-ARIA erişilebilirlik protokolü ve RDFa protokolü, mikro veriler veya JSON-LD işaretlemesi ile birlikte kullanılabilecek yapısal veriler sayesinde daha da anlamlı hale getirilebilir.. sadece satır içi seviyede aynı şekilde çalışan etiket.-olduğu gibi onları tamamen çukurlamana gerek yok. Yine de, yalnızca stil verme amacıyla ve diğer son başvuru durumlarında içeriği gruplamak için en iyi seçimdir.. HTML5'te Metin Anlambilimi
ve , ancak HTML5'ten önce de vardılar. Yeni satır içi anlamsal öğeler arasında örneğin , için etiket insan tarafından okunabilen tarih zamanları, ve için vurgulanan metin.HTML5'te Belge Anahattı
için belirli bir tema etrafında gruplandırılmış bölümler için komple veya kendi kendine yeten kompozisyonlar blog yazısı veya widget gibi için gezinme blokları için kenar çubukları gibi tamamlayıcı içerik. etiket. etiketler de yenidir, ancak bir belgede yeni bölümler oluşturmazlar, içeriği bölümler içinde bölerler. Bu şu demek her bölümleme elemanı (vücut, makale, bölüm, nav ve kenara) kendi başlık ve altbilgisine sahip olabilir.Anlamsal olarak yapılandırılmış içerik için ipuçları
etiket.h1 etiket., ve etiketler HTML belgesinin ana anahattına ait değildir, genellikle başlangıçta yardımcı teknolojiler tarafından oluşturulmazlar.. başlığı (logo, yazarın adı, tarihleri, meta bilgileri vb. gibi) ve altbilgisini (telif hakkı, notlar, bağlantılar vb.) tanımlayan etiketler.Örnek: Anlamsal Bir Anahat
Web Sitemize Hoşgeldiniz!
Makale Başlığı
Makale Altyazısı
İlk Mantıksal Bölüm (örneğin, "Teori")
Birinci Bölümde Bazı Diğer Başlıklar
İkinci Mantıksal Bölüm (örneğin, "Uygulama")
Web Anlamının Diğer Yönleri
