**TL;DR**: an `&lt;li&gt;` can contain any element that is valid in `&lt;body&gt;`.

In the [HTML 4.01 spec for lists][1] you’ll find the relevant extract of the DTD:

    &lt;!ELEMENT LI - O (%flow;)* -- list item --&gt;

This specifies that an `&lt;li&gt;` may contain [flow content][2], which is the collection of all [block][3] and [inline][4] elements.

The [HTML5 spec for an `&lt;li&gt;`][5] is the same in that it also allows any [flow content][6].


  [1]: http://www.w3.org/TR/html401/struct/lists.html#edef-UL
  [2]: http://www.w3.org/TR/html401/sgml/dtd.html#flow
  [3]: http://www.w3.org/TR/html401/sgml/dtd.html#block
  [4]: http://www.w3.org/TR/html401/sgml/dtd.html#inline
  [5]: http://www.w3.org/TR/html5/grouping-content.html#the-li-element
  [6]: http://www.w3.org/TR/html5/dom.html#flow-content-1

It&#39;s a block level element so pretty much anything goes. Trouble only comes when you&#39;re putting block level elements inside inline ones.

Yup, pretty much. You can have lists inside lists (&lt;strike&gt;either inside the `&lt;li&gt;` or just loose inside the `&lt;ol&gt;`/`&lt;ul&gt;`&lt;/strike&gt; *the inner list must be inside an `&lt;li&gt;`*), block elements and inline elements.

To me it wouldn&#39;t make much sense to put a `&lt;table&gt;` inside an `&lt;li&gt;`, but even that&#39;s still valid.


You can use the [W3C&#39;s Markup Validation Service][1] to test against your cases to know whether or not your markup is valid.

&gt; This validator checks the markup
&gt; validity of Web documents in HTML,
&gt; XHTML, SMIL, MathML, etc.


  [1]: http://validator.w3.org/

Is it possible to listen for incoming keystrokes in a running nodejs script?
If I use `process.openStdin()` and listen to its `&#39;data&#39;` event then the input is buffered until the next newline, like so:

    // stdin_test.js
    var stdin = process.openStdin();
    stdin.on(&#39;data&#39;, function(chunk) { console.log(&quot;Got chunk: &quot; + chunk); });

Running this, I get:
   
    $ node stdin_test.js
                    &lt;-- type &#39;1&#39;
                    &lt;-- type &#39;2&#39;
                    &lt;-- hit enter
    Got chunk: 12

What I&#39;d like is to see:
  
    $ node stdin_test.js
                    &lt;-- type &#39;1&#39; (without hitting enter yet)
     Got chunk: 1
 
I&#39;m looking for a nodejs equivalent to, e.g., [`getc` in ruby](http://www.ruby-doc.org/docs/ProgrammingRuby/html/ref_c_io.html#IO.getc)

Is this possible?


nodejs how to read keystrokes from stdin

What&#39;s the difference between using Require.JS amd simply creating a `&lt;script&gt;` element in the DOM?

My understanding of Require.JS is that it offers the ability to load dependencies, but can this not simply be done by creating a `&lt;script&gt;` element that loads the necessary external JS file?

For example, lets assume I have the function `doStuff()`, which requires the function `needMe()`. `doStuff()` is in the external file `do_stuff.js`, while `needMe()` is in the external file `need_me.js`.

**Doing this the Require.JS way:**


    define([&#39;need_me&#39;],function(){
        function doStuff(){
            //do some stuff
            needMe();
            //do some more stuff
        }
    });

**Doing this by simply creating a script element:**

    function doStuff(){
        var scriptElement  = document.createElement(&#39;script&#39;);
        scriptElement.src = &#39;need_me.js&#39;;
        scriptElement.type = &#39;text/javascript&#39;;
        document.getElementsByTagName(&#39;head&#39;)[0].appendChild(scriptElement);
    
        //do some stuff
        needMe();
        //do some more stuff
    }

Both of these work. However, the second version doesn&#39;t require me to load all of the Require.js library. I don&#39;t really see any functional difference...

What&#39;s the difference between Require.js and simply creating a &lt;script&gt; element in the DOM?

I have been searching for the list of tags that are available inside a `&lt;li&gt;`, but I couldn&#39;t find any reference.

Is it possible that any standards-compliant HTML 4+ block element is allowed in them?


What are the allowed tags inside a &lt;li&gt;?

<p>I have been searching for the list of tags that are available inside a <code>&#x3C;li></code>, but I couldn't find any reference.</p>
<p>Is it possible that any standards-compliant HTML 4+ block element is allowed in them?</p>


I have the following HTML:

		&lt;ul&gt;
			&lt;li&gt;
			&lt;div&gt;first&lt;/div&gt;
			&lt;/li&gt;
			&lt;li&gt;
			&lt;div&gt;first&lt;/div&gt;
			&lt;/li&gt;
			&lt;li&gt;
			&lt;div&gt;first&lt;/div&gt;
			&lt;/li&gt;
			&lt;li&gt;
			&lt;div&gt;first&lt;/div&gt;
			&lt;/li&gt;
		&lt;/ul&gt;

and the following css rules:

&lt;!-- language: lang-css --&gt;

			ul {
				padding: 0;
				border: solid 1px #000;
			}
			li {
				display:inline-block;
				padding: 10px;
				width: 114px;
				border: solid 1px #f00;
				margin: 0;
			}
			
			li div {
				background-color: #000;
				width: 114px;
				height: 114px;
				color: #fff;
				font-size: 18px;
			}

For some strange reason, the list items appear with a margin around them in both Firefox and Chrome. Looking at firebug, the list items do not have any margin at all, but there seems to be a void space between them.

If I later on add more list items via javascript using 

    $(&#39;&lt;li&gt;&lt;div&gt;added via js&lt;/div&gt;&lt;/li&gt;&#39;).appendTo($(&#39;ul&#39;));

the &quot;margin&quot; doesn&#39;t appear around the new elements:

![Unwanted margins][1]

Any idea of what the hell&#39;s happening here?


  [1]: http://i.stack.imgur.com/1s8Eo.jpg


Unwanted margin in inline-block list items

W3Schools.com and I&#39;m pretty sure I remember seeing W3C.org state that `&lt;menu&gt;` should be used for Toolbar menus and listing form control commands.

So, which one should I use for my main menu? `Nav`, or `Menu`? Does it matter?


&lt;nav&gt; or &lt;menu&gt; (HTML5)

Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?

**EDIT**

I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html# that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:

&gt; The following elements support the
&gt; tabindex attribute: A, AREA, BUTTON,
&gt; INPUT, OBJECT, SELECT, and TEXTAREA.

So I am a little confused, what to do in order to be standarts compliant and make my use case work?

**EDIT2**

My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.

tabindex in CSS

I have seen this many a times that the prospect of a negative padding might help the development of CSS of certain page elements become better and easier. Yet, there is no provision for a negative padding in the W3C CSS. What is the reason behind this? Is there any obstruction to the property that prevents it&#39;s use as such? Thanks for your answers.

**UPDATE**&lt;BR&gt;&lt;BR&gt;
As I see, for example, in case you are using a font that has something, say, a 20px of vertical spacing, and you wish to apply a dashed border to the bottom of the font, say when a hyperlink appears. In such cases you&#39;ll find the style to be way too shabby, as the dashed border will appear 20px below the specified word. if you use negative margin, it&#39;s not going to work, as margin alters the area outside borders. Negative padding might help in such situations.

Why does CSS not support negative padding?

I saw the `//somepage.com/resource` url format. For example:

    &lt;img src=&quot;//remotesite.com/image1.jpg&quot; /&gt;

The point of this is that if the current page (the page defining the `img` tag) is using `http`, then the request to the remote site is made via http. If it is https - it&#39;s https. This eliminates browser warnings of not fully encrypted pages.

My question is - is this URL format safe to use for all browsers. And is it a standard?

Absolute URLs omitting the protocol (scheme) in order to preserve the one of the current page

Imagine a simple unsorted list with some `&lt;li&gt;` items. Now, I have defined the bullets to be square shaped via ` list-style:square;` However, if I set the color of the `&lt;li&gt;` items with `color: #F00;` then *everything* becomes red!

While I only want to set the color of the square bullets. Is there an **elegant way** to define the color of the bullets in CSS...

# *...without using any sprite images nor span tags!*

**HTML**

    &lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;ul&gt;

**CSS**

    li{
       list-style:square;
    }

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Now that we have a dedicated `&lt;nav&gt;` tag, 

Is this:

    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#foo&quot;&gt;foo&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;

any better than the following?

    &lt;nav&gt;
      &lt;a href=&quot;#foo&quot;&gt;foo&lt;/a&gt;
      &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;
      &lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt;
    &lt;/nav&gt;

Assuming that I don&#39;t need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?

Should I use &lt;ul&gt;s and &lt;li&gt;s inside my &lt;nav&gt;s?

The W3 docs have a [nested list example][1] prefixed by `DEPRECATED EXAMPLE:`, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

So which of these ways is the correct way to write an HTML list?

**Option 1**: the nested `&lt;ul&gt;` is a child of the parent `&lt;ul&gt;`

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:&lt;/li&gt;
        &lt;ul&gt;
            &lt;li&gt;Subitem 1&lt;/li&gt;
            &lt;li&gt;Subitem 2&lt;/li&gt;
        &lt;/ul&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;

**Option 2**: the nested `&lt;ul&gt;` is a child of the `&lt;li&gt;` it belongs in

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:
            &lt;ul&gt;
                &lt;li&gt;Subitem 1&lt;/li&gt;
                &lt;li&gt;Subitem 2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;


  [1]: http://www.w3.org/TR/html401/struct/lists.html#h-10.2

Proper way to make HTML nested list?

I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?

Ideally I don&#39;t want to do list-style-image with a different class for each number, but that&#39;s all I&#39;ve been able to think of so far... That seems terribly unsemantic.

IE:

    Default Style:
    1. ______
    2. ______
    3. ______

    Desired Style:
    1  ______
    2  ______
    3  ______

    Alternate Style:
    1) ______
    2) ______
    3) ______



HTML + CSS: Ordered List without the Period?

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	petsagouris	View Question on Stackoverflow
Solution 1 - Html	RoToRa	View Answer on Stackoverflow
Solution 2 - Html	Scott Brown	View Answer on Stackoverflow
Solution 3 - Html	Nathan MacInnes	View Answer on Stackoverflow
Solution 4 - Html	Sarfraz	View Answer on Stackoverflow

What are the allowed tags inside a <li>?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

What's the difference between Require.js and simply creating a <script> element in the DOM?

nodejs how to read keystrokes from stdin

Attributions