HTML Metin Biçimlendirme

Metnin nasıl görüneceğini değiştirmek için style özniteliğini zaten kullandınız. Biçimlendirme etiketleri farklı bir soruyu yanıtlar: bu metin parçası ne anlama gelir? Önemli uyarılar, konuşma vurgusu, vurgulamalar, düzenlemeler, küçük yazı ve H₂O gibi indisler özel HTML öğelerine aittir. Tarayıcılar bunları çoğu zaman varsayılan olarak kalın veya eğik gösterir; ancak erişilebilirlik araçları ve arama sistemleri de anlamı kullanabilir — yalnızca rengin sağlayamadığı bir şey. Bu etiketleri style ile yan yana öğrenmek, tam CSS’e geçmeden önce «nasıl görünür» ile «ne demektir» ayrımını netleştirir.

HTML metin biçimlendirme nedir?

Metin biçimlendirme öğeleri, bir rolü işaretlemek için bir sözcüğü veya ifadeyi paragrafın (veya benzer metnin) içine sarar: önem, vurgu, vurgulama, silme, ekleme ve daha fazlası. Bunlar satır içi öğelerdir. p veya h1 gibi yeni bir blok başlatmazlar. O rolü taşıyan metnin tam aralığının etrafına koyarsınız, sonra kapatırsınız ki cümlenin geri kalanı normale dönsün.

Doğrudan yanıt

Anlam için anlamsal biçimlendirme etiketleri kullanın: güçlü önem için strong, vurgu vurgusu için em (konuşurken sözcüğü vurgular gibi), ilgililik vurgusu için mark, küçük yazı veya yan yorumlar için small, kaldırılmış veya eklenmiş metin için del ve ins, alt ve üst indis için sub / sup. Anlam önemli olduğunda bu etiketleri tercih edin. Ekstra anlam olmadan yalnızca kalın veya eğik bir görünüm istediğinizde CSS kullanın — önceki oturumdaki satır içi style fikirleri dahil — strong veya em'i yanlış kullanmak yerine.

Etiket başvurusu bir bakışta

Önce strong ve em

strong ve em, en çok kullanacağınız çifttir. İçerik önemli olduğunda strong'a gidin — anahtar terim, uyarı, metindeki zorunlu alan etiketi. Konuşurken bir sözcüğü vurgulamak için sesinizi değiştireceğinizde em'e gidin. Varsayılan kalın ve eğik yalnızca yaygın sunumdur; bir stil sayfası görünümü sonra değiştirirse etiketler yine de anlam taşır.

Örneği okumak

• strong, “final price” ifadesini sarar çünkü bu ifade cümlede önemlidir
• em, “before” sözcüğünü sarar çünkü zamanlama vurgulanan fikirdir
• Her iki etiket de bir paragrafın içindedir; p'nin yerine geçmezler
• Yalnızca önem anlamı olmadan lacivert metin isteseydiniz, style (veya sonra CSS) daha iyi araç olurdu

Tek paragrafta daha fazla biçimlendirme etiketi

strong ve em doğal geldikten sonra vurgulama, düzenleme, küçük yazı ve indis yardımcılarını ekleyin. İç içe geçirmeyi sığ tutun: yalnızca her role ihtiyaç duyan sözcükleri sarın.

Her yardımcı ne yapıyor

• sub, su formülündeki “2”yi aşağı alır; sup, 12² içindeki üssü yukarı alır
• del ve ins bir düzenleme izi gösterir — eski değer dışarı, yeni değer içeri
• small ikincil küçük yazıyı işaretler, ana iddiayı değil
• mark ilgili bir eşleşmeyi vurgular, arama vurgusuna benzer
• strong ve em aynı paragrafta hâlâ önem ve vurguyu işaretler
  Her cümlede her etikete ihtiyacınız yoktur. Metninizin gerçek anlamına uyanları seçin. İki–üç isabetli etiketli kısa bir paragraf, her ikinci parçanın sarıldığı uzun bir satırdan daha net okunur.

Anlam etiketleri ile yalnızca görünüm stili

Eski sayfalar bazen güçlü anlam olmadan kalın ve eğik için b ve i kullanır. Bu kursta içerik önemli olduğunda strong, konuşurken bir sözcüğü vurgulayacağınızda em tercih edin. Yalnızca görsel bir görünüm istediğinizde CSS kullanın. Bu alışkanlık HTML'nizi dürüst tutar: biçimlendirme etiketleri içeriği, stil sayfaları sunumu tanımlar. Bir tasarımcı yazı tiplerini sonra değiştirse bile anlamsal etiketler ekran okuyuculara ve arama araçlarına neyin önemli ve neyin sesle vurgulandığını söylemeye devam eder.

Editörünüzde alıştırma

1. Bir ürün fiyatı hakkında normal bir paragraf yazın.
2. Ürün adını strong ile sarın.
3. Bir uyarı sözcüğünü em ile sarın.
4. Eski fiyatı del, yeni fiyatı ins ile işaretleyin.
5. İsteğe bağlı: small ile küçük bir dipnot tarzı not veya sub / sup ile bir formül parçası ekleyin.
6. Kaydedip sayfayı açın. Etiketlerin kapalı olduğunu ve anlamın net okunduğunu doğrulayın.
7. Kasıtlı olarak bir kapanış etiketini bırakın, yenileyin, satırın geri kalanının nasıl stillendiğini görün, sonra düzeltin.
   Kapanmamış bir etiketin stili paragraf boyunca “sızdırmasını” görmek, yalnızca mükemmel örnekleri kopyalamaktan daha hızlı dikkatli iç içe geçirmeyi öğretir. Düzeltmeden sonra kaynağı yeniden kontrol edin: açılış ve kapanış etiketleri ad ve sırada eşleşmelidir.

Biçimlendirmeyi zayıflatan hatalar

• Sözcük gerçekten önemliyken yalnızca style="font-weight: bold" kullanmak — anlam için strong tercih edin
• Her yerde yalnızca metni kalınlaştırmak için strong kullanmak — önemi sulandırır
• Nedensiz beş biçimlendirme etiketini iç içe koymak
• Gerçek indisler yerine süsleme için sup / sub kullanmak (matematik, kimya, dipnotlar)
• Kapanış etiketlerini unutup sayfanın geri kalanının kalın, eğik veya vurgulu kalması
• mark'ı ilgisiz metnin bütün paragrafları için genel sarı boya gibi kullanmak
• Gerçek bir düzenleme geçmişi yokken del/ins'i yalnızca tasarım için üstü çizili görünüm sanmak

Özet

• Biçimlendirme etiketleri metnin içine yalnızca süs değil, anlam ekler
• strong ve em ile başlayın; gerekince mark, small, del, ins, sub ve sup ekleyin
• Önem, vurgu, düzenlemeler veya indisler önemliyse anlamsal etiketleri tercih edin
• Ekstra anlam olmadan yalnızca görünüm gerektiğinde CSS kullanın
• İç içe geçirmeyi basit tutun ve açtığınız her etiketi her zaman kapatın
• Etiketleri her şeyi kalınlaştırma alışkanlığından değil, cümlenin anlamından seçin