xan xan - 4 months ago 11
HTML Question

HTML Script Not Validating Properly

I am trying to do a nested list in HTML and validate it on https://validator.w3.org. When I validate it I get full of errors about how I nest my tags.

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>Ex 2</title>
</head>
<body>
<ul>
<li>Outer-1
<li>Outer-2</li>
<ul>
<li>Inner-1
<li>Inner-2</li>
<li>Inner-3</li>
<ul>
<li>Deep-1</li>
</ul>
</li>
<li>Inner-4
<ul>
<li>Deep-2</li>
</ul>
</li>
</ul>
</li>
<li>Outer-3</li>
</ul>
<ul>
<li style = "list-style-type: decimal">Outer-1
<li style = "list-style-type: decimal">Outer-2</li>
<ul>
<li style = "list-style-type: lower-alpha">Inner-1
<li style = "list-style-type: lower-alpha">Inner-2</li>
<ul>
<li style = "list-style-type: lower-roman">Deep-1</li>
<li style = "list-style-type: lower-roman">Deep-2</li>
</ul>
</li>
</ul>
</li>
<li style = "list-style-type: decimal">Outer-3</li>
<ul>
<li style = "list-style-type: lower-roman">Inner-3</li>
</ul>
</ul>
</body>
</html>


After looking through some posts on stackoverflow I found this (correct semantics for ul in ul) post that says I should nest my ul tags in li but I found that this does not give the same result of what I want, which is what I have currently but I also want it to validate properly. Can anyone help with the correct format so it validates properly?

Answer

<!DOCTYPE html>
<html  lang ="en">
  <head>
    <meta charset="utf-8">
    <title>Ex 2</title>
  </head>
  <body>
    <ul>
      <li>Outer-1</li>
      <li>Outer-2
      <ul>
        <li>Inner-1
        <li>Inner-2</li>
        <li>Inner-3
        <ul>
          <li>Deep-1</li>
        </ul>
        </li>
      <li>Inner-4
        <ul>
          <li>Deep-2</li>
        </ul>
      </li>
    </ul>
    </li>
  <li>Outer-3</li>
  </ul>
<ul>
  <li style = "list-style-type: decimal">Outer-1</li>
  <li style = "list-style-type: decimal">Outer-2
  <ul>
    <li style = "list-style-type: lower-alpha">Inner-1</li>
    <li style = "list-style-type: lower-alpha">Inner-2
    <ul>
      <li style = "list-style-type: lower-roman">Deep-1</li>
      <li style = "list-style-type: lower-roman">Deep-2</li>
    </ul>
    </li>
  </ul>
  </li>
  <li style = "list-style-type: decimal">Outer-3</li>
</ul>

I've modified some tags and now it's working fine.