Hidden features of HTML

HTML being the most widely used language (at least as a markup language) has not gotten its due credit.
Considering that it has been around for so many years, things like the FORM / INPUT controls have still remained same with no new controls added.

So at least from the existing features, do you know any features that are not well known but very useful.

Of course, this question is along the lines of:

Hidden Features of JavaScript
Hidden Features of CSS
Hidden Features of C#
Hidden Features of VB.NET
Hidden Features of Java
Hidden Features of classic ASP
Hidden Features of ASP.NET
Hidden Features of Python
Hidden Features of TextPad
Hidden Features of Eclipse

Do not mention features of HTML 5.0, since it is in working draft

Please specify one feature per answer.

Using a protocol-independent absolute path:

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

If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP.

This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.

Caveat: When used on a <link> or @import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.

The label tag logically links the label with the form element using the "for" attribute. Most browsers turn this into a link which activates 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 will make the cells editable! Go ahead, try it if you don't believe me.

I think the optgroup tag is one feature that people don't use very often. Most people I speak 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 is a life saver if you want to use routing or URL rewriting...

Let's say you are located at:

www.anypage.com/folder/subfolder/

The following is code and results for 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 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 right before the little red cross (in IE) picture is shown.

You could use this to write a script that will replace the broken image with some valid alternative content, so that the user doesn't have to deal with the red cross issue.

On the first sight this can be seen as completely useless, because, wouldn't you know previously if the image was available in the first place? But, if you consider, there are perfect valid applications for this thing; For instance: suppose you are serving an image from a third-party resource that you don't control. Like our gravatar here in SO... it is served from http://www.gravatar.com/, a resource that the stackoverflow team doesn't control at all - although it is reliable. If http://www.gravatar.com/ goes down, stackoverflow could workaround this by using onerror.

The <kbd> element for marking up for keyboard input

Ctrl+Alt+Del

<blink>

Must be used for anything important on the site. Most important sites wrap all of content in blink.

<marquee>

Creates a realistic scrolling 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 lowsrc for images which will show the lowsrc while loading the src of the image:

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

This is a good option for those who don't like interlaced images.

A little bit of trivia: at one point this property was obscure enough that it was used to exploit Hotmail, circa 2000.

DEL and INS to mark deleted and inserted contents:

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

The button tag is the new input submit tag and a lot of people are still not familiar with it. The text in the button can for example be styled using the button tag.

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

Will render a button with two lines, the first says "Click" in bold and the second says "Me!". Try 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" />

the <dl> <dt> and <dd> items are often forgotten and they stand for Definition List, Definition Term and Definition.

They work similarly to an unordered list (<ul>) but instead of single 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 fault) not enough people know about thead, tbody, tfoot for my tastes. And how many of you knew tfoot is supposed to appear above tbody in markup?

The wbr or word-break tag. From Quirksmode:

> (word break) means: "The browser > may insert a line break here, if it > wishes." It the browser does not think > a line break necessary nothing > happens. > >

> > I give the browser the option of > adding a line break. This won't be > necessary on very large resolutions, > when the table has plenty of space. On > smaller resolutions, however, such > strategically placed line breaks keep > the table from growing larger than the > window, and thus causing horizontal > scrollbars.

The there is also the ­ HTML entity mentioned on the same page. This is the same as wbr but when a break is inserted a hypen (-) is added to signify a break. Kind of like how it 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 just about every element, that provides visible content on the page, can have a 'title' attribute.

Adding such an attribute causes a 'tooltip' to appear when the mouse is 'hovered' over the element, and can be used to provide non-essential - but useful - information in a way that doesn't cause the page to become too crowded. (Or it can be a way of adding information to an already crowded page)

Applying multiple html/css classes to one 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 Declarations (those things which make you page fail with the W3C validator). However, it is possible to extend the DTDs by declaring an attribute list for custom elements.

For example, the W3C validator will fail for this page because of behavior="mouseover" added to the <p> tag. However, you can 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 Custom DTDs at QuirksMode.

We can assign base 64 encoded string as 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

How can I construct images using HTML markup?

Binary File to Base64 Encoder / Translator

I recently found out about the fieldset and label tags. As above, not hidden but useful for forms.

<fieldset> explanation

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 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 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 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 can distinguish the form button pressed 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 the server side, the actual button pressed can then be obtained by just checking the presence of the request parameter associated with the button name. If it is not null, then the button was pressed.

I've seen a lot of unnecessary JS hacks/workarounds for that, e.g. changing the form action or changing a hidden input value beforehand depending on the button pressed. It's simply astonishing.

Also, I've seen almost as many JS hacks/workarounds to gather the checked ones of multiple checkboxes like as in table rows. On every select/check of a table row the JS would add the row index to some commaseparated value in a hidden input element which would then be splitted/parsed further in the server side. That's result of unawareness that you can give multiple input elements the same name but a different value and that you can still access them 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 unawareness would give each checkbox a different name and omit the whole value attribute. In some JS-hack/workaround-free situations I've also seen some unnecessarily overwhelming magic in the server side code to distinguish the checked items.

Colgroup tag.

<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>

If the for attribute of a <label> tag isn't specified, it is implicitly set as the first child <input>, i.e.

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

is 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 you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn't see that technique in application 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 - META Refresh

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

The value in content signifies the seconds after which you want the page to refresh.
[Edit]

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

To do a simple redirect!
(Thanks @rlb)

<html>, <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It's perfectly valid to do so in HTML (just like implied <tbody>).

HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:

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

The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:

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

The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (i.e. 'en' for English, 'fr' for French).

It's useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.

Sitepoint has some nice explanation of the lang attribute.

Examples

Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.

<html lang="en">

Specify the language in the following paragraph to be 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 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 few people know it.

People abuse the <meta> tag 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 don't even know what this does. The http-equiv attribute means that the tag is meant to replace an HTTP header in cases where you aren't in control of them. Therefore, most work done through http-equiv should be done on the server side.

Besides, it's not as powerful: several properties of a document can't be changed through <meta> tags. Content-Type in a <meta> tag can tell the browser to use a certain charset, but most will ignore any change to the MIME type of the document (so you can't make a text/html document an application/xhtml+xml one that way).

Both tags from the example should be replaced by these simple calls:

<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>

It's bound to work on any HTTP-compliant browser (which means, pretty much every single browser).

Superscript with <sup> x </sup>

A form can be submitted when you press the Enter key on a text input only if there is a submit button in the form. Try it here. It won't work if you don't change the type of the button to "submit".

My favorite hidden feature was already mentioned, which is the "base" tag. Very handy for when you have a chunk of code that has relative URLs and suddenly they all move but your page doesn't.

But one that wasn't mentioned is the list header tag <lh>. It probably wasn't mentioned because it is considered "depreciated" but most browsers still support it. I don't know why it was phased out, nearly every unordered list I make could use a header, and it feels icky just dropping a h3 tag, and it feels just incorrect to make the first list item the title of the list.

Special characters for math, greek,... not known very well

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 for form layouts and navigation menus for various sites.