ansaurus

Question

Answer 1

+13 A:

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"&gt;

Peter 2009-06-05 05:02:34

And not to mention "mandatory for most current markup languages and without one it is impossible to reliably validate a document"... http://validator.w3.org/docs/help.html#faq-doctype

Svish 2009-06-05 08:06:41

I don't think this is "not well known" anymore. In the time between IE 6 and IE 7, doctype use went from ~1% to >50%.

eyelidlessness 2009-06-06 19:59:29

@eyelidlessness Most IDE includes this tag that's why its use increased. I think this tag is not well known.

Daniel Moura 2009-06-07 22:08:12

And using a strict doctype fixes 95% of browser inconsistencies.

DisgruntledGoat 2009-07-10 12:11:37

Part of the standart and used by 99% of the developers out there doesn't sound like "hidden feature".

Hugo 2010-05-07 14:06:22

HTML5 makes the doctype declaration easy to remember and type, for all of us using regular text editors. It's just `<!doctype html>`. That is reason alone to start using HTML5. :)

Shtééf 2010-06-03 16:46:31

Answer 2

+10 A:

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)

Binoj Antony 2009-06-05 05:05:47

Of course, working out which elements need refreshing and then updating them via AJAX results in a much nicer user experience...

Steve Harrison 2009-06-05 07:45:40

META refresh doesn't really do anything good in pages where there's also some king of user form activity, because it can interrupt user's form fill-in and discard all the work. I think there's rarely an occasion where these kind of refreshes would be best. It's just the easy way out normally.

Robert Koritnik 2009-06-05 07:48:22

Well all features as usual has to be used wisely.

Binoj Antony 2009-06-05 07:56:34

/me hates pages that refresh like that... should be banned =/

Svish 2009-06-05 08:09:15

Upvoted. Cause i didn't know this one. :)

Arnis L. 2009-06-06 19:26:44

Nothing wrong with this, as long as you put it under the user's control (I had an app that provided a user-selectible "auto-refresh" option, turned off by default).

Jeffrey Kemp 2009-06-17 05:16:22

This can also be useful if set to a little less than the session timeout to notify the user that his session has timed-out and was removed.

fforw 2009-06-21 21:33:43

I only find this useful if a page/resource was removed and the webmaster/author wants to explain why I'm suddenly off to another URL, without making me click on a new link.

David Thomas 2009-07-03 15:02:13

@Svish, this is useful in sports websites. The score of a game currently in progress can be updated using this.

Shivasubramanian A 2009-07-08 13:06:21

Also super simple way to do a redirect. ; ) <meta HTTP-EQUIV="REFRESH" content="0; url=http://www.foobar.com/index.html">

rlb.usa 2009-07-09 19:46:07

Short timeouts break back button.

porneL 2009-07-09 19:59:30

META REFRESH also causes the browser to perform cache validation on even fresh resources, which incurs a performance cost.

EricLaw -MSFT- 2009-12-27 21:36:30

HorusKol 2010-06-03 06:15:00

This should be hidden in a box, and thrown out to sea.

UpTheCreek 2010-06-09 09:41:37

OMG! CHOOSE: REQUIRE THE USER TO RELOAD OR USE AJAX! Or simply read articles on usability ^^

Time Machine 2010-06-11 21:20:05

Answer 3

+25 A:

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>

Michael Sharek 2009-06-05 05:07:31

Please provide a sample use this.

Binoj Antony 2009-06-05 06:09:39

Explanation: http://www.w3schools.com/TAGS/tag_fieldset.asp -- Example: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_fieldset

MatrixFrog 2009-06-05 07:36:45

Discovered fieldset from aspnet mvc sample page. ^^

Arnis L. 2009-06-06 19:19:46

Didn't know about this one. Heres the W3c spec: http://www.w3.org/TR/html401/interact/forms.html#h-17.10

MitMaro 2009-07-03 14:34:23

Fieldsets and legends are great. A really nice way to mark up your forms.

Neil Aitken 2010-01-19 15:08:01

Fieldset is kind of flaky. Most browsers have major rendering hacks for them.

zneak 2010-06-03 18:57:54

Answer 4

+64 A:

<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

Mark Glorie 2009-06-05 05:08:35

As I know, marquee is not html specific, but depends on IE

Peter 2009-06-05 05:10:48

What can I say? I did it for the lulz

Mark Glorie 2009-06-05 05:12:32

Too much hate to laugh :p

Svish 2009-06-05 08:11:00

That was brave of you. no points though

borisCallens 2009-06-05 09:41:00

Blink for the win!

Arnis L. 2009-06-06 19:28:54

blink is heavilty discouraged, unless you want to annoy users. Its support isn't perfect either.

CrazyJugglerDrummer 2009-06-10 01:23:53

I thought it was funny

Hugoware 2009-06-22 17:58:38

Perhaps the question ought to have specified that you shouldn't list features that we want to *remain* hidden.

Ben Blank 2009-06-22 18:52:22

...I've used <blink>, as part of a psuedo-terminal styling for a div displaying code (:before {content: "drthomas@house: ~$";} :after {content: "_"; text-decoration: blink; } ...it was awesome. I should probably seek help. =]

David Thomas 2009-07-03 15:00:12

Those two tags single-handedly (or is it double-handedly) induce the necessary rage to boil the oceans (who needs 128bit filesystems to do that?).

Andrew Szeto 2009-07-09 19:57:07

on early ages of html pages, these were web developers' secret weapons to have the wow effect from viewer. But those days are past now, they should be removed from html permanently :)

Sinan Y. 2009-09-26 10:29:43

<marquee><blink>The MOST annoying HTML tags ever!!!</blink></marquee>These are not hidden they are just not used for a reason.

x13 2009-10-01 19:30:47

I wrap my entire page in Marquee and Blink because I am just that cool

Thqr 2010-06-03 05:32:25

Also worth noting is that marquee nested inside blink does not work. Blink must be nested inside marquee for *awesomeness* - http://jsbin.com/evesu3/3

Anurag 2010-06-03 06:25:49

Please. The only legitimate use for <blink> is: Schroedinger's cat is <blink>not</blink> dead. (I thought this was on xkcd, but I can't find it at the moment.)

Christopher Creutzig 2010-07-06 20:33:34

hahahaha, I love this

Alex Nolan 2010-09-01 18:12:52

Answer 5

+2 A:

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

Peter 2009-06-05 05:15:07

And not really needed in a world with UTF-8

David Dorward 2009-06-05 08:49:12

Not really needed, but I for one prefer π to π

Ant 2009-06-05 09:04:05

I said UTF-8 not numeric character references. i.e. π

David Dorward 2009-06-05 09:12:01

@David Dorward: sometimes, it's easier to look up the entity on a list than it is to get your keyboard to print ł or Æ, for example.

Adriano Varoli Piazza 2009-07-08 12:59:45

If you've looked up the entity on a list, then you can either transcribe the entity, copy and paste the entity or ... just copy and paste the character itself :)

David Dorward 2009-07-23 09:36:12

Reading the source code back afterwards is rather easier if you have the actual characters in it too.

David Dorward 2009-07-23 09:36:44

@David Dorward: but π is just a Greek character (as are all[most] other 'numeric character references')

HorusKol 2010-06-03 06:19:12

@HorusKol — No, character references are (to various degrees) obtuse bits of ASCII that can be translated into characters given software, a look up table or being able to remember particular ones. Actual characters are (as mentioned above) easier to read.

David Dorward 2010-06-03 08:42:39

@David Dorward: ah, I can see the difference now - thanks

HorusKol 2010-06-03 11:01:58

@David: I prefer to type the characters if I can (yay for a `Compose` key) but if I can't, having the entity form of all of them is rather convenient and much better than nothing. It's also safer when the page has to go through non-8bit-safe transfer. (Thankfully rare nowadays!)

Donal Fellows 2010-06-03 13:20:11

Answer 6

+24 A:

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>

Zach 2009-06-05 05:19:15

Which ends up working almost exactly like an iframe except that it is less well supported and has fewer features.

David Dorward 2009-06-05 08:47:55

iframe is deprecated, hopefully we'll get better support soon,

CrazyJugglerDrummer 2009-06-10 01:16:02

iframe is not deprecated in HTML 5.

Zach 2009-06-10 04:27:51

Does it prevent XSS attacks from the embedded page?

Charlie Somerville 2009-06-27 07:35:03

I believe it uses SOP, same as with iframes.

Zach 2009-06-29 01:59:53

Is it different at all?

Casebash 2010-06-22 04:34:55

Answer 7

+120 A:

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

Brian Reiter 2009-06-05 06:16:45

yes, amazing how few sites actively use this. I have seen sites using js to do this...

borisCallens 2009-06-05 09:33:12

That's a good practice to use label tags for form fields. But really, that's not a *hidden* feature.

çağdaş 2009-06-06 19:04:56

Discovered this one quite recently.

Arnis L. 2009-06-06 19:15:55

cagdas, there aren't really hidden features in HTML, it's a specified standard.

eyelidlessness 2009-06-06 19:44:35

To expand on the answer, one can also wrap an input with a label and omit the for attribute: <label>Fiscal Year <input name="fiscalYear" type="text" /></label>

eyelidlessness 2009-06-06 19:45:30

Also, +1 because while this is an HTML basic, too many developers remain ignorant of it.

eyelidlessness 2009-06-06 19:46:11

+1 This is also good for screen readers and section 508 compatibility.

ya23 2009-06-06 22:57:20

Huh, this is actually one of the first things I learned about HTML... still +1

DeadHead 2009-06-22 17:52:03

@eyelidlessness: Yes, but now you can put your label at an arbitrary place in your HTML. Also I thought nesting them gave weird rendering issues somehow, but I don't remember what the problem was.

borisCallens 2009-07-03 14:30:29

Using checkboxes and radio buttons without it should be a crime.

porneL 2009-07-09 19:56:07

Knew it almost from the beginning.Actually, mostly it is used with check boxes. But no wonder that it will do for other elements.

Sorantis 2009-07-23 09:31:15

I have seen tons of HTML which does **not** use this, so if not "hidden" it's still certainly a "lesser-known" feature.

system PAUSE 2009-09-22 19:52:00

@eyelidlessness: with some browsers (IE), that does not work properly. For example, if you click the label for checkbox, it will not toggle.

Milan Babuškov 2009-12-02 21:22:06

I was surprised to discover the link behaviour in GUI browsers - but I'd already been using label/input pairs for accessibility in text and speech browsers

HorusKol 2010-06-03 06:00:50

Answer 8

+57 A:

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

Binoj Antony 2009-06-05 07:40:23

Discovered that some weeks ago

Daniel Moura 2009-06-07 21:45:32

Not really hidden imo.

Dmitri Farkov 2009-09-22 19:35:11

This is in common usage.

UpTheCreek 2010-06-09 09:14:43

If you haven't dealt with this before, I hope that you haven't made any production websites before...

Tchalvak 2010-06-25 16:43:27

Answer 9

+86 A:

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

Sohnee 2009-06-05 07:41:41

now this is one feature I didn't know about..

Here Be Wolves 2009-06-05 07:44:20

me neither... have to check it a bit more.

Robert Koritnik 2009-06-05 07:49:53

You could also just use /images/image.png, with a leading slash. :-)

molf 2009-06-05 07:56:06

The base tag is a nuclear option - it's the equivalent of #define: if you don't keep track of it, make it really clear to future developers, and make it a really low level part of the site architecture it can lead to frustrating non-obvious bugs. I've never *needed* this, use with caution.

annakata 2009-06-05 08:11:14

I've had fun with it interfering with JavaScript and CSS in unexpected ways. Best leave base well alone and handle the problem with server side logic.

David Dorward 2009-06-05 08:53:41

It can only really interfere with things in a very expected way - it sets the base path for the page. I'm using it with CSS and JavaScript (including jQuery) with absolutely no problem.

Sohnee 2009-06-05 09:04:25

Things get unexpected when different browsers handle it differently.

David Dorward 2009-06-05 09:09:34

Yes, I have also seen the base tag interfere with my JavaScript when trying to dynamically load CSS files into the page. Also, a bug in IE6 requires you to explicitly close the tag (</base>), which is invalid. Conditional comments can help with that.

avdgaag 2009-06-05 15:03:24

Note that the base URL is applied to every relative URL and not just to relative URL paths. So the reference `#top` would be resolved to “top” in the root index document and to “top” in the same document.

Gumbo 2009-06-06 17:25:00

To expand on Gumbo's comment, the base tag works great for the combination of relative paths and rewritten URLs, but it means you must expand anchor links to their "full" relative path. So to link to #top on /some/page, your href should be some/page#top

eyelidlessness 2009-06-06 19:43:38

I find this extremely handy in situations where I have to 'view source' and download the HTML of a page to work with it. Once the source is downloaded, you can add a BASE element with the appropriate href attribute. This way, you can work locally after downloading only the source HTML... no need to download all the javascript, css, and images.

Andy Ford 2009-06-09 20:23:00

I've found it useful when I'm doing some sort of url redirection behind the scenes but want it to be transparent to the user. Sure, you're viewing http://www.example.com/page/foo/query/arg1/arg2, but the server is really serving up http://www.example.com/fooquery.php, and all of the relative links assume this.

Brian 2009-07-24 17:55:30

Note that, when using `BASE`, you should use a conditional comment to close the (normally self-closing) element in IE6, like so: `<base href="http://example.com/foo/bar/">`Read http://crisp.tweakblogs.net/blog/760/ie6-fucking-up-base-%28again%29.html for more details.

Mathias Bynens 2010-02-09 08:04:00

@ Mathias Bynens - Actually, the issue discussed is a problem with a link scanner - and I'm sure as hell not writing code to infect my web page just for the benefit of a link scanner.

Sohnee 2010-02-09 08:34:10

It's also got the terrible side effect of modifying anchor links (you know, `#stuff`) so they point to `<base>#stuff`.

zneak 2010-06-03 16:32:12

@zneak - it does do that, but it's not a side-effect - it's by design.

Sohnee 2010-06-04 07:39:13

@Sohnee: okay, it's not a side effect to the spec. But maybe it's a side effect to what people would like.

zneak 2010-06-04 17:56:28

For an interesting use case for the base tag, see jQuery Mobile: http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-navmodel.html

Oskar Austegard 2010-10-19 18:15:58

Answer 10

+35 A:

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)

belugabob 2009-06-05 08:00:13

Yes, the "title" attribute is quite useful—especially for elements that are meant to be clicked.

Steve Harrison 2009-06-05 08:25:27

The tooltip that appears is browser-specific. Not all browsers will display the title attribute the same. But it is a nice feature that I certainly use.

T Pops 2009-06-17 14:19:58

The title attribute is useful, but only when used appropriately. Most browsers only render the tooltip for a few seconds before it disappears. I hate it when designers feel the need to fill up the title attribute with 3 or 4 lines of text which causes you have to mouse over, then mouse on again to read the rest of it.

nbv4 2009-07-11 04:11:15

Answer 11

A:

Judging from the 'I didn't know that' comments, the biggest hidden feature of HTML is...

Dynamic HTML, by Danny Goodman

It's the ultimate reference guide for HTML (Yes, even more ultimate than Google!)

belugabob 2009-06-05 08:05:36

While useful, I think this answer is a little off-topic.

Steve Harrison 2009-06-05 08:23:55

And skimming through until I found a some content (i.e. not TOC or intro material) I was impressed that the first paragraph I read featured an error (or, at best, misleading information)

David Dorward 2009-06-05 08:52:47

Answer 12

+43 A:

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?

annakata 2009-06-05 08:16:54

I heard of this last days as i had to work some sites out for php (I didn't work with web-development through my career before) its nice, you can make really nice designed tables with that.

BeowulfOF 2009-06-05 09:18:52

I only recently learned that they aren't obligatory :P

borisCallens 2009-06-05 09:33:53

boris callens, Yeah, tbody is implied if none of thead, tbody and tfoot are present.

eyelidlessness 2009-06-06 20:12:41

If IE5 had implemented TBODY properly, then more people would use it. This was the main problem several years ago. Mozilla and Opera supported scrolling TBODY which was really cool; unfortunately, IE5 did not.

staticsan 2009-06-22 01:07:24

I didn't know you didn't have to use tbody and thead.

Rich Bradshaw 2009-06-22 18:29:31

They are useful for printing because it should put the `thead` and `tfoot` at the top and bottom of each page. It's a shame there's no mechanism for repeating `thead` in the browser, when you have long long tables.

DisgruntledGoat 2009-07-09 19:57:33

I knew that tfoot went above tbody, and I think it's pretty stupid. I put my tfoot below, where it made sense, got a validator error, moved the tfoot above the tbody (confused but always compliant), and guess what?! When you try to highlight the table, the browser (FF at least) highlights the foot BEFORE the body, even though it is visually below the body! And then!!! when you copy it to a text editor, it's ABOVE the body visually. Totally arbitrary rule.

Anthony 2009-07-23 09:34:09

@Anthony: makes sense if you have a slow connection, it means you can see all the headers and footers while the table content is still loading.

me_and 2009-12-31 10:07:22

Answer 13

+68 A:

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.

aleemb 2009-06-05 08:36:20

This I didn't know. Can it be used for "loading" animation?

borisCallens 2009-06-05 09:34:34

I'm getting a fraud warning in Opera from that "exploit Hotmail" link. :o

jrista 2009-06-06 17:06:52

yeah, I use Opera as well and get that fraud warning... what is it?

Svish 2009-06-06 17:09:58

It's a security website, it's safe.

Joey Robert 2009-06-06 17:24:34

+1, I had no idea this attribute existed.

eyelidlessness 2009-06-06 19:47:43

But this attribute it proprietary. http://msdn.microsoft.com/library/ms534138(VS.85).aspx

Gumbo 2009-06-06 22:05:34

This attribute has been deprecated since HTML4 - you shouldn't use it in production websites.

Beejamin 2010-05-15 15:39:13

Answer 14

+38 A:

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

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

Binoj Antony 2009-06-05 08:48:39

That's sooo nice!

furtelwart 2009-06-05 09:05:14

Those are HTML classes, not CSS classes. CSS doesn't have classes (it has class selectors). HTML classes are usful for things other than CSS.

David Dorward 2009-06-05 09:10:14

Yes, that's why VS should learn not to nag about missing classes (some of us use classes for JS...)

borisCallens 2009-06-05 09:35:30

Wow! I simply cannot get over the fact that people find this to be a "hidden" feature. Boy do I feel stupid about posting some "really hidden" features because people who upvoted this will probably not even come close to fathoming what extending a DTD means.

aleemb 2009-06-05 11:35:47

Be aware that Internet Explorer tends to ignore or mistreat CSS rules with multiple classes, like p.foo.bar { color: #000 }.

avdgaag 2009-06-05 15:00:09

avdgaag, why dont you use syntax like p.foo,p.bar instead?

Joe Philllips 2009-06-06 18:52:31

d03boy, p.foo, p.var is not the same as p.foo.bar. The former selects any paragraph with either the class "foo" or "var", the latter selects an paragraph with both classes.

eyelidlessness 2009-06-06 20:59:07

The thing regarding HTML classes is a good point, because it brings me onto a point- html should not be made aware of css.. you 'should' be able to create html, and pass it to a designer that can implement their design without needing to change the html (not quite the case yet ;)).. so this comes down to your naming and way you use classes.. don't create classes to target css properties.. use classes to identify what the element 'is'.

meandmycode 2009-06-06 21:34:59

IE6 only takes the last class. So if you have 2 declarations: ".text" and ".good" in your css. and you add a declaration for ".text .good", the properties will only apply to .good.

Dmitri Farkov 2009-09-22 19:29:31

Technically, "Foo Bar BlackBg" is a single class, and p.foo is just syntactic sugar for p[class~=foo] (see [spec](http://www.w3.org/TR/CSS2/selector.html#class-html)). It is easier to think about it as having multiple classes, though.

Tgr 2010-05-01 14:29:50

Answer 15

+112 A:

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.

aleemb 2009-06-05 08:55:05

The question calls for features which are not introduced by HTML5

David Dorward 2009-06-05 09:14:07

Works in Safari 4, too! No idea if it works in version 3, though.

Tyson 2009-06-05 09:14:44

"contentEditable" works in Safari 3+.

Steve Harrison 2009-06-05 09:23:33

No freaking way! gonna have a look at browser support though...

borisCallens 2009-06-05 09:37:58

Pretty cool! Works in Opera 9, too.

MiseryIndex 2009-06-05 14:11:52

You should've put it as contenteditable="true" IMHO

victor hugo 2009-06-06 17:09:36

David Dorward, It's not exactly fair to say it's introduced with HTML5, as contentEditable was introduced by MS in IE 5.5, but yes it hasn't been standardized until HTML5;Tyson Victor H Valle, depends on your doctype. HTML 4 should expand it to ="true" when collapsed.

eyelidlessness 2009-06-06 19:53:22

@eyelidlessness OK, so it was introduced as a proprietry thing. It isn't part of any HTML recommendation, which the question strongly implies as a requirement by ruling out the HTML5 draft.

David Dorward 2009-06-08 09:54:23

the try it link doesn't lead to an appropriate example

CrazyJugglerDrummer 2009-06-10 01:17:35

Wow, fun! Also, margins-editable, apparently. At least in Firefox 3. @CrazyJugglerDrummer, you can edit it yourself and click the button. You don't even need a div: <td contenteditable>...</td> works just as well.

MatrixFrog 2009-06-20 18:48:55

shouldn't we say <div contenteditable="1"> ?

Binoj Antony 2009-07-09 05:48:02

@Binoj - Absolutely not. "The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false" - http://www.w3.org/TR/html5/editing.html

David Dorward 2009-07-23 09:33:45

Better yet, add the following as a bookmarklet to let edit any web page you're on: javascript:document.body.contentEditable='true';document.designMode='on';void(0);

Amro 2009-11-12 18:36:29

It does not seem to work with Firefox 2?

Milan Babuškov 2009-12-02 21:25:53

This is hilarious! Works in pretty much all of the modern browsers. Looking for a way to submit the value of the editable element to server side script (preferrably without the help of JS). Any ideas? Cause' that'd be the coolest thing ever!

kavoir.com 2010-03-05 10:37:18

that's amazing! try Amro's code!

pop850 2010-05-26 02:14:41

Now can someone show how this could be useful?

Joe Philllips 2010-06-03 15:08:17

I think it's mainly useful in a javascript context, where you allow the user to edit a section of code if they wish, and then submit that content via js.

Tchalvak 2010-06-25 16:36:54

Answer 16

+47 A:

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.

aleemb 2009-06-05 09:01:01

Shame about it being broken in IE < 8. It is possible to work around the issues, but that can be painful, and sometimes you hit security protection running between the web server and the server side programming environment.

David Dorward 2009-06-05 09:13:19

It's still usable you just need to use type="submit" on it.. its useful as you can put elements inside, for example- using a span inside a button is often used to ensure you can correctly css style a button (ie, without the browsers implied padding).

meandmycode 2009-06-06 21:28:13

But IE < 8 will submit the content of the element, not its value. I believe some versions will always treat it as a successful control (even if it wasn't clicked) too.

David Dorward 2009-06-08 09:52:49

And if you make it <button contenteditable> you can change the button text too! Points to anyone who could find a valid use for it. :)

Gavin Schultz-Ohkubo 2009-07-04 03:04:06

@Gavin: For an easter egg?

Brian 2009-07-09 20:10:37

I never understood why there was an "input" type of submit. It's not inputting anything, just submitting what you inputted on other fields.

DisgruntledGoat 2009-09-01 14:59:37

@DisgruntledGoat: its name/value pair will actually be sent. Useful if you have more than one button in a form (e.g. edit, delete, moveup, etc) and want to distinguish the button pressed. Unfortunately the same doesn't work for `button` in IE<8, it astonishingly sends the name/value pairs of ALL `button` elements.

BalusC 2009-12-30 01:55:52

You can safely use the button element in IE <8, provided you don't give it a name or a value that you care about. It's no good when you have more than one button in the same form, and want to know which was clicked to trigger the activation.

Beejamin 2010-05-15 15:41:34

On April Fools day I once put the entire site in one big `<button>`

Time Machine 2010-06-11 21:12:22

Answer 17

+40 A:

aleemb 2009-06-05 09:04:59

Be careful because there's poor browser support on this one

SleepyCod 2009-06-05 09:13:34

"IE8 as IE8" does not support it and it's buggy in Safari 3.0 for windows. Other than that support is pretty good. Refer to the compatibility chart in the link.

aleemb 2009-06-05 09:30:45

Hmm sitepoint reference marked this tag as deprecated and useless, who's right ? http://reference.sitepoint.com/html/wbr

SleepyCod 2009-06-05 09:35:56

It may well be deprecated as part of the HTML spec but it still works in browsers. Whenever in doubt, go with the QuirksMode verdict (compatibility tables now sponsored by Google).

aleemb 2009-06-05 11:06:23

Seems like this would be a very useful thing to include in the next css standard!

James 2009-06-22 18:27:08

seems to be slightly better supported according to http://www.quirksmode.org/oddsandends/wbr.html#t02. (Assuming most Firefox users update regularly; or at least more often than IE users).

GeReV 2010-04-13 11:07:03

`<wbr>` is not in W3C HTML4 standard: http://www.w3.org/TR/html4/index/elements.html And remember that XHTML is just HTML4 in XML.

Denilson Sá 2010-08-04 20:15:07

Answer 18

A:

I'd only recommend keeping the sitepoint HTML reference near you.

This is seriously a must-have utility, that also exists as a Firebug extension.

Awesome.

http://reference.sitepoint.com/html

SleepyCod 2009-06-05 09:12:28

I don't know why this got downvoted. It seems to be a damn good reference.

Botond Balázs 2009-10-13 20:42:33

@Botond Balázs: Because it's off-topic. It's not a hidden feature of HTML, it's just a piece of good advice.

tomp 2010-02-20 12:30:52

Answer 19

+25 A:

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.

aleemb 2009-06-05 09:14:34

Of course, this makes it "Valid: Your custom markup language" and not "XHTML 1.0 Transitional"

David Dorward 2009-06-05 14:27:02

+1. I don't know why this was -1. Anyway it should be noted that browser support is pretty much nil.

eyelidlessness 2009-06-06 20:22:47

Pretty sure Opera supports this.

Rich Bradshaw 2009-06-22 18:32:28

@eyelidlessness it only works in XHTML. Doesn't work in make-believe XHTML sent as text/HTML.

porneL 2009-07-09 19:20:16

Eesh, not a fan of this. To me, the value of HTML is that everyone on the planet knows what it means (more or less), because we all use the same tags and attributes. I’m not sure why the `class` attribute isn”t enough extensibility.

Paul D. Waite 2009-12-30 03:02:39

Lack of browser support is annoying. It still seems useful - we could write a script to insert the extra text before sending it to the validator

Casebash 2010-06-22 04:39:12

Answer 20

+3 A:

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

Fabien Ménager 2009-06-05 09:17:00

This depends on the browser you are using. In HTML 2, a form containg just a text input SHOULD be submitted with enter. http://www.alanflavell.org.uk/www/formquestion.html

David Dorward 2009-06-05 13:17:47

Answer 21

+80 A:

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>

RichardOD 2009-06-05 09:38:06

Unfortunately, browser implementation of menu hierarchy leaves much to be desired. I suspect optgroup doesn't get much use because its relevant use cases are few and far between.

eyelidlessness 2009-06-06 20:13:20

One level should be supported in all browsers. A web-forum I'm apart of else where uses it in some screens to divide the forum list into the same sections as used on the main page.

staticsan 2009-06-22 01:05:53

@staticsan. I agree it is useful for small categorisation of a number of items.

RichardOD 2009-07-10 08:01:07

@eyelidlessness: I see drop-downs all the time that indent elements or use some kind of 'header' text like `---category---`.

DisgruntledGoat 2009-07-10 12:07:12

This is a neat feature I did not know about!

Chrisb 2009-07-27 15:52:08

Answer 22

+203 A:

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.

Paul Irish 2009-06-06 17:00:42

The // makes it protocol independent? I'm a little confused.

Joe Philllips 2009-06-06 19:13:03

That’s not an HTML feature but a URL/URI feature.

Gumbo 2009-06-06 20:01:26

d03boy, it's a relative path, relative to the protocol.

eyelidlessness 2009-06-06 20:14:03

Gumbo, it's still nice that browsers support it correctly in HTML.

eyelidlessness 2009-06-06 20:14:34

@eyelidlessness: It’s not just “nice” but essential for a browser to correctly support the full URI standard. And that’s not that hard.

Gumbo 2009-06-06 21:32:36

@Gumbo: True, it's a URI feature, but I figured it was good enough to bend the rules and include here. And I don't expect a Hidden Features of the URI Spec anytime soon. :)

Paul Irish 2009-06-07 19:16:01

This is the MOST amazing thing I have learned all year.

David Murdoch 2009-10-22 13:05:19

This presumes that the server in question supports SSL. That's not always the case.

tvanfosson 2009-12-02 15:10:30

Could this eliminate a bit of string building in the Google Analytics JavaScript code?

alex 2010-01-18 05:19:11

@alex, i have wanted it to, but sadly they also pull from a different subdomain.

Paul Irish 2010-01-25 06:44:50

Ah yeh I just remembered that.

alex 2010-01-26 22:08:41

Question, why do you need double slashes? Isn't just one slash independent of the protocol? Won't that just use the current protocol, or does it default to http in some way?

Alxandr 2010-04-06 01:00:46

one slash is relative from the domain part, not from the protocol part

SztupY 2010-05-24 14:29:07

IE is so incredibly DUMB! Why the f*** hell does it DL the file twice?

Time Machine 2010-06-11 21:08:44

why does it ignore all standards with a vengeance, for that matter?

Professor_Calculus 2010-08-23 10:32:11

There's one major drawback: when a file is saved to disk and accessed using the `file:` protocol, the browser won't be able to find the resource (e.g., of a CDN or some other external server).

Marcel Korpel 2010-09-30 23:19:06

Answer 23

+75 A:

<img onerror="{javascript}" />

onerror is a JavaScript event that will be fired right before the little red cross (in IE) picture be show.

You could use this to write a script that will replace the broken image by some valid alternative content, so that the user don'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/ get down, stackoverflow could workaround this by using onerror.

Daniel Silveira 2009-06-06 17:20:13

Needs a deeper explanation

Joe Philllips 2009-06-06 18:56:34

Aha... if this is what think it is, i should know this earlier when i truly needed that. :/

Arnis L. 2009-06-06 19:25:01

to clarify, onerror is a javascript event (just like onclick) which lets you do something when an image fails to load.

Jehiah 2009-06-06 19:50:32

Daniel Silveira, will you clarify that this does, in fact, run onerror code in the case of broken (eg 404) images? Regardless, this is a DOM feature, not an HTML feature per se.

eyelidlessness 2009-06-06 20:16:15

Yes, error codes like 404 would trigger the event.

Zach 2009-06-29 01:57:47

I had a numpty use this one, pointing to a nonexistant image, recursive anyone???

Pharabus 2009-07-28 19:19:54

Answer 24

+21 A:

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>

çağdaş 2009-06-06 19:24:07

In my experience, colgroup support is flaky at best.

eyelidlessness 2009-06-06 20:16:44

strikingly similar is WPF Grid

Binoj Antony 2009-06-17 11:09:03

Answer 25

+16 A:

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

orlandu63 2009-06-06 19:24:37

But this enjoys less browser support than the for attribute

David Dorward 2009-06-07 21:42:45

@David — Do you have any documentation to back that up? I don't think I've ever seen a browser not support this usage. I've personally tested in IE6/7, FF2/3, Safari 3, and Chrome 1/2. I haven't tested myself in Opera, but I'd be very surprised if it didn't work. This behavior is part of the original HTML 4.0 spec, first published more than eleven years ago: http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for

Ben Blank 2009-06-22 18:50:14

Also, it's not valid to put an input inside of a label, and DOH you didn't close your input tag in either example!

Anthony 2009-07-23 09:41:12

You are wrong on both counts: this is valid practice, and the end tag is forbidden of input elements.

orlandu63 2009-07-23 13:33:22

Answer 26

+56 A:

DEL and INS to mark deleted and inserted contents:

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

Gumbo 2009-06-06 19:43:57

Definitely not used enough.

eyelidlessness 2009-06-06 20:19:10

@eyelidlessness: there's simply not enough situations where marking deleted/inserted text is that useful.

DisgruntledGoat 2009-07-09 19:55:10

I could swear that StackOverflow used `<ins>` and `<del>` on the Revisions pages at some point awhile back, but now it uses `<span class="diff-add">` and `<span class="diff-delete">`. :(

system PAUSE 2009-09-22 20:22:14

@systemPAUSE That's disappointing. So much for semantic markup.

me_and 2009-12-31 10:05:22

+1_____________

antony.trupe 2010-01-14 17:47:55

@DisgruntledGoat wiki revision histories? plenty of use cases for it

HorusKol 2010-06-03 06:07:08

@Horus: sure you can find uses, but in the grand scheme of things that's still not a huge amount of situations.

DisgruntledGoat 2010-06-03 12:00:26

@DisgruntledGoat: guess I've been involved in more article management apps than is the norm then

HorusKol 2010-06-03 23:18:56

Even better is that it has a `datetime="some date"` and `cite="some citation"` attributes.

SeanJA 2010-10-21 01:17:14

Answer 27

+48 A:

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>

Jehiah 2009-06-06 19:58:36

Additionally, the dl/dt/dd semantics are appropriate for similar lists (eg. the structure has been recommended for dialogues).

eyelidlessness 2009-06-06 20:20:24

The default presentation isn't that nice, but people forget that the elements can be styled many ways with CSS.

DisgruntledGoat 2009-07-09 19:59:02

I agree. They're great semantic elements that often get left out.

Justin Johnson 2009-07-23 09:16:26

The more interesting thing that is often forgotten is that the format is key/value/value/value/value/key/value

David Dorward 2009-07-23 09:30:07

@eyelidlessness It's semantically bankrupt for dialog, though. A person being what they say is a philosophical postulation, not an obvious semantic relationship.

D_N 2010-06-03 06:49:11

DD => Definition Description :)

Arve Systad 2010-06-03 17:31:08

@D_N, the elements' semantics themselves, per spec, are broader than you allow for.

eyelidlessness 2010-06-03 17:41:46

@eyelidlessness Just because the spec suggests it doesn't mean it makes sense. Doesn't line up with its own definition. (Not trying to pick a fight. But semantics flow from definitions and such; the HTML4 spec suggests it could be used that way, but gives no rational for why that meets up with the definition it had already given.)

D_N 2010-06-03 19:14:53

@D_N, I think where the disagreement lies is that I consider the suggested uses to be a *part* of the definition and semantics, rather than separate from and contradictory to it.

eyelidlessness 2010-06-03 20:54:44

Answer 28

+16 A:

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>

Wadih M. 2009-06-22 06:26:13

Button won't have "Save file as" option, which may be needed by users who don't like Adobe Acrobat taking over their browser.

porneL 2009-07-09 20:01:33

It will behave with default browser behavior when accessing PDF file. It could be an HTML file, a word file, a zip file, or anything else you want.

Wadih M. 2009-07-09 23:44:16

In what situation does a anchor tag require an onclick event? and why would 3 lines of html be better than 1? Is the idea that you CAN have a button instead of a link, so it's nice and button like?Even though I sound cranky about this, I actually have a page that uses buttons instead of links because the file gets created dynamically when the user requests it, so I didn't want a link to:blah.php?stuff="userdata"Even though I could have gone that route, I didn't want to risk the filename having the file-generating script as the name instead of the filename that the script gives the file.

Anthony 2009-07-23 09:49:03

As a side note: in IE8, when you hover over the button you can see the target in the status bar. Firefox 3 unfortunately doesn't show it :(

Amro 2009-11-12 20:55:18

Why not just style the <a> tag like a button? This seems like a lot of junk in your markup.

UpTheCreek 2010-06-09 09:36:56

@UpTheCreek some web applications want to look the same as the OS. E.g. an ugly button when the user uses Windows, and a beautiful button when the user uses Mac OS X.

Time Machine 2010-06-11 21:18:33

Yeah fair enough, those proprietary safari buttons are so annoying.

UpTheCreek 2010-06-12 07:24:14

Answer 29

+10 A:

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

porneL 2009-07-09 19:28:24

You should be careful what you advertise. The above code will pass validation with 4 warnings at the w3c validator, but the DocType is HTML 4.0. It is pretty neat that HTML 4 is decendant of SGML and therefore maintains this loose validation standard, but if you change that DTD to XHTML 1.0 STRICT, it gets 15 errors, which is almost equal to the number of characters. XHTML was developed because HTML was so lazy (and thus unsecure) so we don't want to take advantage of that anymore.

Anthony 2009-07-23 09:58:13

If you change DOCTYPE of HTML/SGML document to XHTML/XML you will get nonsensical mix. That's quite obvious and I'm not sure why you're pointing that out.

porneL 2009-07-23 12:42:01

This example might, technically, be valid HTML 4, but browsers do not support that abbreviated SGML syntax. The following is the shortest valid HTML 5 document, which browsers do actually support: `<!DOCTYPE html><title></title>`

Brian Campbell 2009-12-30 03:11:48

@Brian Good points. I've updated my answer. Thanks.

porneL 2009-12-30 13:31:45

Any idea how compatible is it to leave out `head`/`body`, not just from a validation perspective?

kibibu 2010-06-04 02:46:07

@kibibu: Browsers don't have problems with this. Old versions of Opera used to omit `<head>` in DOM sometimes, but head content was in DOM and worked anyway. The biggest problem I've found is that OpenID clients require `<head>` to be explicitly present.

porneL 2010-06-04 20:48:45

Answer 30

+23 A:

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

Justin Johnson 2009-07-23 09:27:06

Answer 31

+3 A:

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.

Anthony 2009-07-23 10:08:56

you should look into the <dt>, <dl> and <dd> tags - definition lists are also rather obscure markup, but very useful.

HorusKol 2010-06-03 06:20:53

Answer 32

+1 A:

The   entity (non-breaking space). It is useful when you don't want your text to break into two lines where there is a space. It may be useful in table headers:

something | somthing else
very      | 
large     | 
-------------------------
bla       | bla bla bla

With   could look like this:

something&nbsp ;very&nbsp ;large | somthing else
------------------------------------------------
bla                              | bla bla bla

Kiewic 2009-07-27 15:38:27

That's not really hidden.

Brian 2009-09-22 19:37:20

-1 I've used it, but it's hacky. Better to use `style="white-space: nowrap;"` or even (if you *must*) `<td nowrap>` to get that effect.

system PAUSE 2009-09-22 20:31:15

It's not hidden. It's over-used! It's not for keeping whole table cells in one line, it's for micro-managing of text wrapping, e.g. wrapped "Mac OS\nX" looks stupid and you can avoid problem with "Mac OS X".

porneL 2009-12-30 13:39:10

@porneL Glad to see someone understands ` `! Non-breaking space means that it's a space that won't let the two words around it be "broken" into two different lines, that's it!

nico 2010-05-15 14:12:34

Answer 33

+69 A:

The <kbd> element for marking up for keyboard input

Ctrl+Alt+Del

Russ Cam 2009-09-22 19:45:32

Is there anything special about <kbd> beside it be a different font format? if not here is a list of other formatting tags?http://www.w3schools.com/tags/tag_phrase_elements.asp

x13 2009-10-01 19:21:12

Not especially, just not well known I don't think

Russ Cam 2009-10-01 22:13:37

Nothing by default, but it's cleaner to mark up the element with CSS like how SO does.

Agent_9191 2009-11-09 19:38:18

It is semantically beautiful, is what.

D_N 2010-06-03 06:42:53

Wasn't aware it existed, that's fun.

Tchalvak 2010-06-25 16:41:01

Answer 34

A:

Tooltips on most display elements by using the 'title' attribute

Sir Psycho 2009-09-23 03:09:11

Yes. It's seriously un-pc to use table based layouts in web design, but most of the arguments against table based layouts are bunk: http://www.barrypearson.co.uk/articles/layout_tables/defence.htm

Matthew Lock 2009-12-03 02:46:08

Twitter uses `table`s for layout as well.

Mathias Bynens 2010-02-09 08:15:20

I strongly disagree with Sir Psycho’s sentiments here. “You'll save loads of time” — if that’s the case, you seriously need to improve your CSS skills.

Mathias Bynens 2010-02-09 08:16:06

Lots of people eat at McDonald's. That doesn't make it healthy...

nico 2010-05-15 14:10:06

Some of the biggest companies in the world use tables. I consider Google to be a place filled with very smart people and at the forefront of web tech. They obviously have their reasons for using tables and they don't just blindly follow what majority of people tell them is the right thing to do. That's my point.

Sir Psycho 2010-05-16 09:43:22

Mathias, I bet I could create a table based form with a few labels and input fields that looks the same accross all browsers easier than you could with a CSS implementation.

Sir Psycho 2010-05-16 09:45:26

Stackoverflow uses a table for the Recent Badges section in the home page

kemp 2010-06-03 06:51:41

Professor_Calculus 2010-08-23 11:10:34

@kemp that's because its tabular data. It's ok to use `<table>`s for displaying tabular data (that's what tables are *for*), but not for laying out pages.

yc 2010-10-28 19:08:14

@yc: looks like an unordered list to me

kemp 2010-10-28 19:30:34

Answer 35

+18 A:

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="action" value="edit">
     <input type="submit" name="action" value="delete">
     <input type="submit" name="action" value="move up">
     <input type="submit" name="action" value="move down">
</form>

In the server side, the actual button pressed can then be obtained by just checking the request parameter value associated with the button name.

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.

BalusC 2009-12-30 02:05:22

Keep in mind that most browsers implement a "feature" which submits the form if you press the enter key while inside a text input. You will find that each browser has its own interpretation of which button, if any, was "clicked" in this situation (unless there is exactly one button, in which case the *major* browsers actually agree)

David 2010-01-14 15:05:13

Normally the **firstnext** `input` or `button` of `type="submit"` in the `tabindex` order will be invoked. And yes, you have control over `tabindex` with help of the HTML `tabindex` attribute.

BalusC 2010-01-14 15:13:32

Hey .. That's apparently another hidden feature of HTML :/ ;)

BalusC 2010-01-14 15:22:49

If a form has multiple submit buttons, and the user clicks one, certain versions of Internet Explorer will cheerfully tell your server that they were all clicked. Wonderful.

detly 2010-02-04 01:28:44

@detly: only if you use `<button type="submit">` instead of `<input type="submit">` :)

BalusC 2010-02-04 01:51:04

...buuuuut doesn't IE6 also have problems with `<input type="submit">`? (My memory of this issue is hazy - I've long since convinced employers to not worry about IE compatibility for internal web apps, so it's not my problem any more. But I seem to recall some barrier to making this problem solvable in IE6.)

detly 2010-06-03 06:27:21

That's not very i18n-friendly.

zneak 2010-06-03 18:56:30

@zneak: then just give the buttons a different name and check if it is present as request parameter.

BalusC 2010-10-16 00:32:57

@BalusC I'm confused. Isn't your post exactly about not doing that?

zneak 2010-10-16 06:30:36

@zneak: I understood that you was worrying about i18n-ability of button values? I don't see other i18n issues.

BalusC 2010-10-16 12:07:13

@BalusC Yes, I'm worried about the i18n-ability of button values, but changing button names kind of defeats the idea of using the same button name. :/

zneak 2010-10-16 16:31:07

@zneak: I didn't mean to imply that you *need* to give them each the same name, but just that you can give them *a* name. Without a name you won't be able to distinguish the button pressed and hence a lot of ignorant developers would introduce horrible JS workarounds.

BalusC 2010-10-16 16:39:38

Answer 36

+19 A:

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&lt;/link&gt;
  <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

Xinus 2009-12-30 02:48:15

Sadly, IE < 8 doesn’t support this. You can however use MHTML instead for these browsers: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Mathias Bynens 2010-02-09 08:13:43

Answer 37

A:

A very rarely used tag is the NOBR tag. This tag is useful for words or phrases that must be kept together on one line.

 <NOBR> Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo </NOBR>

Although its listed on mozilla.org, no reference to this on w3c...

Binoj Antony 2010-05-07 11:43:35

That would be because it is Netscape proprietary rubbish that never got standardized because CSS came along.

David Dorward 2010-05-17 15:11:16

Answer 38

+8 A:

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>

Erik Töyrä 2010-06-03 05:50:55

Answer 39

+1 A:

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.

HorusKol 2010-06-03 06:23:23

Answer 40

+6 A:

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

zneak 2010-06-03 17:02:08

It should be noted that `<meta http-equiv="Refresh" content="5; url=foo">` actually triggers a full page refresh in IE (including all cached assets). Can haz performance nightmare plx? http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/meta-refresh-causes-additional-http-requests.aspx

Mathias Bynens 2010-06-03 20:51:19

The W3C validator recommends including encoding in the meta element so users can save the web page to the local file system.

kibibu 2010-06-04 02:53:02

@kibibu: That's quite possible, actually. I've been doing XHTML documents rather than HTML documents since long ago (I gave up on Internet Explorer about 3 years ago), so I put that information in the `<?xml?>` declaration at the top of the document: `<?xml version="1.0" encoding="UTF-8"?>`

zneak 2010-06-04 17:59:48

Answer 41

+4 A:

Superscript with <sup> x </sup>

Andrea 2010-06-03 17:20:50

Answer 42

A:

The non-breaking space ( ) is interchangeable with its ASCII equivalent 0xA0. Many editors will allow you to enter this value by holding the Alt key down and typing 0160 on the keypad. I use this to check my formatting.

Dave 2010-06-03 22:07:10

ansaurus

tags:

views:

answers:

Hidden Features of HTML

Examples

related questions