[ACCEPTED]-Hidden features of HTML-hidden-features
Using a protocol-independent absolute path:
<img src="//domain.com/img/logo.png"/>
If 10 the browser is viewing an page in SSL through 9 HTTPS, then it'll request that asset with 8 the https protocol, otherwise it'll request 7 it with HTTP.
This prevents that awful "This 6 Page Contains Both Secure and Non-Secure 5 Items" error message in IE, keeping 4 all your asset requests within the same 3 protocol.
Caveat: When used on a <link> or 2 @import for a stylesheet, IE7 and IE8 download the file twice. All 1 other uses, however, are just fine.
The label tag logically links the label 3 with the form element using the "for" attribute. Most 2 browsers turn this into a link which activates 1 the related form element.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
The contentEditable property for (IE, Firefox, and 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>
This 2 will make the cells editable! Go ahead, try it if 1 you don't believe me.
I think the optgroup tag is one feature that people 2 don't use very often. Most people I speak 1 to don't tend to realise that it exists.
Example:
<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>
My favourite bit is the base tag, which 5 is a life saver if you want to use routing 4 or URL rewriting...
Let's say you are located 3 at:
www.anypage.com/folder/subfolder/
The following is code and results for 2 links from this page.
Regular Anchor:
<a href="test.html">Click here</a>
Leads to
www.anypage.com/folder/subfolder/test.html
Now if you 1 add base tag
<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>
The anchor now leads to:
www.anypage.com/test.html
<img onerror="{javascript}" />
onerror is a JavaScript event that will be fired 18 right before the little red cross (in IE) picture 17 is shown.
You could use this to write a 16 script that will replace the broken image 15 with some valid alternative content, so 14 that the user doesn't have to deal with 13 the red cross issue.
On the first sight 12 this can be seen as completely useless, because, wouldn't 11 you know previously if the image was available 10 in the first place? But, if you consider, there 9 are perfect valid applications for this 8 thing; For instance: suppose you are serving 7 an image from a third-party resource that 6 you don't control. Like our gravatar here 5 in SO... it is served from http://www.gravatar.com/, a resource 4 that the stackoverflow team doesn't control 3 at all - although it is reliable. If http://www.gravatar.com/ goes 2 down, stackoverflow could workaround this 1 by using onerror.
The <kbd> element for marking up for keyboard 1 input
Ctrl+Alt+Del
<blink>
Must be used for anything important on the 3 site. Most important sites wrap all of content 2 in blink.
<marquee>
Creates a realistic scrolling 1 effect, great for e-books etc.
Edit: Easy-up fellas, this was just an attempt at humour
Not very well known but you can specify 6 lowsrc for images which will show the lowsrc while loading 5 the src of the image:
<img lowsrc="monkey_preview.png" src="monkey.png" />
This is a good option 4 for those who don't like interlaced images.
A little 3 bit of trivia: at one point this property 2 was obscure enough that it was used to exploit Hotmail, circa 1 2000.
The button tag is the new input submit tag and a lot of people 6 are still not familiar with it. The text 5 in the button can for example be styled 4 using the button tag.
<button>
<b>Click</b><br />
Me!
</button>
Will render a button 3 with two lines, the first says "Click" in 2 bold and the second says "Me!". Try 1 it here.
Specify the css for printing
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
0
the <dl> <dt> and <dd> items are often forgotten and 4 they stand for Definition List, Definition 3 Term and Definition.
They work similarly 2 to an unordered list (<ul>) but instead of single 1 entries it's more like a key/value list.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
Not exactly hidden, but (and this is IE's 3 fault) not enough people know about thead, tbody, tfoot for 2 my tastes. And how many of you knew tfoot 1 is supposed to appear above tbody in markup?
The wbr or word-break tag. From Quirksmode:
(word break) means: "The 15 browser may insert a line break here, if 14 it wishes." It the browser does not 13 think a line break necessary nothing happens.
<div class="name">getElements<wbr>ByTagName()</div>I 12 give the browser the option of adding 11 a line break. This won't be necessary 10 on very large resolutions, when the table 9 has plenty of space. On smaller resolutions, however, such strategically 8 placed line breaks keep the table from 7 growing larger than the window, and thus 6 causing horizontal scrollbars.
The there 5 is also the ­ HTML entity mentioned on the 4 same page. This is the same as wbr but when 3 a break is inserted a hypen (-) is added 2 to signify a break. Kind of like how it 1 is done in print.
An example:
Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­
A much underused feature is the fact that 10 just about every element, that provides 9 visible content on the page, can have a 8 'title' attribute.
Adding such an attribute 7 causes a 'tooltip' to appear when the mouse 6 is 'hovered' over the element, and can be 5 used to provide non-essential - but useful 4 - information in a way that doesn't cause 3 the page to become too crowded. (Or it can 2 be a way of adding information to an already 1 crowded page)
Applying multiple html/css classes to one 1 tag. Same post here
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
We all know about DTD's or Document Type 8 Declarations (those things which make you 7 page fail with the W3C validator). However, it 6 is possible to extend the DTDs by declaring 5 an attribute list for custom elements.
For 4 example, the W3C validator will fail for this page because 3 of behavior="mouseover" added to the <p> tag. However, you can 2 make it pass by doing this:
<!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>
]>
See more at about 1 Custom DTDs at QuirksMode.
We can assign base 64 encoded string as 1 a source/href attribute of image, JavaScript,iframe,link
e.g.
<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>
References
I recently found out about the fieldset 2 and label tags. As above, not hidden but 1 useful for forms.
Example:
<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>
You can use the object tag instead of an iframe to include 1 another document in the page:
<object data="data/test.html" type="text/html" width="300" height="200">
alt : <a href="data/test.html">test.html</a>
</object>
<optgroup> is a great one that people often miss out 2 on when doing segmented <select> lists.
<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>
is what 1 you should be using instead of
<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>
Most are also unaware of the fact that you 28 can distinguish the form button pressed 27 by just giving them a name/value pair. E.g.
<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>
In 26 the server side, the actual button pressed 25 can then be obtained by just checking the 24 presence of the request parameter associated 23 with the button name. If it is not null, then 22 the button was pressed.
I've seen a lot of unnecessary JS 21 hacks/workarounds for that, e.g. changing 20 the form action or changing a hidden input 19 value beforehand depending on the button 18 pressed. It's simply astonishing.
Also, I've 17 seen almost as many JS hacks/workarounds 16 to gather the checked ones of multiple checkboxes 15 like as in table rows. On every select/check 14 of a table row the JS would add the row 13 index to some commaseparated value in a 12 hidden input element which would then be 11 splitted/parsed further in the server side. That's 10 result of unawareness that you can give 9 multiple input elements the same name but a 8 different value and that you can still access them 7 as an array in the server side. E.g.
<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>
...
The 6 unawareness would give each checkbox a different 5 name and omit the whole value attribute. In 4 some JS-hack/workaround-free situations 3 I've also seen some unnecessarily overwhelming 2 magic in the server side code to distinguish 1 the checked items.
<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>
0
If the for attribute of a <label> tag isn't specified, it 2 is implicitly set as the first child <input>, i.e.
<label>Alias: <input name="alias" id="alias"></label>
is 1 equivalent to
<label for="alias">Alias:</label> <input name="alias" id="alias">
Button as link, no JavaScript:
You can put any kind of file in the form action, and 6 you have a button that acts as a link. No 5 need to use onclick events or such. You 4 can even open-up the file in a new window 3 by sticking a "target" in the 2 form. I didn't see that technique in application 1 much.
Replace this
<a href="myfile.pdf" target="_blank">Download file</a>
with this:
<form method="get" action="myfile.pdf" target="_blank">
<input type="submit" value="Download file">
</form>
Simplest way to refresh the page in X seconds 3 - META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds 2 after which you want the page to refresh.
[Edit]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
To 1 do a simple redirect!
(Thanks @rlb)
<html>, <head> and <body> tags are optional. If you omit them, they 7 will be silently inserted by the parser 6 in appropriate places. It's perfectly valid to do so in 5 HTML (just like implied <tbody>).
HTML in theory is an 4 SGML application. This is probably the shortest 3 valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
The above doesn't work 2 anywhere except W3C Validator. However shortest 1 valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
The lang attribute is not very well known but 14 very useful. The attribute is used to identify 13 the language of the content in either the 12 whole document or in a single element. Langage 11 codes are given in ISO 2-letter Language 10 code (i.e. 'en' for English, 'fr' for French).
It's 9 useful for browsers who can adjust their 8 display of quotation marks, etc. Screen 7 readers also benefit from the lang attribute 6 as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
Examples
Specify 5 the language to be English for the whole 4 document, unless overridden by another lang attribute 3 on a lower level in the DOM.
<html lang="en">
Specify the 2 language in the following paragraph to be 1 Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
The "!DOCTYPE" declaration. Don't think it's a hidden feature, but 1 it seems it's not well known but very useful.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
That's only lowly related to HTML, but very 15 few people know it.
People abuse the <meta> tag 14 with the http-equiv attribute:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Refresh" content="5; url=somewhere/"/>
However, many developers 13 don't even know what this does. The http-equiv attribute 12 means that the tag is meant to replace an HTTP header in cases where you aren't in control of them. Therefore, most 11 work done through http-equiv should be done on the 10 server side.
Besides, it's not as powerful: several 9 properties of a document can't be changed 8 through <meta> tags. Content-Type in a <meta> tag can tell the browser 7 to use a certain charset, but most will 6 ignore any change to the MIME type of the 5 document (so you can't make a text/html document 4 an application/xhtml+xml one that way).
Both tags from the example 3 should be replaced by these simple calls:
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>
It's 2 bound to work on any HTTP-compliant browser 1 (which means, pretty much every single browser).
Superscript with <sup> x </sup>
0
A form can be submitted when you press the 4 Enter key on a text input only if there 3 is a submit button in the form. Try it here. It 2 won't work if you don't change the type 1 of the button to "submit".
My favorite hidden feature was already mentioned, which 12 is the "base" tag. Very handy for when you 11 have a chunk of code that has relative URLs 10 and suddenly they all move but your page 9 doesn't.
But one that wasn't mentioned is 8 the list header tag <lh>. It probably wasn't 7 mentioned because it is considered "depreciated" but 6 most browsers still support it. I don't 5 know why it was phased out, nearly every 4 unordered list I make could use a header, and 3 it feels icky just dropping a h3 tag, and 2 it feels just incorrect to make the first 1 list item the title of the list.
Definition lists:
<dl>
<dt>Some Term</dt>
<dd>Some description</dd>
<dd>Some other description</dd>
<dt>Another Word/Phrase</dt>
<dd>Some description</dd>
</dl>
I've also retasked this 2 for form layouts and navigation menus for 1 various sites.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.