td without parent table tag

Question

HTML:

<td class="tabletd"> text one </td><br>
<td class="tabletd" id="tdSecond"> this is next td</td>
<button onclick="myFunc()">click</button>

JS:

function myFunc() {
    var second    = document.getElementById('tdSecond').innerHTML;
    //var second2 = document.getElementsByTagName('td')[1]; //gives error undefined
    alert(second);
}

I cannot make this work. Even there is no effect of css see JSFiddle.
But both javascript and css work fine if we use <li> without its parent <ul>.
And also javascript and css work fine on custom tag. for eg:- <ddd> text </ddd>

So why we get error on both css and javascript if we use <td> without its parent <table> ?

Answer 1

This would explain why <li> items can be without <ul>
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

If the parent element is an ol element, then the li element has an ordinal value.

<ul> is merely meant to group similar <li> items. Without the <ul>, a <li> is just an individual list item that is not grouped whatsoever. So having a <li> without a <ul> is still valid markup that the parser will pass.

<td> and <tr> elements specifically have to reside within a <table> element. http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element

This is how tables are formed by the parser and having a <td> without a <table> will throw a table model error:
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#table-model

This test shows:

<!-- fail -->
<tr>
  <td>tr_td_test</td>
</tr>

<!-- fail -->
<td>td_test</td>

<!-- pass as a regular list item -->
<li>li_test</li>

<!-- pass and tr tag is added to DOM -->
<table>
  <td>table_td_test 1</td>
</table>

<!-- pass and td tag is added to DOM -->
<table>
  <tr>
    table_tr_test_1
  </tr>
</table>