Is Using <Li> Without Enclosing <Ul> Tags Dangerous

Is using li without enclosing ul tags dangerous?

It's not valid markup at all. If it gets displayed correctly, it's only a matter of luck.

As you seem to define dangerous by "break in browsers for the end user's ability to view the page as intended", then yes it's dangerous.

Browsers are trying their best to compensate for invalid markup but there is no guarantee at all your page gets displayed correctly.

You say validation is the least of your concerns, please reconsider and have a look at Why Validate?. If you care about your page being displayed correctly with no quirks, then validate.

Finally, HTML Tidy may help you fixing existing html.

EDIT: I submitted your fragment to browsershots.org to see how it gets rendered by different browsers.

HTML5 - Does li have to be inside of ul ?

Straight from the W3 HTML5 Spec (This is a candidate spec, I'd actually recommend
kazagistar's W3 link which includes the <menu> element too.):

4.5.7 The li element

Categories:
None. Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.

The li element represents a list item. If its parent element is an ol, or ul, 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.

The W3 Spec shows that you should only use a list item element when it's inside an ordered or unordered list element or a menu element.

While using nested ul and ol in HTML, I am facing problem with the line spacing

I have copied your code and run it, everything is looking nice/ there is no error. May be I recommend you have to reRun your html code in a different browser, may be I recommend google chrome.
If you want to to make a line space you can use the break statement,
or .

p tag not containing ul tag

Please see the answer from a similar question: List of HTML5 elements that can be nested inside P element?

Only phrasing content can be in between the <p> tag and is described as follows:

Phrasing content is the text of the document, as well as elements
that mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.

I cannot apply display: none to ul

You have used this code in wrong CSS file.

Please use right approch:

Your mentioned URL have this CSS
https://html5up.net/uploads/demos/forty/assets/css/main.css

The media query @media screen and (max-width: 480px) is mentioned in this css. Please go there

Please use this bit of code in this media query

#banner .actions {
 display: none;
}

---

Related Topics