Web'in hızlı dünyasında, web geliştirme becerilerinizi geliştirmek, en son teknolojiler ve trendlerden haberdar olmanızı sağlayacak sürdürülebilir ve yenilikçi bir yaklaşım benimsemeyi gerektirir. HTML öğeleri, web sayfalarının yapısının ve tasarımının oluşturulduğu temel dili temsil ettikleri için bu gelişimin en önemli temellerinden biridir. Ancak mesele sadece temel öğelerin kullanılması değil, aynı zamanda kullanıcı deneyimine çekicilik ve işlevsellik katan sıra dışı ve yenilikçi HTML öğelerinin kullanımının da dikkate alınmasını gerektirir.
Bir web geliştiricisi olarak, aşağıdaki gibi yaygın HTML öğeleri konusunda bilgili olmanız gerekir: Ve Ve Bu, web sayfalarının yapısını ve içeriğini temsil eder. Ancak HTML bundan çok daha fazlasını sunuyor!
Bu benzersiz unsurları keşfederek, oluşturduğunuz web uygulamalarının işlevselliğini geliştirerek onları rekabette öne çıkarabilirsiniz. Doğrulamak HTML öğrenmenin her geliştirici için gerekli olmasının nedenleri.
Hızlı Linkler
1. Ve
Okuyucunun hemen kafasını karıştırmasını istemediğiniz kapsamlı bilgi veya içeriğe sahip olduğunuzu hayal edin. Öğeler sizi kurtaracak Ve !
Bu öğeler, web sitesi kullanıcılarının daha fazla ayrıntıyı ortaya çıkarmak için tıklayabilecekleri bir başlık veya özet içeren genişletilebilir bir bölüm oluşturmak için birlikte çalışır. Varsayılan olarak bir öğenin içindeki içerik görüntülenmez , sayfanızı düzenli ve düzenli tutar.
Ziyaretçi gizli bilgilere erişmek için özete kolayca tıklayabilir.
<ayrıntılar>özet> Tıklayın için daha fazla bilgi gösterözet>p>Bu içerik Varsayılan olarak gizli olacaktır ancak kullanıcı butona tıkladığında görünecektir. özet.</p> </ayrıntılar>Bu öğeleri kullanarak metnin, kodun veya diğer bilgilerin büyük bölümlerini gizleyerek temiz bir tasarımı korurken kullanıcı dostu bir deneyim sağlayabilirsiniz. Bu öğeler ayrıca size yardımcı olabilir Bir ön uç tasarımcı olarak becerilerinizi geliştirin.
2.
Size öğeyi verir İçeriğinizin belirli bölümlerini vurgulayarak görsel olarak öne çıkmalarını sağlayın. Bir öğeyi kullanırken Tarayıcılar genellikle içerideki metne sarı bir arka plan rengi uygulayarak okuyucunun dikkatini ona çeker.
Bu özellik özellikle web sayfanızda önemli anahtar kelimeleri, kelime öbeklerini veya arama sonuçlarını vurgulamak istediğinizde kullanışlıdır.
<p> Şunu kullanabilirsiniz:işaret>işaret</işaret> etiket için Önemli kelimeleri veya ifadeleri vurgulayın. </p>Örneğin, bir web sitesinin arama işlevi varsa, bir öğeyi kullanabilirsiniz. Arama sorgusu eşleşmelerini sonuçlarda vurgulamak, böylece kullanıcıların alakalı bilgileri bulmasını kolaylaştırmak.
3.
İçeriğin güncel olmadığı veya artık alakalı olmadığı ancak yine de onu tarihsel amaçlarla görüntülemek veya zaman içindeki değişiklikleri belirtmek istediğiniz durumlarla karşılaştınız mı?
Öğe hakkında bilgi edinin ! Üstü çizili metni temsil eder ve öğe içindeki herhangi bir içeriği üstü çizili yazı tipinde görüntüler.
<p>
Bu ürün, <s>stoklar tükendi</s> şu anda indirimli fiyatla mevcut!
</p>Bu örnekte, ürünün stok durumunun değiştiğini belirten stokta yok üstü çizili metin olarak görüntülenecektir.
4.
İçeriğinizdeki tarih ve saatlere anlamsal anlam eklemek istediğinizde, İşe yarayacaktır.
Datetime özelliğiyle, tarih veya saatin makine tarafından okunabilir bir sürümünü belirtebilirsiniz; bu, tarayıcıların, arama motorlarının ve ekran okuyucuların bağlamı anlamasına yardımcı olur.
<p>
Bağımsızlık Bildirgesi imzalandı
<zamandatetime="1776-07-04">Temmuz 4, 1776</zaman>.
</p>Bir öğeyi kullanma , içeriğe daha fazla yapı kazandırır ve ekran okuyucu kullanan engelli kişiler de dahil olmak üzere daha geniş bir kullanıcı kitlesinin erişebilmesini sağlarsınız.
5.
Bir web sayfasındaki metni birden fazla dilde yönetmek, özellikle her bölüm farklı biçimlendirme gerektirdiğinde bazen zor olabilir.
Ürün size sunulacak Farklı dil gereksinimleri nedeniyle tarayıcının farklı şekilde ele alması gereken metnin bir bölümünü izole ederek yardımcı olun.
<p><BDI>5,000</BDI> Konferansa kişi katıldı.
</p>Bu örnekte öğe sarılır 5000 sayısıyla. Bu, çevreleyen metnin farklı bir dilde olması veya farklı bir format gerektirmesi durumunda sayıyla çakışmamasını sağlar.
6. , ,
Telaffuz kılavuzlarının, furigana'nın veya diğer açıklamaların genellikle harflerin üstünde veya altında kullanıldığı Doğu Asya yazılarında, öğeler Ve Ve Bu rol.
<p>
Öğreniyorum
<yakut>Çince<rt>sezgi</rt></yakut>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>Bu örnekte, öğe şunları içerir:漢 (kanji) karakterinde eleman şunları içerir: Telaffuz hakkında かん (oldu). Öğeler mevcut Kırmızı ek açıklamaları desteklemeyen tarayıcılar için geri dönüş ayraçları.
7.
Biçimlendirmeyi bozabilecek uzun kelimeleriniz olduğunda Element yardıma hazırdır. Uzun bir sözcükte, tarayıcının metni kaydırmayı seçebileceği bir satır sonu (sözcük sonu fırsatı) fırsatı önerir.
Bu uzun bir URL'nin bir örneğidir: https://www.example.org/ ve/uzun/bir/yol/ve/bir?sorgu=dize.Yukarıdaki örnekte, uzun URL, çevredeki içeriğin düzenini korurken tarayıcının gerekirse onu iki satıra bölmesine olanak tanıyan bir öğe içerir. Doğrulamak Yeni başlayanlar için duyarlı HTML görselleri kılavuzu.
8. Ve
Bilimsel veya matematiksel semboller, kimyasal formüller veya dipnotlar için öğeleri ve alt simge ve üst simge metinleri için sırasıyla kullanabilirsiniz.
<p>
Suyun kimyasal formülü H'dir<alt>2</alt>O ve Pisagor teoremi bir<yudum>2</yudum> + B<yudum>2</yudum> = c<yudum>2</yudum>.
</p>Bu örnek , H2O'daki 2'yi alt simge olarak görüntülemek için bir öğe kullanırken, öğe Pisagor teoremindeki üssü görüntüler.
9.
Disk kullanımı, derecelendirmeler veya test puanları gibi bilinen bir aralıktaki sayısal ölçümleri temsil etmeniz mi gerekiyor? Öğe size yardımcı olacaktır .
Değer, minimum ve maksimum niteliklerini kullanarak ölçümün sırasıyla geçerli değerini, minimum değerini ve maksimum değerini belirleyebilirsiniz.
<meter value="75"dk="0"maksimum="100">75%Bu örnekte bir öğeyi temsil ediyor %75'lik bir test puanı.
10.
Bir iletişim kutusu, koşul katmanı penceresi veya kalıcı açılır pencere etkileşimleri oluşturmanız gerektiğinde, bir öğe gidilecek yoldur. Özelliği kullanabilirsiniz açıkİletişim kutusunu varsayılan olarak göstermek için.
<Diyalogaçık><p>Bu bir iletişim kutusudur!</p><düğmesine tıklayın>Kapat</düğmesine tıklayın></Diyalog>Bu örnekte, tema sayesinde sayfa yüklendiğinde paragraf ve kapat düğmesi içeren basit bir iletişim kutusu beliriyor açık. Daha gelişmiş etkileşimler için iletişim kutusunun içeriğini ve davranışını JavaScript kullanarak özelleştirebilirsiniz.
11.
Bir öğe kullan Bir açılır menü öğesi içindeki ilgili seçenekleri gruplandırmak için . Bu, daha kolay gezinme ve seçim için seçenekleri düzenlemenize ve kategorilere ayırmanıza olanak tanır.
- Etiketleri toplayan bir konteyner elemanıdır Bir öğe içinde ilgili .
- Açılır menüde görsel bir gruplama veya sınıflandırma oluşturarak seçeneklerin düzenlenmesine yardımcı olur.
- Etiket gerektirir Seçenek kümesinin adını veya başlığını belirten bir etiket özelliği.
- Bir element içerebilir Grup içindeki bireysel seçimleri temsil eden bir veya daha fazla alt öğe.
örnek:
<seçmek><OptGrupetiket="Asya"><seçenekdeğer="kr">Güney Kore</seçenek></OptGrup><OptGrupetiket="Avrupa"><seçenekdeğer="de">Almanya</seçenek></OptGrup></seçmek>Bu örnek, açılır seçim listesini iki bölüme gruplandırır: Asya ve Avrupa. Her grup, o bölgedeki farklı ülkeleri temsil eden öğeleri içerir.
Web geliştirmedeki yeterliliğinizi geliştirin
Daha az bilinen HTML öğelerini öğrenmek, web geliştirme becerilerinizi büyük ölçüde geliştirebilir. Tanınmasa da, belirli bağlamlar için değerli avantajlar sunarlar.
Bu öğeleri becerilerinize eklemek etkileşimi ve erişilebilirliği artırır ve web geliştirme sürecini basitleştirir. Alışılmadık olsa da, bir web geliştiricisi olarak yolculuğunuz üzerinde büyük bir etkisi olduğunu unutmayın. Şimdi görüntüleyebilirsiniz Hareket halindeyken kod yazabilirsiniz: Android için en iyi HTML düzenleme uygulamaları.
