HTML5 validation error: Element source not allowed as a child element of audio in this context

Question

This is a snippet of code from my assignment. I've checked the w3 samples http://www.w3schools.com/html/html5_audio.asp and it is formatted correctly. Am I just going crazy because of these errors or did I miss something?

I believe it's that the HTML5 source element doesn't like how the type is written in but how else would I do it? Please let me know if you guys see anything I'm just missing.

<li>.ogg(HTML5 <code>audio</code> tag)
            <ul>
                <li style="list-style-type:none;">

                    <audio controls>
    `                   <source src="/audio1/horse.ogg" type="audio/ogg">
                        <!-- IE Support -->
                        <source src="http://itwp.macomb.edu/wannerj/itwp1000/sounds/horse.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                </li>
            </ul>
        </li>

Answer 1

Maintainer of the W3C HTML Checker here. The problem is that you have a stray ` (backtick) character in your HTML, on the line after the <audio controls> start tag and before the <source src="/audio1/horse.ogg" type="audio/ogg"> start tag.

Remove that ` character and the error will disappear.

---

Explanation

The reason the validator is showing that error message in this case is that when it sees that ` character, it interprets it as text content (fallback content) to show to users in browsers that don’t support the audio element; that is, the same as the "Your browser does not support the audio element" text in the snippet in the question.

But if an audio element has such text content, then the rules in the HTML spec state that no elements are allowed to follow that text content. So when the checker sees the source element in this case, it emits an error message saying the source element is not allowed.

I’m sorry the checker doesn’t give a better error message here to help you pinpoint the problem; for example, it would be much better if it said something like:

The source element is not allowed here because this audio element already has text content (`); remove the text content or move it to follow the source element.

But the current design of the code for the checker makes it very difficult to have it produce a more-helpful detailed error message like that.