Allowed Child Elements of Ul

Allowed child elements of ul

It is not valid in any version of HTML, see e.g. HTML 4.01 on ul.

Browsers allow it, though, and parse it so that div becomes a child of ul, and they let you style the div too. This is probably the reason why this markup has been used.

Element div not allowed as child of element ul in this context

The error is

            <ul class="image_box_story2">

a ul is a list and can only have li children, not div, that list doesn't have any li children at all.

Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.

Element h4 not allowed as child of element ul in this context?

According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:

<ul>
  <li><h4 class="footerr">SUPPORT</h4></li>
  <li><a href="http://timberlife.nl/contact/" style="color: rgb(255,255,255);">CONTACT</a></li>
  <li><a href="http://timberlife.nl/faq/" style="color: rgb(255,255,255);">FAQ</a></li>
  <li><a href="http://timberlife.nl/disclaimer/" style="color: rgb(255,255,255);">DISCLAIMER</a></li>
</ul>

I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.

Reference: w3.org ul element

HTML: li tag not allowed as child of nav What's an alternative?

A list item (li) should be a child of either an ordered list (ol) or unordered list (ul). Either can be a child of nav.

In your code, you have a closing ul misplaced - that would be an issue for validation.

So, try using an unordered list around your list items.

<nav id="mainav" class="clear"> 
  <ul>
      <li class="active"><a href="index.html">About Us</a></li>
      <li><a href="/trademark-services.html">Trademark Services</a></li>
      <li><a href="/attorneys.html">Attorneys</a></li>
      <li><a href="/contact-us.html">Contact Us</a></li>
  </ul>
</nav>

How To Get Child Elements Of tag 'li' In The 'ul' In javascript

Use the function querySelectorAll along with this selector ul#image-list-view li img.

This approach allows you to get the image elements straightforward and avoid a second function execution. Further, this approach doesn't return null value if the element with id image-list-view doesn't exist.

var targetImages = document.querySelectorAll("ul#image-list-view li img");console.log("Count of images: " + targetImages.length);

.as-console-wrapper { max-height: 100% !important; top: 0; }
ul {  display: none}

<ul id="image-list-view">  <li>    <a href="#" data-gallery>      <img src="images/pic1.jpg" />    </a>  </li>  <li>    <a href="#" data-gallery>      <img src="images/pic2.jpg" />    </a>  </li></ul>

ul tags are not allowed as child tags of h6 tags?

In terms of valid HTML structure, the <h1>-<h6> section heading elements permitted content is phrasing content, which doesn't include the unordered list <ul> element.

Unordered lists are considered to be flow content. Therefore the invalid HTML error being thrown "Element ul is not allowed here". To make your HTML structure valid, you could nest each heading element inside a <li> since list elements permitted content is flow content.

<ul>
   <li><h6>One</h6></li>
   <li><h6>Two</h6></li>
   <li><h6>Three</h6></li>
   <li><h6>Four</h6></li>
   <li><h6>Five</h6></li>
</ul>

---

Related Topics