Muhtemelen Bilmediğiniz 10 Faydalı HTML Özelliği

Her geliştiricinin bilmesi gereken harika HTML özellikleri.

HTML, web sayfaları oluşturmamıza ve web içeriğinin yapısını tanımlamamıza izin veren çok kullanışlı bir biçimlendirme dilidir. Tarayıcıya içeriğin web'de nasıl görüntüleneceğini bildiren birkaç öğeden oluşur.

Web'de gördüğünüz her web sitesi veya web uygulaması, yapı taşları ve sayfalar için HTML kodunu kullanır. Dil, geliştirici olarak kullanabileceğiniz çeşitli harika özelliklere sahiptir. Web'de zaman kazanmak ve çeşitli özellikler oluşturmak için yararlanabileceğimiz birçok yararlı etiket ve özelliğe sahiptir.

Biraz HTML ile başarabileceğimiz çok şey var. Sadece bu biçimlendirme dilinin sunduğu güçlü özelliklerin farkında olmamız gerekiyor.

Bu yüzden bu yazıda muhtemelen hiç kullanmadığınız veya duymadığınız bazı faydalı HTML özelliklerini sizinle paylaşmak istedim. O halde başlayalım.

1. Fieldset Etiketi

Bir formda bir grup HTML öğesini birleştirmek istiyorsanız, etiket <fieldset> bunu yapmanıza izin verir. Formlarınızı yapılandırmanın iyi bir yolu.

İşte bir kod örneği:

<form>
 <fieldset>
 <label for="Name">Name:</label>
 <input type="text"><br><br>
 <label for="email">Email:</label>
 <input type="email"><br><br>
 <input type="submit" value="Submit">
 </fieldset>
</form>

Bu harika etiket, tüm büyük tarayıcılarda desteklenir. form Alan kümesinin hangi forma ait olduğunu belirten disabled ve tarayıcıya form öğeleri grubunun devre dışı bırakılması gerektiğini söyleyen öznitelik gibi farklı öznitelikleri kabul eder.

Aşağıdaki örneği inceleyebilirsiniz:

2. Legend Etiketi

<legend> etiketi , fieldset öğesiyle birlikte kullandığımız başka bir HTML öğesidir.

fieldset öğesi için bir başlık tanımlamanıza olanak tanır. Aşağıdaki koda bakın:

<form>
<fieldset>
<legend>Awesome:</legend>
<label for="firstName">The first name:</label>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lname">The last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Çıktı:

Yukarıda da görebileceğiniz gibi, legend öğesine metin eklediğinizde, o metni fieldset öğesinin kenarlığı içine yerleştirir. Buna ek olarak, isterseniz bazı stiller de ekleyebilirsiniz.

Açıklama etiketi, çeşitli özellikleri kabul eder ve tüm büyük tarayıcılarda desteklenir.

3. Accordion Etiketi

Yalnızca HTML ile kolayca basit bir akordeon oluşturmak istiyorsanız, etiket <details> bunu yapmanızı sağlar. Herhangi bir JavaScript kodu yazmanız gerekmez.

Etiket <details>, öğeye ( ) tıklayarak görüntüleyebileceğiniz veya gizleyebileceğiniz alt öğeleri kabul eder details.

Aşağıdaki kod örneğine bir göz atın:

<details>
<summary>What is HTML?</summary>
<p>HTML stands for Hypertext Markup Language, it's the language of the web.</p>
</details>

Şimdi ayrıntılar öğesine tıklayarak paragrafı gösterebilir ve gizleyebilirsiniz. Tıpkı bir akordeon elemanı gibi.

Aşağıdaki Codepen'e göz atın:

4. Color Özelliği

Yalnızca yerel HTML ile ve herhangi bir JavaScript kodu olmadan kolayca bir renk seçici öğesi oluşturabileceğinizi biliyor muydunuz?

Bunu yapmak için, sadece bir HTML type öğesine color yazın. Bu kadar.

İşte kod örneği:

<label for="color-pick">Pick a color you want:</label>
<input type="color" id="color-pick">

Çıktı:

5. Datalist Etiketi

HTML'deki etiket <datalist>, otomatik tamamlama özelliklerine sahip işlevsel bir arama çubuğu oluşturmanıza olanak tanıyan güçlü bir etikettir. Bütün bunlar sadece HTML ile, JavaScript gerektirmez. Bir kullanıcı arama çubuğunda arama yaptığında, veri listesi etiketi, arıyor olabileceği otomatik önerileri gösterir.

Bunu yapmak için, sadece bir girdi öğesi oluşturun ve ona list değer olarak arama çubuğunun adıyla çağrılan bir öznitelik verin.

Daha sonra giriş öğesinden sonra, sadece veri listesi öğesini oluşturun ve ona bir kimlik olarak giriş listesi adını verin. <option> Veri listesi etiketinin içine, kullanıcının arayabileceği metin içeren bazı etiketler koymanız yeterlidir.

İşte kod örneği:

<form>
<input list="myCars">
<datalist id="myCars">
<option value="BMW">
<option value="Mercedes">
<option value="Toyota">
<option value="Ford">
<option value="Mazda">
</datalist>
<input type="submit" value="Submit">
</form>

list Adın veri listesi kimliğine eşit olması gerektiğini unutmayın. Daha iyi anlamak için aşağıdaki örneğe göz atın:

6. Required Niteliği

HTML'deki öznitelik, kullanıcı formu göndermeden önce bir form öğesinin geçerli verilerle required doldurulması gerektiğini belirtir. Bir form gönderilmeden önce tüm öğelerin doldurulduğundan emin olmanın bir yolu.

İşte kod örneği:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" required>  <label for="email">Email:</label>
  <input type="email" id="email" required>  <input type="submit">
</form>

Çıktı:

Gördüğünüz gibi, girişleri doldurmadan veya geçerli verileri girmeden formu göndermeye çalışırsanız, geçerli verileri girmenizi söyleyen bir uyarı çıkacaktır.

7. Hidden Niteliği

hidden niteliği, bir HTML öğesini bir web sayfasında yerel olarak gizleme yeteneği verir. İstediğiniz herhangi bir öğe türüne ekleyebilirsiniz.

İşte kod örneği:

<p hidden>This paragraph won't show up.</p>

8. Base Etiketi

HTML'deki <base> etiketi, bir web sayfasındaki tüm göreli URL'ler için varsayılan bir temel URL ve hedef tanımlar. Sonuç olarak, bu özellik URL'lerin okunmasını kolaylaştırır ve kodunuzu temizler.

Bu etiket, <head> HTML'de öğenin içinde kullanılabilir. İşte bir örnek:

<head>
<base href="https://www.arsivpro.com/" target="_blank">
</head>

<body>
<img src="images/carPic.gif" width="28" height="43" alt="car">
<a href="tags/tag_base.php">Base Tag HTML</a>
</body>

Gördüğünüz gibi, temel bir URL'ye sahip olmak, bağlantıları daha kısa ve okunması kolay hale getirmenize olanak tanır.

9. Abbr Etiketi

HTML'deki abbr etiketi, kullanıcı üzerine geldiğinde metne kısaltmalar eklemenize izin verir.

Etiket title, metin kısaltmasını değer olarak alan bir özelliği kabul eder.

Aşağıdaki koda bir göz atın:

<p><abbr title="Cascading Stylesheet">CSS</abbr> is awesome.</p>

İşte kontrol etmek için bir Codepen örneği:

Gördüğünüz gibi, metnin (HTML) üzerine geldiğinizde kısaltması çıkıyor.

10. Kbd Etiketi

HTML'deki etiket, metni vb. <kbd> gibi bir klavye tuşu olarak işaretlemenize olanak tanır. enter ctrl

Etiketin içine metin koyduğunuzda kbd, tarayıcılar bu metni varsayılan tek aralıklı yazı tipinde işler, böylece bir klavye tuşu olarak görünecektir.

İşte bir kod örneği:

<p>Press <kbd>Ctrl</kbd>+<kbd>Alt</kbd> to continue...</p>

Benzersiz bir stile sahip olmak istiyorsanız, kbd öğelerine bazı CSS stilleri de ekleyebilirsiniz.

Kapanış

Umarım bu gönderiyi faydalı bulursunuz! Ayrıca paylaşacak yararlı HTML etiketlerine sahipseniz, burada bizimle ve diğer geliştiriciler için paylaşmaktan çekinmeyin. Keyifli kodlamalar...

Ek olarak, herhangi bir sorununuz varsa, yardım sayfamızdan bir bilet eklemekten çekinmeyin.