HTML5 Validation Errors

Question

I have a bit of problem when trying to validate my page as HTML5. There are two errors. The first says, 'Element head is missing a required instance of child element title', and the second error is, 'Element hr not allowed as child of element ul in this context. (Suppressing further errors from this subtree)'.

Here is my source code

<!DOCTYPE html>

<html lang="en">

<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="core/css/style.css">

</head>

<body>

<nav>

<h1>Name</h1>

<ul>

<hr>

<li><a href=".."><img src="core/images/home.png" alt="Home"></a></li>

<hr>

<li><a href=".."><img src="core/images/about.png" alt="About"></a></li>

<hr>

<li><a href=".."><img src="core/images/projects.png" alt="Projects"></a></li>

<hr>

</ul>

</nav>

-Thank you in advance for any help

The error messages seem pretty self-explanatory to me. You are missing a <title> from the head and you can't have <hr>s inside <ul> tags. — JJJ
– JJJ, Commented Apr 3, 2012 at 10:12
Thank you, so what can I use instead of the <hr> tags within the <ul> tags? — Jack-T
– Jack-T, Commented Apr 3, 2012 at 10:14
Why are you using lists anyway? Just use divs instead. Or style the list elements so that they have a top or bottom border. — JJJ
– JJJ, Commented Apr 3, 2012 at 10:15
@Juhana as it's a navigation menu I would say that list tags are the correct markup. OP should apply CSS to achieve the desired look. — Dunhamzzz
– Dunhamzzz, Commented Apr 3, 2012 at 10:19

Dunhamzzz · Accepted Answer · 2012-04-03 10:18:50Z

12

As Juhana's comment points out the errors are self-explanatory:

Element head is missing a required instance of child element title

This means you are simply missing a <title> tag in your <head> tags. You should definitely give your page a title!

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

By there very nature, <ul> (unordered list) tags can only contain <li> (list item) tags. You are wrong to use a horizontal-rule inside your list. You can achieve the same effect with CSS. I suggest read a few more tutorials on HTML and basic CSS.

answered Apr 3, 2012 at 10:18

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack-T Over a year ago

Thanks you :)! I've fixed it now just added a border-bottom to my <ul> tag and it worked :D

score 5 · Accepted Answer · 2012-05-18 16:22:13Z

5

I had the same problem with <hr> tags inside an <ul>. Instead of applying new css rules to your list you just have to contain <hr> inside of a <li>.

<ul>
  <li><hr/></li>
  <li>text</li>
</ul>

Then all of your elements inside of a <ul> are properly nested and contained. No extra work necessary.

edited May 18, 2012 at 16:22

answered May 17, 2012 at 17:18

user1336847

Collectives™ on Stack Overflow

HTML5 Validation Errors

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related