htmlxhtmllanguage-featureshidden-features

Reputation: 16196

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.

Upvotes: 109

Answers (30)

Binoj Antony

Reputation: 16196

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.example/index.html">

To do a simple redirect!
(Thanks @rlb)

Upvotes: 13

Fenton

Reputation: 250902

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.example/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.example/folder/subfolder/test.html

Now if you add base tag

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

The anchor now leads to:

www.anypage.example/test.html

Upvotes: 99

Paul Irish

Reputation: 49142

Using a protocol-independent absolute path:

<img src="//domain.example/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.

Upvotes: 244

Daniel Silveira

Reputation: 42543

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

Upvotes: 99

BalusC

Reputation: 1108702

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.

Upvotes: 25

Binoj Antony

Reputation: 16196

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

Upvotes: 56

aleemb

Reputation: 32065

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.

Upvotes: 84

Mark Glorie

Reputation: 3473

<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

Upvotes: 84

Russ Cam

Reputation: 125488

The <kbd> element for marking up for keyboard input

Ctrl+Alt+Del

Upvotes: 96

aleemb

Reputation: 32065

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.

Upvotes: 136

Brian Reiter

Reputation: 1359

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

Upvotes: 138

zneak

Reputation: 138051

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

Upvotes: 6

Erik Töyrä Silfverswärd

Reputation: 10496

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>

Upvotes: 11

Justin Johnson

Reputation: 31300

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

Upvotes: 25

Andrea

Reputation: 1

Superscript with <sup> x </sup>

Upvotes: 5

Michael Sharek

Reputation: 5069

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>

Upvotes: 26

HorusKol

Reputation: 8706

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.

Upvotes: 0

RichardOD

Reputation: 29157

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>

Upvotes: 102

Çağdaş Tekin

Reputation: 16651

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>

Upvotes: 22

moo

Reputation: 7789

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

Upvotes: 18

Wadih M.

Reputation: 13462

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>

Upvotes: 15

Kornel

Reputation: 100110

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

Upvotes: 12

Xinus

Reputation: 30513

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

Upvotes: 28

Anthony

Reputation: 37065

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.

Upvotes: 3

Xn0vv3r

Reputation: 18184

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

Upvotes: 10

aleemb

Reputation: 32065

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.

Upvotes: 34

Jehiah

Reputation: 2779

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>

Upvotes: 54

Binoj Antony

Reputation: 16196

Applying multiple html/css classes to one tag. Same post here

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

Upvotes: 38

Gumbo

Reputation: 655229

DEL and INS to mark deleted and inserted contents:

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

Upvotes: 67

Fabien Ménager

Reputation: 140205

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

Upvotes: 3

Hidden features of HTML

Answers (30)

Examples

Related Questions