CODEWITHSUNDEEP
htmlhtml-lists
user3138025
user3138025

Reputation: 825

How to make an Unordered List in HTML

Within my HTML section of an SHTML page I have the following:

<div class="block_center_1000_text_left">	
    <p class="anchor2" >
    ...
	    <a class="standard_paragraph_18">
        <ul>
        	<li>Robert Schumann: Papillons Op.2</li>
        	<li>Frédéric Chopin: Preludio in do diesis minore Op.45</li>
        	<li>Claude Debussy: “Pour le Piano” (Prélude - Sarabande - Toccata)</li>
	    	<li>Franz Liszt: Sonata in si minore R21</li>
		</ul>
    ...
        </a>
    </p>
</div>

I get a validation error from Dreamweaver: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag [XHTML 1.0 Transitional]

I'm not sure how to interpret the error. I'd like the list of classical composers ordered with a bullet or something like that.

Thanks for looking at this.

Upvotes: 0

Views: 146

Answers (1)

giorgio
giorgio

Reputation: 10202

A list (<ul>) is not allowed inside an anchor (<a>). Officially that is. A browser will show it nonetheless.

In addition: the HTML5 spec describes the content model (content that is allowed or expected inside an element) of an anchor as transparent. Transparent means that the allowed or expected content is derived from it's parent.

Example: if an anchor's parent is a <p>, you should look to the <p> to see what is allowed. If it's direct parent would've been an <div>, then you should look to the <div>.

In this case, the anchor element is a direct descendent of a paragraph. And a paragraph allowes phrasing content, which is text, or elements that markup text (such as <strong>). But an <ul> is not phrasing content, so should be placed outside of a <p>.

So to sum up, theoratically this would be correct:

<p class="anchor2">Some text about birds or something totally unrelated to birds</p>
<a href="#">
    <ul>
        <li>Johann Sebastian Bach</li>
        ...
    </ul>
</a>

But in your particular example you only assigned a class to the anchor. But an anchor without an id attribute (which you can use to link to that specific spot in a document) or href element basically doesn't do anything. If you want to style the list, apply the classes to the list itself, not to some parent element.

Upvotes: 3

Related Questions