I am wondering if anyone can give a &quot;best practices&quot; response to using blank HTML form actions to post back to the current page.

There is [a post asking what a blank HTML form action does here][1] and some pages like [this one][2] suggest it is fine but I&#39;d like to know what people think.

  [1]: https://stackoverflow.com/questions/641292/html-forms-without-actions
  [2]: http://www.thefutureoftheweb.com/blog/use-empty-form-action-submit-to-current

Is it a good practice to use an empty URL for a HTML form&#39;s action attribute? (action=&quot;&quot;)

**Note:** I know `&lt;b&gt;` is presentational and `&lt;span style=&quot;font-weight:bold&gt;` is a better way, and `&lt;strong&gt;` and `&lt;em&gt;` are for emphasis but my question is not regarding this.


----------


Should we convert every `&lt;b&gt;` to `&lt;strong&gt;` blindly? Many people do this, they think `&lt;b&gt;` is not good as per web standards so they convert every `&lt;b&gt;` to `&lt;strong&gt;` upon site redesign, content re-population, new site design and people suggest this to others also.


----------


Dreamweaver has also given the option to convert all `&lt;b&gt;` and `&lt;i&gt;` to `&lt;strong&gt;` and `&lt;em&gt;` on code paste in design view and when we use B and I Which people use blindly.

![alt text][1]

And Dreamweaver (if above option is checked) and many online WYSIWYG editor give output in `&lt;strong&gt;` and `&lt;em&gt;` while button shows **B** and *I*.

![alt text][2]

In my opinion it&#39;s creating a misconception about `&lt;strong&gt;` and `&lt;b&gt;`


----------


When we get content from a client we don&#39;t know where the client wants to give emphasize and where he just wants to use bold text for presentation purposes. What should we do in this circumstance? No one has the time to give to decide for each instance (us and the client), whether it should be `&lt;b&gt;` or `&lt;strong&gt;`, `&lt;i&gt;` or `&lt;em&gt;`


What are the pros and cons to convert every `&lt;b&gt;` and `&lt;i&gt;` into `&lt;strong&gt;` and `&lt;em&gt;` blindly if we are saying our site is accessible?


----------
**Update:** remember [`&lt;b&gt;` and `&lt;i&gt;` are not deprecated they are in HTML 5 specification][3]


  [1]: http://shup.com/Shup/280420/1101118332-My-Desktop.png
  [2]: http://shup.com/Shup/280425/1101118921-My-Desktop.png
  [3]: https://stackoverflow.com/questions/2235450/why-html-5-still-have-support-for-presentational-elements

Is it ok to use &lt;strong&gt; in place of &lt;b&gt; blindly?

`input type=&quot;submit&quot;` and `button` tag are they interchangeable? or if there is any difference then When to use `input type=&quot;submit&quot;` and when `button` ?

And if there is no difference then why we have 2 tags for same purpose?

input type=&quot;submit&quot; Vs button tag are they interchangeable?

According to [the dataset spec][1], how is [element.dataset][2] meant to delete data attributes? Consider:

    &lt;p id=&quot;example&quot; data-a=&quot;string a&quot; data-b=&quot;string b&quot;&gt;&lt;/p&gt;

If you do this:

    var elem = document.querySelector(&#39;#example&#39;);
    elem.dataset.a = null;
    elem.dataset.b = undefined;
    elem.dataset.c = false;
    elem.dataset.d = 3;
    elem.dataset.e = [1, 2, 3];
    elem.dataset.f = {prop: &#39;value&#39;};
    elem.dataset.g = JSON.stringify({prop: &#39;value&#39;});

the DOM becomes this in Chrome and Firefox:

    &lt;p id=&quot;example&quot; 
       data-a=&quot;null&quot; 
       data-b=&quot;undefined&quot; 
       data-c=&quot;false&quot; 
       data-d=&quot;3&quot; 
       data-e=&quot;1,2,3&quot; 
       data.f=&quot;[object Object]&quot; 
       data.g=&quot;{&quot;prop&quot;:&quot;value&quot;}&quot;
    &gt;&lt;/p&gt;

The Chrome/Firefox implementation mimics [setAttribute][3]. It basically applies `.toString()` first. This makes sense to me except for the treatment of `null` because I would expect that `null` would remove the attribute. Otherwise how does the dataset API do the equivalent of:

    elem.removeAttribute(&#39;data-a&#39;);

And what about boolean attributes: 

`&lt;p data-something&gt;` is equivalent to `&lt;p data-something=&quot;&quot;&gt;` Hmm.


  [1]: http://www.w3.org/html/wg/drafts/html/master/dom.html#dom-dataset
  [2]: https://developer.mozilla.org/en/DOM/element.dataset
  [3]: https://developer.mozilla.org/en/DOM/element.setAttribute

How to remove data-* attributes using HTML5 dataset

I have the following markup as a part of a Razor view:

    &lt;table&gt;
      &lt;caption&gt;Presidents&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Born&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Died&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th scope=&quot;row&quot;&gt;Washington&lt;/th&gt;
          &lt;td&gt;1732&lt;/td&gt;
          &lt;td&gt;1799&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- etc --&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

With the &quot;target schema for validation&quot; set to HTML5, Visual Studio complains thusly:

&gt;Warning	1	Validation (HTML5): Element &#39;th&#39; must not be nested within element &#39;tbody tfoot&#39;.

Is this really true? If so, could someone link to the spec?

My understanding was that using `&lt;th&gt;` for row headers was not just legal but encouraged. It certainly seems fairly common, I could link dozens of tutorials explaining (seemingly sensibly) that it helps with accessibility.

Is this a VS bug? A real change coming with HTML5 (a good one? a bad one?)? What&#39;s the story?


Does HTML5 ban th cells from tbody?

I have a table where I show/hide a full column by jQuery via a CSS class that doesn&#39;t exist:

    &lt;table&gt;
       &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;&lt;/th&gt;
             &lt;th class=&quot;target&quot;&gt;&lt;/th&gt;
             &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;/td&gt;
             &lt;td class=&quot;target&quot;&gt;&lt;/td&gt;
             &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;/td&gt;
             &lt;td class=&quot;target&quot;&gt;&lt;/td&gt;
             &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;

With this DOM I can do this in one line via jQuery: `$(&#39;.target&#39;).css(&#39;display&#39;,&#39;none&#39;);`

This works perfectly, but is it valid to use CSS classes that aren&#39;t defined? Should I create an empty class for it?

    &lt;style&gt;.target{}&lt;/style&gt;

Are there any side effects or is there a better way to do this?

Can I use non existing CSS classes?

Is there a (roughly) SQL or XQuery-like language for querying JSON?

I&#39;m thinking of very small datasets that map nicely to JSON where it would be nice to easily answer queries such as &quot;what are all the values of X where Y &gt; 3&quot; or to do the usual SUM / COUNT type operations.

As completely made-up example, something like this:

    [{&quot;x&quot;: 2, &quot;y&quot;: 0}}, {&quot;x&quot;: 3, &quot;y&quot;: 1}, {&quot;x&quot;: 4, &quot;y&quot;: 1}]
    
    SUM(X) WHERE Y &gt; 0     (would equate to 7)
    LIST(X) WHERE Y &gt; 0    (would equate to [3,4])

I&#39;m thinking this would work both client-side and server-side with results being converted to the appropriate language-specific data structure (or perhaps kept as JSON)

A quick Googling suggests that people have thought about it and implemented a few things ([JAQL][1]), but it doesn&#39;t seem like a standard usage or set of libraries has emerged yet. While each function is fairly trivial to implement on its own, if someone has already done it right I don&#39;t want to re-invent the wheel.

Any suggestions?

Edit: This may indeed be a bad idea or JSON may be too generic a format for what I&#39;m thinking.. The reason for wanting a query language instead of just doing the summing/etc functions directly as needed is that I hope to build the queries dynamically based on user-input. Kinda like the argument that &quot;we don&#39;t need SQL, we can just write the functions we need&quot;. Eventually that either gets out of hand or you end up writing your own version of SQL as you push it further and further. (Okay, I know that is a bit of a silly argument, but you get the idea..)


  [1]: http://www.jaql.org/release/0.1/jaql-overview.html

Is there a query language for JSON?

What are the correct content-types for XML, HTML and XHTML documents?

I need to write a simple crawler that only fetches these kinds of files.

Nowadays http://example.net/index.html can serve for example a JPEG file due to mod_rewrite, so I need to check the content-type from response header and compare it with a list of allowed content-types.

Where can I get such a list from?

Valid content-type for XML, HTML and XHTML documents

It seems like I heard/read somewhere that a `&lt;div&gt;` inside of a `&lt;td&gt;` was a no-no. Not that it won&#39;t work, just something about them not being really compatible based on their display type. Can&#39;t find any evidence to back up my hunch, so I may be totally wrong. 

Is a DIV inside a TD a bad idea?

A topic of debate that&#39;s seen a resurgence since the unveiling of the iPad is the issue of Flash versus HTML5.  There are those that suggest that HTML5 will one day supplant/replace Adobe Flash.

*I do not develop software that runs in a browser,* so my (limited) understanding is:

 - HTML is a pure-text markup language that is delivered over HTTP to a client browser.  The client browser interprets the markup and renders (with varying degrees of success) the page according to an standard specification.
 - Adobe Flash is a propriety framework for working with audio, video, sound and raster/vector graphics.  It requires special authoring tools (a compiler perhaps?) and a custom player that&#39;s available as a plug-in to most common browsers.

Could someone please explain (to this C/C++ developer) how it is possible *from a technical/coding point-of-view* that a text-based markup language (HTML5) could be considered a replacement to a multimedia framework (Flash)? 

***Please no opinionated arguments - just technical facts.***


How can HTML5 &quot;replace&quot; Flash?

I know of the non-standard %uxxxx scheme but that doesn&#39;t seem like a wise choice since the scheme has been rejected by the W3C.

Some interesting examples:

The heart character.
If I type this into my browser:

    http://www.google.com/search?q=♥

Then copy and paste it, I see this URL

    http://www.google.com/search?q=%E2%99%A5

which makes it seem like Firefox (or Safari) is doing this.

    urllib.quote_plus(x.encode(&quot;latin-1&quot;))
    &#39;%E2%99%A5&#39;

which makes sense, except for things that can&#39;t be encoded in Latin-1, like the triple dot character.

    …

If I type the URL
    
    http://www.google.com/search?q=…

into my browser then copy and paste, I get 
    
    http://www.google.com/search?q=%E2%80%A6

back.  Which seems to be the result of doing

    urllib.quote_plus(x.encode(&quot;utf-8&quot;))


which makes sense since … can&#39;t be encoded with Latin-1.

But then its not clear to me how the browser knows whether to decode with UTF-8 or Latin-1.

Since this seems to be ambiguous:

    In [67]: u&quot;…&quot;.encode(&#39;utf-8&#39;).decode(&#39;latin-1&#39;)
    Out[67]: u&#39;\xc3\xa2\xc2\x80\xc2\xa6&#39;

works, so I don&#39;t know how the browser figures out whether to decode that with UTF-8 or Latin-1.

What&#39;s the right thing to be doing with the special characters I need to deal with?



What is the proper way to URL encode Unicode characters?

This question has bothered me for a million years... whenever I create a website with a textarea that allows multi-line (such as a &quot;Bio&quot; for a user&#39;s profile) I always end up writing the following paranoid code:

    // C# code sample...
    bio = bio.Replace(&quot;\r\n&quot;, &quot;\n&quot;).Replace(&quot;\r&quot;, &quot;\n&quot;);
    bio = Regex.Replace(@&quot;\n{2,}&quot;, &quot;\n\n&quot;);

So, what do browsers send up for a `&lt;textarea name=&quot;Bio&quot;&gt;&lt;/textarea&gt;` if it has multiple lines?

Do browsers send &quot;\r\n&quot; or &quot;\n&quot; or does it depend on the browser?

Shouldn&#39;t both be removed? Or does it mean we should use `&lt;small&gt;`? Why is `&lt;big&gt;` removed but `&lt;small&gt;` is not? What is the problem with `&lt;big&gt;` which does not apply to `&lt;small&gt;`?


http://www.w3schools.com/html5/html5_reference.asp





Why &lt;big&gt; is not in HTML 5 Tag list while &lt;small&gt; is?

What is the correct code to create a link with heading 1 according to web standards? 

is it
    
    &lt;h1&gt;&lt;a href=&quot;http://stackoverflow.com&quot;&gt; stackoverflow &lt;/a&gt;&lt;/h1&gt;

or

    &lt;a href=&quot;http://stackoverflow.com&quot;&gt;&lt;h1&gt; stackoverflow &lt;/h1&gt;&lt;/a&gt;


Thanks

how to mix links ( &lt;a&gt; tag ) and headings ( &lt;h1&gt; tag ) in web standard?

I tried to search for a JavaScript reference, but there&#39;s none available. The best two suggested sources are MDN (Mozilla Developer Network) and ECMA (https://262.ecma-international.org/12.0/)

Why?


Why is there no OFFICIAL JavaScript reference?

I have a PHP script that will generate `&lt;input&gt;`s dynamically, so I was wondering if I needed to filter any characters in the `name` attribute.

&lt;s&gt;I know that the name has to start with a letter, but&lt;/s&gt; I don&#39;t know any other rules. I figure square brackets must be allowed, since PHP uses these to create arrays from form data. How about parentheses? Spaces?

What characters are allowed in the HTML Name attribute inside input tag?

In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with `data-` such as `&lt;p data-myid=&quot;123456&quot;&gt;`.  Is this part of the SVG spec too?

In practice this technique works fine for SVG docs in many places.  But I&#39;d like to know if it&#39;s part of the official SVG spec or not, because the format is young enough that there&#39;s still a lot of incompatibility between browsers, especially in mobile.  So before committing to code I&#39;d like know if I can expect future browsers to converge on supporting this.

I found [this message][1] from the working group mailing list saying they &quot;expect [they] will&quot; support it.  Did this become official?


  [1]: http://lists.w3.org/Archives/Public/www-svg/2011May/0014.html

Do SVG docs support custom data- attributes?

I&#39;ve built an image slider (based on the terrific [bxSlider][1]) which will preload images just-in-time before they slide into view. It&#39;s working pretty well already, but I don&#39;t think my solution is valid HTML.

My technique is as follows: I generate the slider markup with the first slide image being inserted as usual (with an `&lt;img src=&quot;foo.jpg&quot;&gt;`) and subsequent images being referenced in a data attribute like `&lt;img data-orig=&quot;bar.jpg&quot;&gt;`.  A Javascript then juggles the `data-orig -&gt; src` change when necessary, triggering the preloading.

In other words, I have:

	&lt;div class=&quot;slider&quot;&gt;
		&lt;div&gt;&lt;img src=&quot;time.jpg&quot; /&gt;&lt;/div&gt; 
		&lt;div&gt;&lt;img src=&quot;data:&quot; data-orig=&quot;fastelavn.jpg&quot; /&gt;&lt;/div&gt; 
		&lt;div&gt;&lt;img src=&quot;data:&quot; data-orig=&quot;pels_strik.jpg&quot; /&gt;&lt;/div&gt; 
		&lt;div&gt;&lt;img src=&quot;data:&quot; data-orig=&quot;fashion.jpg&quot; /&gt;&lt;/div&gt; 
	&lt;/div&gt;

To avoid empty `src=&quot;&quot;` attributes (which are [harmful to performance][2] in [some browsers][3]), I&#39;ve inserted `src=&quot;data:&quot;` to effectively insert a blank image as a placeholder.

The thing is, I can&#39;t seem to find anything in the [documentation for data-URI][4] saying whether this is a valid data-URI or not. I basically want the minimal data-URI that resolves to a blank/transparent image, so the browser can resolve the src immediately and move on (with no error or network request). Maybe `src=&quot;data:image/gif;base64,&quot;` would be better?



  [1]: http://bxslider.com/
  [2]: http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
  [3]: http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/
  [4]: http://www.faqs.org/rfcs/rfc2397.html

Blank image encoded as data-uri

[ISO 8601] and [RFC 3339] seem to be two formats that are common the web. Should I use one over the other? Is one just an extension? Do I really need to care that bad?


  [ISO 8601]: https://en.wikipedia.org/wiki/ISO_8601
  [RFC 3339]: https://www.rfc-editor.org/rfc/rfc3339

What&#39;s the difference between ISO 8601 and RFC 3339 Date Formats?

I found some good cons here:

* The noscript element only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript element will not be displayed.

* Many scripts are dependent on a specific feature or features of the language being supported in order for them to be able to run (for example document.getElementById). Where the required features are not supported the JavaScript is unable to run but since JavaScript itself is supported the noscript content will not be displayed.

* The most useful place to use the noscript element is in the head of the page where it would be able to selectively determine what stylesheet and meta elements get applied to the page as the page is loading rather than having to wait until the page is loaded. Unfortunately the noscript element is only valid within the body of the page and so cannot be used in the head.

* The noscript element is a block level element and therefore can only be used to display entire blocks of content when JavaScript is disabled. It cannot be used inline.

* Ideally, web pages should use HTML for the content, CSS for the appearance, and JavaScript for the behavior. Using the noscript element is applying a behavior from within the HTML rather than applying it from JavaScript.

Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm

I very much agree on last point. Is there a way to make and add an external `&lt;noscript&gt;` file? Should we place `&lt;noscript&gt;` in the `&lt;head&gt;`?

Shouldn&#39;t we use &lt;noscript&gt; element?

Is it valid html to have the following:

    &lt;form action=&quot;a&quot;&gt;
        &lt;input.../&gt;
        &lt;form action=&quot;b&quot;&gt;
            &lt;input.../&gt;
            &lt;input.../&gt;
            &lt;input.../&gt;
        &lt;/form&gt;
        &lt;input.../&gt;
    &lt;/form&gt;

So when you submit &quot;b&quot; you only get the fields within the inner form. When you submit &quot;a&quot; you get all fields minus those within &quot;b&quot;.

If it isn&#39;t possible, what workarounds for this situation are available?


Is it valid to have a html form inside another html form?

Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (`class=&quot;one two&quot;` vs `class=&quot;two one&quot;`)

Right now, there seems to be no such effect.

Example:  both divs are orange in color on Firefox


    &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
       &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
    
    &lt;html&gt;
      &lt;head&gt;
        &lt;style&gt;
          .one { border: 6px dashed green }
          .two { border: 6px dashed orange }
        &lt;/style&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
    
      &lt;div class=&quot;one two&quot;&gt;
        hello world
      &lt;/div&gt;
      
      &lt;div class=&quot;two one&quot;&gt;
        hello world
      &lt;/div&gt;

Multiple CSS Classes: Properties Overlapping based on the order defined

I want to target IE7 and IE8 with W3C-compliant CSS. Sometimes fixing CSS for one version does not fix for the other. How can I achieve this?

How does one target IE7 and IE8 with valid CSS?

Can we place `&lt;img&gt;` inside `&lt;h1&gt;` according to web standards? like this

    &lt;h1&gt; Demo text &lt;img src=&quot;anyimage.jpg&quot;/&gt; &lt;/h1&gt;

Can we place `&lt;img&gt;` inside `&lt;h1&gt;` according to web standards?

Is this the correct use of `Blockquote`,  `q` and `cite`?

    &lt;p&gt;
    &lt;blockquote&gt;Type HTML in the textarea above, &lt;q&gt;and it will magically appear&lt;/q&gt; in the frame below.
    &lt;/blockquote&gt;
    &lt;cite&gt;&lt;a href=&quot;http://stackoverflow.com&quot;&gt;refrence url&lt;/a&gt;
    &lt;/p&gt;

Is use of `Blockquote`,  `q` semantically correct? or both are presentational element , so should not be used?

Correct use of Blockquote, q and cite?

I&#39;m trying to create a table where each row is a form. I want that each input is in a different table division, but I still need that for example, all first inputs belong to the same table head and so on.

**What I&#39;m trying to do is an editable grid**, more or less this:

    &lt;table&gt;
        &lt;tr&gt;
            &lt;form method=&quot;POST&quot; action=&quot;whatever&quot;&gt;
                &lt;td&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/td&gt;
            &lt;/form&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;form method=&quot;POST&quot; action=&quot;whatever&quot;&gt;
                &lt;td&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/td&gt;
            &lt;/form&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

But apparently I cannot arrange the tags in that way (or so is what the w3c validator said).

Any good way to do this?



All Web Standards Solutions on Gang of Coders

Total of 26 Web Standards Solutions

Is it a good practice to use an empty URL for a HTML form's action attribute? (action="")

Is it ok to use <strong> in place of <b> blindly?

input type="submit" Vs button tag are they interchangeable?

How to remove data-* attributes using HTML5 dataset

Does HTML5 ban th cells from tbody?

Can I use non existing CSS classes?

Is there a query language for JSON?

Valid content-type for XML, HTML and XHTML documents

Is a DIV inside a TD a bad idea?

How can HTML5 "replace" Flash?

What is the proper way to URL encode Unicode characters?

Do browsers send "\r\n" or "\n" or does it depend on the browser?

Why <big> is not in HTML 5 Tag list while <small> is?

how to mix links ( <a> tag ) and headings ( <h1> tag ) in web standard?

Why is there no OFFICIAL JavaScript reference?

What characters are allowed in the HTML Name attribute inside input tag?

Do SVG docs support custom data- attributes?

Blank image encoded as data-uri

What's the difference between ISO 8601 and RFC 3339 Date Formats?

Shouldn't we use <noscript> element?

Is it valid to have a html form inside another html form?

Multiple CSS Classes: Properties Overlapping based on the order defined

How does one target IE7 and IE8 with valid CSS?

Can we place `<img>` inside `<h1>` according to web standards?

Correct use of Blockquote, q and cite?

Create a HTML table where each TR is a FORM