Berikut adalah 10 tag HTML yang kurang dimanfaatkan atau disalahpahami. Mungkin mereka tidak terlalu terkenal, tetapi mereka sangat berguna dalam situasi tertentu.
Pengembang web sering ingin memahami dan menguasai berbagai bahasa, dan sebagai hasilnya, mempelajari segala sesuatu dalam bahasa itu rumit, tetapi mudah untuk menemukan bahwa Anda tidak sepenuhnya memanfaatkan tag yang lebih istimewa tetapi berguna.
Diterjemahkan dari: Tutsplus
Sayangnya kami belum masuk ke semua potensi tag HTML yang kurang dikenal. Tapi itu tidak akan pernah masuk kembali ke ranah itu dan mulai menulis kode untuk mengungkap energi dari tag yang belum dijelajahi ini.
Berikut adalah 10 tag HTML yang kurang dimanfaatkan atau disalahpahami. Mungkin mereka tidak terlalu terkenal, tetapi mereka sangat berguna dalam situasi tertentu.
1. <cite>
Tampaknya semua orang terbiasa dengan tag <lockquote>, tetapi apakah Anda tahu adik <cite> <cite> <Cite>? <cite> memungkinkan Anda untuk mendefinisikan teks di dalam elemen sebagai referensi. Secara umum, browser akan menggunakan huruf miring untuk menampilkan teks di tag <cite>, tetapi ini dapat diubah dengan sedikit CSS.
Tag <cite> berguna untuk referensi ke direktori atau situs web lain. Berikut adalah contoh menggunakan tag CITE di paragraf:
Buku organisasi terobosan David Allen yang menyelesaikan pekerjaan Anda telah membawa badai untuk dilupakan. 2. <Optgroup>
Tag <t optgroup> adalah cara yang bagus untuk mendefinisikan opsi pengelompokan di tag SELECT. Misalnya, jika Anda perlu mengelompokkan daftar film berdasarkan waktu, maka Anda dapat melakukan ini:
12
<label for=showtimes>Release time</label><select id=showtimes name=showtimes> <optgroup label=1:00 pm></optgroup> <option value=titanic>Titanic</option> <option value=nd>Slumdog Millionaire</option> <option value=wab>Monster Shrek</option> <optgroup label=2:00 pm></optgroup> <option value = bKRW> Lion King </pection> <option value = STF> Superman </pection> </tectan>
Demo:
Ini dapat membedakan daftar film secara visual. 3. <Acronym>
<Arptronim> adalah cara untuk mendefinisikan atau menafsirkan satu set teks. Saat Anda meletakkan teks menggunakan tag <RACKONYM> dengan mouse Anda, sebuah kotak yang menunjukkan konten tag judul akan muncul di bawah. Misalnya:
1
WEIBO SITUS WEB <ACRONIMN Title = Didirikan pada tahun 2006> Twitter </cr SCHONIMF> telah sering kali henti baru -baru ini.
Contoh:WEIBO SITUS WEB Twitter baru -baru ini. 4. <spulht>
Tag <dresdle> adalah tag kecil yang sangat tidak mencolok, tetapi itu tidak berarti itu tidak berguna. Seperti namanya, <dressule> memungkinkan Anda untuk semantik tag di HTML. Label kecil ini akan menampilkan konten dalam label dalam huruf miring default. Tentu saja, menggunakan gaya dapat dengan mudah mengubah gaya default.
1234
<spulht> Glen Stansberry1234 Web Dev Laneanywhere, USA </dreace> 5. <sc> dan <del>
Jika Anda ingin menggunakan tag untuk menampilkan versi yang diedit, <sc> dan <del> tepat. Seperti namanya, <s Ins> menyoroti konten yang ditambahkan dengan garis bawah, sementara <del> menggunakan serangan untuk menampilkan informasi yang dihapus.
1
John <del> suka </el> <sc> Loves </s> iPod barunya.
Contoh: Setiap orang menyukai Ditinggalkan ZBlog. 6. <label>
Tampaknya elemen bentuk kemungkinan besar akan melupakan kapan harus menandai teks. Untuk elemen formulir, hal yang paling umum yang saya lupakan adalah tag <label>. Bukan hanya cara yang nyaman untuk menandai teks, tag <label> juga dapat melewati atribut untuk menentukan elemen mana yang akan dikaitkan. <label> tidak hanya mudah dikendalikan dengan gaya, tetapi juga memungkinkan Anda untuk membuat judul dapat diklik.
12
<label untuk = nama pengguna> nama pengguna </label> <input id = Username type = text /> 7. <fieldset>
Fieldset adalah tag kecil yang dapat Anda gunakan untuk menambahkan pengelompokan logis ke elemen formulir Anda. Tag <fieldset> akan menggambar kotak di sekitar elemen di dalamnya. Poin lain adalah Anda dapat menambahkan tag <label> ke bidang untuk menentukan judul grup.
1234567
<Men form> <Fieldset> <Gegend> Apakah Anda lebih pintar dari siswa berusia 5 tahun? </begend> Tentu saja <input name = ya type = nilai radio = ya/> saya tidak tahu <input name = no type = nilai radio = tidak/> </fieldset> </form>
Contoh: 8. <pr>Tag <bbr> sangat mirip dengan tag <RACKONYM>, perbedaannya adalah bahwa tag <BBR> hanya digunakan untuk mendefinisikan singkatan. Sama seperti <cr SCRONILM>, Anda dapat mendefinisikan properti judul untuk tag ini. Ketika pengguna menempatkan mouse di atas teks singkatan, seluruh konten akan ditampilkan di bawah ini. Tag <bbr> jarang digunakan, tetapi sangat berguna untuk pembaca layar, pemeriksa ejaan, dan mesin pencari.
1
<judul ABBR = Brainless> nc </bbr> adalah istilah yang tidak beradab.
Contoh:Ini adalah istilah yang tidak terlalu beradab. Ini adalah istilah yang tidak terlalu beradab. 9. Rel
Rel dapat menjadi properti yang sangat berguna , dan elemen HTML apa pun dapat menerapkan properti REL. Ini membantu melewati parameter tambahan tanpa tambahan yang ditentukan. Ini sangat berguna saat menggunakan JavaScript di HTML. Jika Anda memiliki tautan yang ingin Anda edit di dalam baris, Anda dapat menambahkan:
1
<a rel = klik href = page.html> Tautan ini dapat diedit. </a>
JavaScript akan mencari tautan dengan atribut rel yang dapat diklik dan menerapkan beberapa AJAX dan membiarkannya diedit dalam baris. Ini hanyalah satu penggunaan banyak teknik yang dapat Anda gunakan atribut rel karena potensinya tidak terbatas. Teman -teman yang tertarik dapat mempelajari pengantar W3C untuk rel secara mendalam. 10. <wbr>
<wbr> Tag ini adalah tag yang tidak dapat dipercaya dan tidak dikenal. Terus terang, saya juga ragu Anda akan terpapar dengan tag ini karena hampir tidak pernah digunakan. (Memang, saya hampir tidak melihat tag ini sebelum saya menulis posting ini). Faktanya, tag ini adalah istirahat garis lunak, memungkinkan Anda untuk menentukan titik istirahat garis di garis tertentu, menunjukkan bahwa jeda garis dapat dipecahkan pada saat itu, tetapi tidak harus memecahkannya, tetapi hanya pecah ketika diperlukan. Jika Anda ingin menghindari bilah gulir horizontal, maka menggunakan tag ini sangat bagus.
Contoh:Di bawah ini adalah kotak lebar 200 piksel tanpa overflow. NowBrnowBrnowBrnowBrnowNbrnowBrnowBrnowBrNbrnowBrnowbr
Havawbr Havawbr Havawbrhavawbrhavawbrhavawbrhavawbrhavawbrhavawbr Havawbr
Jika Anda ingin mencapai efek yang sama tanpa menggunakan tag <wbr>, Anda dapat mencobanya atau & malu;. Dikatakan bahwa tidak satu pun dari ketiga tag ini didukung sepenuhnya oleh semua browser. Anda dapat menggunakan artikel ini untuk melihat dukungan dari setiap browser untuk tiga tag.
PS: Setelah menerjemahkan artikel ini dengan susah payah, Shenfei sangat merasakan pesona semantik dan kekuatan tag HTML. Saya yakin kami belum menyadari banyak tag. Akibatnya, semua orang akrab dengan tag umum, dan semua orang tidak dapat menggunakan tag yang tidak umum. Seperti yang saya jelaskan dalam sebuah artikel sebelumnya, sebagian besar semantik adalah menggunakan label yang tepat di tempat yang tepat, daripada hanya membalikkannya. Jika kita dapat mempelajari lebih banyak tag HTML, kita dapat menulis lebih banyak kode HTML semantik, yang dapat sangat mengurangi kesulitan dan beban kerja penulisan CSS, dan membuat struktur halaman kita lebih masuk akal.