16 Temmuz 2012, Pazartesi
Web geliştirme bağlamında semantik, anlamsal işaretleme anlamına gelir; yani işaretlemenin kendi anlamı ve amacına uygun şekilde kullanılmasıdır.
Amacına uygun işaretleme; başlıklar için başlık öğelerinin (örneğin h1‘den h6‘ya kadar), paragraflar için paragraf öğelerinin (p), listeler için liste öğelerinin (ul, ol, dl, ayrıca datalist veya menu), veri tabloları için tablo öğelerinin kullanılması ve benzeri uygulamaları ifade eder.
Web’in sadece birkaç web sitesinden oluştuğu ve yazarların tüm siteleri kodlamak için tabloları, başlıklar için tablo hücrelerini veya paragrafları kullandığı ve istedikleri düzeni elde etmek için başka yaratıcı yollar aradığı eski günlerde, bu bariz gerçeği belirtmek bir zorunluluk haline gelmişti. (Kabul etmek gerekir ki, bu yazarların elindeki araçlar günümüz yazarlarınınkine kıyasla daha kısıtlıydı. Tablolar veya görseller kullanmadan üç sütunlu bir düzen kodlamanın kelimenin tam anlamıyla imkansız olduğu zamanlar vardı.)
Bugüne kadar yazarlar, HTML sayfalarındaki hangi işlevsel birim için hangi HTML öğesini kullanacakları konusunda her zaman emin değillerdi. Ancak HTML 5 gibi “yaşayan” teknik özellikler, yazarların div veya span gibi “anlamsız” yedek öğelere ihtiyaç duyulan durumlarda, gelecekte hangi öğelerin kullanılacağını takip etmelerini gerektiriyor.
HTML’in hangi öğeleri sunduğunu ve bu öğelerin ne anlama geldiğini bilmek için HTML teknik özelliklerine başvurmak gerekir. Tüm HTML teknik özelliklerini ve öğelerini kapsayan ve bir öğenin anlamını aramayı ve bulmayı kolaylaştıran dizinler mevcuttur. Yine de birçok durumda HTML teknik özelliklerinin ne dediğini kontrol etmek gerekebilir.
Örneğin, code öğesini ele alalım:
codeöğesi, bir bilgisayar kodu parçasını temsil eder. Bu bir XML öğe adı, dosya adı, bilgisayar programı veya bir bilgisayarın tanıyabileceği başka herhangi bir karakter dizisi olabilir.
Yazar kontrollü semantik
HTML öğeleri, HTML teknik özelliklerinde tanımlandığı gibi anlam taşır; ancak ID ve sınıf isimleri de anlam taşıyabilir. Mikroveriler gibi, ID ve sınıf isimleri de genellikle yazarın kontrolündedir; tek istisna mikroformatlardır. (Bu makalede mikroverileri veya mikroformatları ele almayacağız.)
ID ve sınıf isimleri, yazarlara HTML öğeleriyle çalışma konusunda büyük bir özgürlük tanır. Bu özgürlüğün sorunlara yol açmamasını sağlamak için izlenebilecek birkaç temel kural vardır:
- ID ve sınıf kullanımını minimumda tutun.
- İşlevsel ID ve sınıf isimleri kullanın; eğer bu mümkün değilse, genel ID ve sınıf isimleri kullanın.
- Mümkün olduğunca kısa, ancak gerektiği kadar uzun isimler kullanın.
Semantik işaretleme kullanmanın avantajları
İşaretlemeyi amacına uygun kullanmanın ve işlevsel ID ile sınıf isimlerini ölçülü bir şekilde tercih etmenin çeşitli avantajları vardır:
- Bu, profesyonel yaklaşımdır.
- Daha erişilebilirdir.
- Daha sürdürülebilirdir.
Özel durumlar
“Nötr” öğeler, anlamı belirsiz öğeler ve sunumsal öğeler özel durumları oluşturur.
div ve span, “belgelere yapı eklemek için genel bir mekanizma” sunar. Söz konusu içeriğin temsil ettiği şeye uyan başka bir öğe bulunmadığında her zaman kullanılabilirler.
Geçmişte b, strong, i ve em öğeleri çok fazla kafa karışıklığına neden olmuştur. Yazarlar b ve i öğelerini sunumsal oldukları için eleştirmiş ve genellikle strong ve em ile birebir değiştirilmelerini önermişlerdir. Geçmişi deşmeden, HTML 5’in bu dört öğeye de bir varoluş nedeni tanıdığını belirtelim:
b | “Ek bir önem taşımaksızın, normal metinden stilistik olarak ayrılması gereken metin bölümleri; örneğin bir belge özetindeki anahtar kelimeler, bir incelemedeki ürün adları veya tipik tipografik sunumu kalın olan diğer metin bölümleri.” | <p>The <b>frobonitor</b> and <b>barbinator</b> components are fried. |
|---|---|---|
strong | “İçeriği için güçlü önem” | <p><strong>Warning.</strong> This dungeon is dangerous. |
i | “Alternatif bir ses veya ruh hali içindeki ya da normal metinden ayrılan metin bölümleri; örneğin taksonomik bir adlandırma, teknik bir terim, başka bir dilden deyimsel bir ifade, bir düşünce, gemi adı veya tipik tipografik sunumu italik olan diğer metinler.” | <p>The term <i>prose content</i> is defined above. |
em | “İçeriğinin vurgulanması” | <p><em>Cats</em> are cute animals. |
Son olarak, gerçekten sunumsal olan öğeler vardır. Bu öğeler kullanıcı aracıları (tarayıcılar) tarafından sonsuza kadar desteklenecektir ancak sunumsal işaretleme sürdürülebilir olmadığı için artık kullanılmamalı ve bunun yerine stil sayfalarıyla yönetilmelidir. Popüler olanlardan bazıları şunlardır:
centerfontsu
Doğru yolda olup olmadığınızı nasıl anlarsınız?
Sayfanızın semantiğini kontrol etmenin ve bir ekran okuyucu tarafından nasıl yorumlanabileceğini anlamanın hızlı ve pratik bir yolu, CSS’i devre dışı bırakmaktır. Bunun için Chrome ve Firefox için mevcut olan Web Developer Toolbar eklentisini kullanabilirsiniz. Bu yöntem yalnızca CSS’in anlam aktarmak için kullanımıyla ilgili sorunları tanımlar, ancak yine de yardımcı olabilir.
Diğer yöntemler, akran değerlendirmelerinden (kodlama en iyi uygulamaları) kullanıcı testlerine (erişilebilirlik) kadar çeşitlilik gösterir.
Yapılması ve yapılmaması gerekenler
Aşağıdaki tablo, HTML yazımı söz konusu olduğunda bazı kötü uygulamalara, doğru alternatiflere ve kısa bir açıklamaya genel bir bakış sunmaktadır.
| Yapılmaması gereken | Yapılması gereken | Neden |
|---|---|---|
| Başlıklar için başlık öğeleri vardır. | ||
| Sunumsal işaretlemenin bakımı maliyetlidir. | ||
| Tablo verileri için tablo öğelerini kullanın. | ||
| Tablo verileri için tablo öğelerini kullanın. | ||
| Paragrafları satır sonları ile değil, paragraf öğeleriyle belirtin. |
Biz bunu nasıl uyguluyoruz
We archive Search Central announcements because client questions often trace back to a change that was announced years ago. Reading the original is faster than reconstructing it from second-hand summaries.
İlgili hizmetler