Fitur tersembunyi dari HTML

HTML menjadi bahasa yang paling banyak digunakan (setidaknya sebagai bahasa markup) belum mendapatkan penghargaan yang semestinya.
Mengingat sudah ada selama bertahun-tahun, hal-hal seperti kontrol FORM / INPUT masih tetap sama tanpa ada kontrol baru yang ditambahkan.

Jadi setidaknya dari fitur-fitur yang ada, tahukah anda fitur-fitur apa saja yang tidak terkenal tapi sangat bermanfaat.

Tentu saja, pertanyaan ini sejalan dengan:

Fitur Tersembunyi JavaScript
Fitur Tersembunyi CSS
Fitur Tersembunyi C #
Fitur Tersembunyi VB.NET
Fitur
Tersembunyi Java Fitur
Tersembunyi ASP klasik Fitur
Tersembunyi ASP.NET Fitur Tersembunyi dari Python
Fitur Tersembunyi TextPad
Fitur Tersembunyi Eclipse

Jangan menyebutkan fitur HTML 5.0, karena masih dalam draft kerja

Harap tentukan satu fitur per jawaban .

Menggunakan jalur absolut yang tidak bergantung protokol:

<img src="//domain.com/img/logo.png"/>

Jika browser melihat halaman dalam SSL melalui HTTPS, browser akan meminta aset tersebut dengan protokol https, jika tidak, browser akan memintanya dengan HTTP.

Hal ini mencegah pesan kesalahan "Halaman Ini Berisi Item Aman dan Tidak Aman" di IE, menjaga semua permintaan aset Anda dalam protokol yang sama.

Peringatan: Saat digunakan pada <link> atau @import untuk stylesheet, IE7 dan IE8 mengunduh file tersebut dua kali . Namun, semua penggunaan lainnya baik-baik saja.

Tag label secara logis menghubungkan label dengan elemen formulir menggunakan atribut "untuk". Sebagian besar browser mengubahnya menjadi tautan yang mengaktifkan elemen formulir terkait.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

The contentEditable properti untuk (IE, Firefox, dan Safari)

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

Ini akan membuat sel dapat diedit! Silakan, coba jika kamu tidak percaya padaku.

Menurut saya, tag optgroup adalah salah satu fitur yang jarang digunakan orang. Kebanyakan orang yang saya ajak bicara cenderung tidak menyadari bahwa itu ada.

Contoh:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Bit favorit saya adalah tag dasar, yang merupakan penyelamat jika Anda ingin menggunakan perutean atau penulisan ulang URL ...

Katakanlah Anda berada di:

www.anypage.com/folder/subfolder/

Berikut ini adalah kode dan hasil untuk link dari halaman ini.

Jangkar Reguler:

<a href="test.html">Click here</a>

Mengarah ke

www.anypage.com/folder/subfolder/test.html

Sekarang jika Anda menambahkan tag dasar

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

Jangkar sekarang mengarah ke:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror adalah peristiwa JavaScript yang akan diaktifkan tepat sebelum gambar palang merah kecil (di IE) ditampilkan.

Anda dapat menggunakan ini untuk menulis skrip yang akan menggantikan gambar yang rusak dengan beberapa konten alternatif yang valid, sehingga pengguna tidak perlu berurusan dengan masalah palang merah.

Pada pandangan pertama, ini bisa dianggap sama sekali tidak berguna, karena, tidakkah Anda tahu sebelumnya jika gambar itu tersedia? Tapi, jika Anda pertimbangkan, ada aplikasi valid yang sempurna untuk hal ini; Misalnya: misalkan Anda menyajikan gambar dari sumber daya pihak ketiga yang tidak Anda kontrol. Seperti gravatar kami di SO ... ini disajikan dari http://www.gravatar.com/ , sumber daya yang sama sekali tidak dikontrol oleh tim stackoverflow - meskipun dapat diandalkan. Jika http://www.gravatar.com/ turun, stackoverflow dapat mengatasinya dengan menggunakan onerror.

The <kbd>elemen untuk menandai untuk input keyboard

Ctrl+ Alt+Del

<blink>

Harus digunakan untuk hal penting di situs. Sebagian besar situs penting membungkus semua konten dalam sekejap.

<marquee>

Menciptakan efek pengguliran yang realistis, bagus untuk e-book, dll.

Edit: Sobat Easy-up, ini hanya upaya humor

Tidak terlalu terkenal tetapi Anda dapat menentukan lowsrcgambar yang akan ditampilkan lowsrcsaat memuat srcgambar:

<img lowsrc="monkey_preview.png" src="monkey.png" />

Ini adalah opsi yang bagus bagi mereka yang tidak menyukai gambar interlaced .

Sedikit hal sepele: pada satu titik properti ini cukup tidak jelas sehingga digunakan untuk mengeksploitasi Hotmail , sekitar tahun 2000.

DELdan INSuntuk menandai konten yang dihapus dan disisipkan:

HTML <del>sucks</del> <ins>rocks</ins>!

The tombol tag adalah baru input submittag dan banyak orang masih belum terbiasa dengan hal itu. Teks di tombol, misalnya, diberi gaya menggunakan tag tombol.

<button>
    <b>Click</b><br />
    Me!
</button>

Akan membuat tombol dengan dua baris, yang pertama mengatakan " Klik " dalam huruf tebal dan yang kedua mengatakan "Saya!". Coba di sini .

Tentukan css untuk dicetak

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

yang <dl> <dt>dan<dd> barang-barang yang sering terlupakan dan mereka berdiri untuk Daftar Definisi, Istilah Definisi dan Pengertian.

Mereka bekerja mirip dengan daftar tidak berurutan ( <ul>) tetapi bukannya entri tunggal itu lebih seperti daftar kunci / nilai.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

Tidak persis tersembunyi, tetapi (dan ini adalah kesalahan IE) tidak cukup banyak orang tahu tentang thead, tbody, tfoot untuk selera saya. Dan berapa banyak dari Anda yang tahu bahwa tfoot seharusnya muncul di atas tubuh dalam markup?

The wbratau kata-break tag. Dari Quirksmode:

(jeda kata) berarti: "Peramban dapat memasukkan jeda baris di sini, jika diinginkan." Jika browser tidak menganggap pemutusan baris diperlukan tidak ada yang terjadi.

<div class="name">getElements<wbr>ByTagName()</div>

Saya memberi browser opsi untuk menambahkan jeda baris. Ini tidak diperlukan pada resolusi yang sangat besar, jika tabel memiliki banyak ruang. Pada resolusi yang lebih kecil, bagaimanapun, jeda baris yang ditempatkan secara strategis menjaga tabel dari tumbuh lebih besar dari jendela, dan dengan demikian menyebabkan scrollbar horizontal.

Ada juga ­entitas HTML yang disebutkan di halaman yang sama. Ini sama seperti wbrtetapi ketika jeda dimasukkan, tanda hubung ( -) ditambahkan untuk menandakan jeda. Jenis seperti bagaimana hal itu dilakukan di media cetak.

Sebuah contoh:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTeks

Fitur yang paling jarang digunakan adalah kenyataan bahwa hampir setiap elemen, yang menyediakan konten yang terlihat pada halaman, dapat memiliki atribut 'title' [judul].

Menambahkan atribut seperti itu menyebabkan 'tooltip' muncul saat mouse 'diarahkan' di atas elemen, dan dapat digunakan untuk memberikan informasi yang tidak penting - tetapi berguna - dengan cara yang tidak menyebabkan halaman menjadi terlalu ramai . (Atau ini bisa menjadi cara untuk menambahkan informasi ke halaman yang sudah ramai)

Menerapkan beberapa kelas html / css ke satu tag. Posting yang sama di sini

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

Kita semua tahu tentang DTD atau Deklarasi Jenis Dokumen (hal-hal yang membuat halaman Anda gagal dengan validator W3C). Namun, DTD dapat diperpanjang dengan mendeklarasikan daftar atribut untuk elemen kustom.

Misalnya, validator W3C akan gagal untuk halaman ini karena behavior="mouseover"ditambahkan ke <p>tag. Namun, Anda dapat melakukannya dengan melakukan ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Lihat selengkapnya di tentang DTD Kustom di QuirksMode .

Kita dapat menetapkan string yang dikodekan basis 64 sebagai sumber / atribut href gambar, JavaScript, iframe, tautan

misalnya

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

Referensi

Bagaimana cara membuat gambar menggunakan markup HTML?

File Biner ke Base64 Encoder / Translator

Saya baru-baru ini mengetahui tentang fieldset dan label tag. Seperti di atas, tidak tersembunyi tetapi berguna untuk formulir.

Penjelasan <fieldset>

Contoh:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

Anda dapat menggunakan objecttag alih-alih sebuah iframeuntuk memasukkan dokumen lain di halaman:

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>adalah salah satu hal hebat yang sering dilewatkan orang saat membuat <select>daftar tersegmentasi .

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

adalah apa yang seharusnya Anda gunakan, bukan

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

Sebagian besar juga tidak menyadari fakta bahwa Anda dapat membedakan tombol formulir yang ditekan hanya dengan memberi mereka pasangan nama / nilai. Misalnya

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

Di sisi server, tombol sebenarnya yang ditekan kemudian dapat diperoleh dengan hanya memeriksa keberadaan parameter permintaan yang terkait dengan nama tombol. Jika tidaknull , maka tombol sudah ditekan.

Saya telah melihat banyak dari yang tidak perlu JS hacks / workarounds untuk itu, misalnya mengubah bentuk tindakan atau mengubah nilai masukan yang tersembunyi terlebih dahulu tergantung pada tombol ditekan. Ini sangat mencengangkan.

Juga, saya telah melihat hampir banyak peretasan / solusi JS untuk mengumpulkan yang dicentang dari beberapa kotak centang seperti pada baris tabel. Pada setiap pemilihan / pemeriksaan baris tabel, JS akan menambahkan indeks baris ke beberapa nilai yang dipisahkan koma dalam elemen input tersembunyi yang kemudian akan dipisahkan / diuraikan lebih lanjut di sisi server. Itu adalah hasil dari ketidaksadaran bahwa Anda dapat memberi beberapa elemen masukan dengan nama yang sama tetapi nilai yang berbeda dan Anda masih dapat mengaksesnya sebagai larik di sisi server. Misalnya

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

Ketidaksadaran akan memberi setiap kotak centang nama yang berbeda dan menghilangkan seluruh atribut nilai. Dalam beberapa situasi JS-hack / workaround-free, saya juga telah melihat beberapa keajaiban luar biasa yang tidak perlu di kode sisi server untuk membedakan item yang dicentang.

Tag Colgroup .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

Jika foratribut dari sebuah <label>tag tidak ditentukan, itu secara implisit disetel sebagai anak pertama <input>, yaitu

<label>Alias: <input name="alias" id="alias"></label>

setara dengan

<label for="alias">Alias:</label> <input name="alias" id="alias">

Tombol sebagai tautan, tanpa JavaScript :

Anda dapat meletakkan segala jenis file dalam tindakan formulir , dan Anda memiliki tombol yang berfungsi sebagai tautan. Tidak perlu menggunakan acara onclick atau semacamnya. Anda bahkan dapat membuka file di jendela baru dengan menempelkan "target" di formulir. Saya tidak banyak melihat teknik itu dalam penerapannya.

Gantilah ini

<a href="myfile.pdf" target="_blank">Download file</a>

dengan ini:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

Cara termudah untuk menyegarkan halaman dalam X detik - META Refresh

<meta http-equiv="refresh" content="600">

Nilai dalam konten menandakan detik setelah Anda ingin halaman disegarkan.
[Sunting]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

Untuk melakukan pengalihan sederhana!
(Terima kasih @rlb)

<html>, <head>dan <body>tag bersifat opsional. Jika Anda menghilangkannya, mereka akan disisipkan secara diam-diam oleh pengurai di tempat yang sesuai. Sangat valid untuk melakukannya dalam HTML (seperti yang tersirat <tbody>).

HTML secara teori adalah aplikasi SGML. Ini mungkin dokumen HTML 4 valid terpendek :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

Di atas tidak berfungsi di mana pun kecuali W3C Validator. Namun text/htmldokumen HTML5 valid terpendek berfungsi di mana-mana:

<!DOCTYPE html><title></title>

Itu lang atribut tidak sangat terkenal tapi sangat berguna. Atribut digunakan untuk mengidentifikasi bahasa konten baik di seluruh dokumen atau dalam satu elemen. Kode bahasa diberikan dalam kode Bahasa 2 huruf ISO (yaitu 'en' untuk bahasa Inggris, 'fr' untuk Prancis).

Ini berguna untuk browser yang dapat menyesuaikan tampilan tanda kutip, dll. Pembaca layar juga mendapatkan keuntungan dari lang atribut serta mesin pencari.

Sitepoint memiliki beberapa nice penjelasan darilang atribut.

Contoh

Tentukan bahasanya menjadi bahasa Inggris untuk seluruh dokumen, kecuali diganti dengan langatribut lain pada level yang lebih rendah di DOM.

<html lang="en">

Tentukan bahasa di paragraf berikut menjadi bahasa Swedia.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

The "! DOCTYPE" deklarasi . Jangan anggap itu fitur tersembunyi, tapi sepertinya itu tidak terkenal tapi sangat berguna.

misalnya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">