HTML basit bir dildir, ancak kelime dağarcığı sandığınızdan daha geniştir. Kullanabileceğiniz daha sıra dışı etiketlerden bazıları hakkında her şeyi öğrenin.

Temel Çıkarımlar

  • Kullanıcı dostu bir deneyim sağlayan ve temiz bir tasarım sağlayan genişletilebilir bölümler oluşturmak için ve etiketlerini kullanın.
  • Web sayfanızdaki anahtar kelimelere, kelime öbeklerine veya arama sonuçlarına dikkat çekerek önemli içeriği etiketle vurgulayın.
  • Etiketi kullanarak tarihlere ve saatlere anlamsal anlam ekleyerek ekran okuyucu kullanan engelli kullanıcılar için erişilebilirliği artırın.

Bir web geliştiricisi olarak, aşağıdakiler gibi yaygın HTML etiketlerinde bilgili olmalısınız:, , Ve web sayfalarınızın yapısını ve içeriğini temsil eden. Ancak, HTML dili çok daha fazlasını sunar!

Bu benzersiz etiketleri keşfederek, web uygulamalarınızın işlevselliğini geliştirerek diğerlerinden farklı olmalarını sağlayabilirsiniz.

1.
Ve

Bir okuyucuyu hemen bunaltmak istemediğiniz kapsamlı bilgi veya içeriğe sahip olduğunuzu hayal edin. bu Ve etiketler kurtarmaya geliyor!

instagram viewer

Bu etiketler, web sitenizin kullanıcılarının tıklayarak ortaya çıkarabilecekleri bir başlık veya özet içeren genişletilebilir bir bölüm oluşturmak için birlikte çalışır. Varsayılan olarak, ayrıntılar öğesinin içindeki içerik görüntülenmez ve sayfanız düzenli ve düzenli kalır.

Ziyaretçileriniz gizli bilgilere erişmek için özeti kolayca tıklayabilir.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Bu etiketlerle, temiz bir tasarımı korurken kullanıcı dostu bir deneyim sağlayarak büyük metin, kod veya diğer bilgi bölümlerini gizleyebilirsiniz. Hatta işinizi iyileştirmenize yardımcı olabilirler. arayüz tasarımcısı olarak beceriler.

2.

bu etiketi, içeriğinizin belirli bölümlerini vurgulayarak görsel olarak öne çıkmalarını sağlar. kullandığınızda öğesinde, tarayıcılar tipik olarak içindeki metne sarı bir arka plan rengi uygulayarak okuyucunun dikkatini buna çeker.

Bu özellik, web sayfanızda anahtar sözcükleri, önemli ifadeleri veya arama sonuçlarını vurgulamak istediğinizde özellikle kullanışlıdır.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Örneğin, web sitenizde arama işlevi varsa, Sonuçlarda arama sorgusu eşleşmelerini vurgulamak için etiketi, kullanıcıların alakalı bilgileri bulmasını kolaylaştırır.

3.

İçeriğin güncelliğini yitirdiği veya artık alakalı olmadığı, ancak yine de tarihsel amaçlar için veya zaman içindeki değişiklikleri belirtmek için görüntülemek istediğiniz durumlarla hiç karşılaştınız mı?

Giriş etiket! anlamına gelir üstü çizili ve ortasından geçen bir çizgi ile öğe içindeki herhangi bir içeriği işler.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

Bu örnekte, stoklar tükendi ürünün stok durumunun değiştiğini belirten bir satırla birlikte metin görüntülenecektir.

4.

İçeriğinizdeki tarih ve saatlere anlamsal anlam katmak istediğinizde, etiketi işe yarar.

Kullanmak tarih saat niteliğini kullanarak, tarayıcıların, arama motorlarının ve ekran okuyucuların bağlamı anlamasına yardımcı olan, makine tarafından okunabilen bir tarih veya saat sürümü belirleyebilirsiniz.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

kullanarak etiketini kullanarak içeriğinize daha fazla yapı kazandırır ve ekran okuyucu kullanan engelliler de dahil olmak üzere daha geniş bir kullanıcı kitlesinin erişimini sağlarsınız.

5.

Web sayfanızdaki birden çok dilde metni yönetmek bazen zor olabilir, özellikle de her bölüm farklı biçimlendirme gerektiriyorsa.

bu etiketi, metnin farklı dil gereksinimleri nedeniyle tarayıcının farklı şekilde işlemesi gereken bir bölümünü izole ederek imdada yetişir.

<p>
<bdi>5,000bdi> people attended the conference.
p>

Bu örnekte, öğe sayıyı sarar 5,000. Bu, çevreleyen metin farklı bir dildeyse veya farklı biçimlendirme gerektiriyorsa, sayıya müdahale etmemesini sağlar.

6. , ,

Telaffuz kılavuzlarının, furigana'nın veya diğer ek açıklamaların yaygın olarak karakterlerin üstünde veya altında kullanıldığı Doğu Asya tipografisi için,, , Ve etiketler devreye giriyor.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Bu örnekte, öğe karakteri içerir 漢 (Kanji) ve eleman telaffuzu içerir かん (kan). bu öğeler, yakut ek açıklamalarını desteklemeyen tarayıcılar için geri dönüş parantezleri sağlar.

7.

Düzeninizi bozabilecek uzun sözcükleriniz olduğunda, etiketi yardım etmek için burada. Tarayıcının metni kaydırmayı seçebileceği uzun bir sözcükte bir satır sonu (kelime sonu fırsatı) fırsatı önerir.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

Yukarıdaki örnekte, uzun URL bir çevreleyen içeriğin düzenini koruyarak gerekirse tarayıcının onu iki satıra ayırmasına izin veren öğe.

8. Ve

Bilimsel veya matematiksel gösterimler, kimyasal formüller veya dipnotlar için Ve sırasıyla alt simge ve üst simge metni için etiketler.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Bu örnek, görüntülemek için etiket 2 içinde H2O bir alt simge olarak, etiketleri, Pisagor teoremindeki üsleri görüntüler.

9.

Disk kullanımı, derecelendirmeler veya sınav puanları gibi bilinen bir aralıkta skaler ölçümleri temsil etmeniz mi gerekiyor? bu etiketi sizi korudu.

Kullanmak değer, dakika, Ve maks. öznitelikleri kullanarak, sırasıyla ölçümün mevcut değerini, minimum değerini ve maksimum değerini tanımlayabilirsiniz.

<metervalue="75"min="0"max="100">75%meter>

Bu örnekte, öğesi bir sınav puanını temsil eder 75%.

10.

ihtiyacın olduğunda kipler için bir iletişim kutusu veya pencere kaplaması oluşturun veya uslu modal pop-up etkileşimleri, etiket gitmenin yoludur. kullanabilirsiniz açık iletişim kutusunu varsayılan olarak göstermek için öznitelik.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

Bu örnekte, bir paragraf ve bir kapat düğmesi içeren basit bir iletişim kutusu sayfa yüklendiğinde gösterilir. açık bağlanmak. Daha gelişmiş etkileşimler için JavaScript kullanarak iletişim kutusunun içeriğini ve davranışını özelleştirebilirsiniz.

11.

Kullan içindeki ilgili seçenekleri gruplandırmak için etiketleyin. açılır eleman. Daha kolay gezinme ve seçim için seçenekleri organize etmenize ve kategorilere ayırmanıza olanak tanır.

  • buetiketi, ilgili grupları oluşturan bir kapsayıcı öğedir içindeki etiketler eleman.
  • Açılır menüde görsel gruplama veya sınıflandırma oluşturarak seçeneklerin düzenlenmesine yardımcı olur.
  • bu etiketi, seçenek grubunun adını veya başlığını belirten bir etiket niteliği gerektirir.
  • Bir veya daha fazla içerebilir etiketleri, grup içindeki bireysel seçenekleri temsil eden alt öğeleri olarak.

Örneğin:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Bu örnek, seçim açılır menüsünü iki bölüme ayırır: Asya, Ve Avrupa. Her grup, o bölgedeki farklı ülkeleri temsil eden etiketler içerir.

Web Geliştirmede Yeterliliğinizi Artırın

Daha az bilinen bu HTML etiketlerini öğrenmek, web geliştirme becerilerinizi büyük ölçüde geliştirebilir. Tanınmamalarına rağmen, belirli bağlamlar için değerli özellikler sunarlar.

Beceri setinize bu etiketleri eklemek etkileşimi, erişilebilirliği artırır ve web geliştirme sürecini kolaylaştırır. Her ne kadar tanıdık gelmeseler de bir web geliştiricisi olarak yolculuğunuz üzerinde önemli bir etkiye sahip olduklarını unutmayın.