The `span` element is an *inline* element, which should contain only other *inline* elements and no *block* elements.

From [the spec][1]:

&gt; Generally, block-level elements may
&gt; contain inline elements and other
&gt; block-level elements. Generally,
&gt; inline elements may contain only data
&gt; and other inline elements. Inherent in
&gt; this structural distinction is the
&gt; idea that block elements create
&gt; &quot;larger&quot; structures than inline
&gt; elements.

The generic block-level grouping element is the `div`. The generic inline-level grouping element is the `span`.

Again, from [the spec][2]:

&gt; The DIV and SPAN elements, in
&gt; conjunction with the id and class
&gt; attributes, offer a generic mechanism
&gt; for adding structure to documents.
&gt; These elements define content to be
&gt; inline (SPAN) or block-level (DIV) but
&gt; impose no other presentational idioms
&gt; on the content.


  [1]: http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
  [2]: http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

According to the [HTML Living Standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/), the content model for SPAN elements is &quot;Phrasing content&quot;.

Read about the SPAN element [here](http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element).

Read about phrasing content [here](http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#phrasing-content). This second link contains a full list of all the elements that can be put inside a SPAN element.

Is there a reliable way to `JSON.stringify` a JavaScript object that guarantees that the ceated JSON string is the same across all browsers, Node.js and so on, given that the JavaScript object is the same?

I want to hash JavaScript objects like

    {
      signed_data: object_to_sign,
      signature:   md5(JSON.stringify(object_to_sign) + secret_code)
    }

and pass them around across web applications (e.g. Python and Node.js) and the user so that the user can authenticate against one service and show the next service &quot;signed data&quot; for that one to check if the data is authentic.

However, I came across the problem that `JSON.stringify` is not really unique across the implementations:

 - In Node.js / V8, `JSON.stringify` returns a JSON string without unnecessary whitespace, such as &#39;{&quot;user_id&quot;:3}.
 - Python&#39;s `simplejson.dumps` leaves some whitespace, e.g. `&#39;{&quot;user_id&quot;: 3}&#39;`
 - Probably other stringify implementations might deal differently with whitespace, the order of attributes, or whatever.

Is there a reliable cross-platform stringify method? Is there a &quot;nomalised JSON&quot;?

Would you recommend other ways to hash objects like this?


**UPDATE:**

This is what I use as a workaround:

    normalised_json_data = JSON.stringify(object_to_sign)
    {
      signed_data: normalised_json_data,
      signature:   md5(normalised_json_data + secret_code)
    }

So in this approach, not the object itself, but its JSON representation (which is specific to the sigining platform) is signed. This works well because what I sign now is an unambiguous string and I can easily `JSON.parse` the data after I have checked the signature hash.

The drawback here is that if I send the whole `{signed_data, signature}` object as JSON around as well, I have to call `JSON.parse` twice and it does not look as nice because the inner one gets escaped:

    {&quot;signature&quot;: &quot;1c3763890298f5711c8b2ea4eb4c8833&quot;, &quot;signed_data&quot;: &quot;{\&quot;user_id\&quot;:5}&quot;}

How to reliably hash JavaScript objects?

What column type should be used to store serialized data in a mysql db?
I know you can use varbinary, blob, text. What&#39;s considered the best and why?

Edit:
I understand it is not &quot;good&quot; to store serialized data. I need to do it in this one case though. Please just trust me on this and focus on the question if you have an answer. Thanks!

What column type should be used to store serialized data in a mysql db?

Are tags such as `&lt;div&gt;`, `&lt;form&gt;`, `&lt;pre&gt;` etc.. allowed inside a `&lt;span&gt;`?


Can &lt;span&gt; tags have any type of tags inside them?

<p>Are tags such as <code>&#x3C;div></code>, <code>&#x3C;form></code>, <code>&#x3C;pre></code> etc.. allowed inside a <code>&#x3C;span></code>?</p>


Is there a way to replace the normal text within a table element that is placed within the body of the HTML?

Like replacing &quot;hello&quot; with &quot;hi&quot;?

Please only use **JavaScript** without **jQuery**.



Replace words in the body text

Is there a way to have all links on a page be relative to the root directory?

For example, on `www.example.com/fruits/apples/apple.html` I could have a link saying:

    &lt;a href=&quot;fruits/index.html&quot;&gt;Back to Fruits List&lt;/a&gt;

Would this link be pointing to `www.example.com/fruits/apples/fruits/index.html` or `www.example.com/fruits/index.html`? If the first, is there a way to have it point to the 2nd instead?

Having links relative to root?

You are aware of the age-old  problem: Containers containing floated elements don&#39;t automatically expand their height to enclose their children.

One approach to fix this is the [&quot;clearfix&quot;][1] which adds a number of CSS rules to ensure a container stretches properly.

However, just giving the container `overflow: hidden` seems to work just as well, and with the same amount of browser compatibility. 

According to [this guide][2], both methods are compatible across all browsers that are important today.

Does this mean that &quot;clearfix&quot; is deprecated? Is there any advantage left in using it over `overflow: hidden`?

There is a very similar question here: https://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto
 but the question isn&#39;t really answered there.


  [1]: http://www.positioniseverything.net/easyclearing.html
  [2]: https://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto

Is clearfix deprecated?

The current versions of Firefox and Chrome include a drag handler to resize a `&lt;textarea&gt;` box. I need to capture the resizing event, I thought it would be easy with jQuery&#39;s `resize()` event, but it doesn&#39;t work!

I have also tried the normal `onResize` event, but the result is the same. [You can try it on JSFiddle][1].


Is there a way to capture it?

  [1]: http://jsfiddle.net/HhSYG/

Resize event for textarea?

In head, which comes first: meta or title?

I was reading this:

&gt; This [meta] tag should be the first in the
&gt; HEAD section, because the server will
&gt; process the text above as ASCII with
&gt; no specific format that it only known
&gt; once the tag is analyzed.

http://www.xul.fr/en/html5/html.php

Does the standard specify the order?

Are there disadvantages in either order?

In &lt;head&gt;, which comes first: &lt;meta&gt; or &lt;title&gt;?

This seems like it ought to be easy, but I&#39;m just not getting something.

I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.

For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally).  If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).

Currently I have it defined like so:

    &lt;body style=&quot;height: 100%&quot;&gt;
      &lt;div id=&quot;content&quot; style=&quot;width: 100%; height: 100%&quot;&gt;
        &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;
             width=&quot;100%&quot; height=&quot;100%&quot;
             viewBox=&quot;0 0 1024 768&quot;
             preserveAspectRatio=&quot;xMidYMid meet&quot;&gt;
          ...
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/body&gt;

However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn&#39;t what I want.

What am I missing?

How to scale SVG image to fill browser window?

I can&#39;t believe what is happening in my website. When I add this line:

    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
     &lt;head&gt;

Everything works fine. And when I don&#39;t, CSS &quot;messes&quot; up, everything becomes different and layout becomes &quot;ugly&quot;. 

How can this line solve all the problems?!

What does &quot;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&quot; do?

I want to make an HTML div tag fade in and fade out. 

I have some code that fades out, but when I fade in, the opacity of the div stays at 0.1 and doesn&#39;t increase.

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
     &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
     
     &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot;&gt;
     &lt;head&gt;
    	&lt;title&gt;Fade to Black&lt;/title&gt;
    	&lt;script type=&quot;text/javascript&quot;&gt;
    		//&lt;![CDATA[
    		function slidePanel(elementToSlide, slideSource)
    		{
    			var element = document.getElementById(elementToSlide);
    			
    			if(element.up == null || element.up == false) {
    				setTimeout(&quot;fadeOut(\&quot;&quot; + elementToSlide + &quot;\&quot;)&quot;, 100);
    				element.up = true;
    				slideSource.innerHTML = &quot;Bring it down&quot;;
    			} else {
    				setTimeout(&quot;fadeIn(\&quot;&quot; + elementToSlide + &quot;\&quot;)&quot;, 100);
    				element.up = false;
    				slideSource.innerHTML = &quot;Take it up&quot;;
    			}
    		}
    		
    		function fadeIn(elementToFade)
    		{
    			var element = document.getElementById(elementToFade);
    			
    			element.style.opacity += 0.1;
    			if(element.style.opacity &gt; 1.0) {
    				element.style.opacity = 1.0;
    			} else {
    				setTimeout(&quot;fadeIn(\&quot;&quot; + elementToFade + &quot;\&quot;)&quot;, 100);
    			}
    		}
    		
    		function fadeOut(elementToFade)
    		{
    			var element = document.getElementById(elementToFade);
    		
    			element.style.opacity -= 0.1;
    			if(element.style.opacity &lt; 0.0) {
    				element.style.opacity = 0.0;
    			} else {
    				setTimeout(&quot;fadeOut(\&quot;&quot; + elementToFade + &quot;\&quot;)&quot;, 100);
    			}
    		}
    		//]]&gt;
    	&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
    	&lt;div&gt;
    		&lt;div id=&quot;slideSource&quot;
    			  style=&quot;width:150px; height:20px;
    					text-align:center; background:green&quot;
    			 onclick=&quot;slidePanel(&#39;panel&#39;, this)&quot;&gt;
    			Take It up
    		&lt;/div&gt;
    		&lt;div id=&quot;panel&quot;
    			  style=&quot;width:150px; height:130px;
    					text-align:center; background:red;
    					opacity:1.0;&quot;&gt;
    			Contents
    		&lt;/div&gt;
    	&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

What am I doing wrong and what is the best way to fade in and fade out an element?

How to do fade-in and fade-out with JavaScript and CSS

So I have a table with this style:

    table-layout: fixed;

Which makes all columns to be of the same width. I would like to have one column (the first one) to be wider and then rest of the columns to occupy the remaining width of the table with equal widths.

How to achieve that?

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid black;
      background: #ddd;
      table-layout: fixed;
    }

    table th, table td {
      border: 1px solid #000;
    }

    table td.wideRow, table th.wideRow {
      width: 300px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;table class=&quot;CalendarReservationsBodyTable&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th colspan=&quot;97&quot;&gt;Rezervovane auta&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class=&quot;corner wideRow&quot;&gt;Auto&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;0&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;1&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;2&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;3&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;4&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;5&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;6&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;7&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;8&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;9&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;10&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;11&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;12&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;13&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;14&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;15&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;16&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;17&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;18&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;19&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;20&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;21&lt;/th&gt;
          &lt;th class=&quot;odd&quot; colspan=&quot;4&quot;&gt;22&lt;/th&gt;
          &lt;th class=&quot;&quot; colspan=&quot;4&quot;&gt;23&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class=&quot;alignRight wideRow&quot;&gt;KE-260 FC - Octavia combi&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td colspan=&quot;16&quot; class=&quot;highlighted borderLeft&quot; title=&quot;Richard Knop&quot;&gt;
            Richard Knop
          &lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td colspan=&quot;14&quot; class=&quot;highlighted&quot; title=&quot;Richard Knop&quot;&gt;
            Richard Knop
          &lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot; borderLeft&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;odd&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

jsfiddle: http://jsfiddle.net/6p9K3/

Notice the first column, I want it to be `300px` wide.

Table with table-layout: fixed; and how to make one column wider

Why is the following code valid when I am using a `&lt;div&gt;` inside a `&lt;li&gt;`?

    &lt;ul&gt;
        &lt;li class=&quot;aschild&quot;&gt;
            &lt;div class=&quot;nav&quot;&gt;Test&lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

Content Type	Original Author	Original Content on Stackoverflow
Question	Alex	View Question on Stackoverflow
Solution 1 - Html	Wayne	View Answer on Stackoverflow
Solution 2 - Html	Šime Vidas	View Answer on Stackoverflow

Can <span> tags have any type of tags inside them?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

What column type should be used to store serialized data in a mysql db?

How to reliably hash JavaScript objects?

Attributions