Какой код валидный?

pokrovitel

Уважаемые форумчане, подскажите начинающему:Есть 2 разметки в HTML:1) Первый вариант:
<ul>
<li>Пункт 1</li>
    <ul>
        <li>Пункт 1.1</li>
        <li>Пункт 1.2</li>
    </ul>
<li>Пункт 2</li>
    <ul>
        <li>Пункт 2.1</li>
        <li>Пункт 2.2</li>
    </ul>
</ul>
2) Второй вариант:
<ul>
<li>Пункт 1
    <ul>
        <li>Пункт 1.1</li>
        <li>Пункт 1.2</li>
    </ul>
</li>
<li>Пункт 2
    <ul>
        <li>Пункт 2.1</li>
        <li>Пункт 2.2</li>
    </ul>
</li>
</ul>
В каких из этих двух вариантов код является валидный? В браузере результат одинаковый, но Вот хотелось бы узнать с точки зрения валидности.Какой текст валидный и почему?Заранее благодарю за ответы
6 ответов

pokrovitel

Проверить на валидность можно здесь: http://validator.w3.org/ Сохраняете html-файл и выбираете by File UploadЕстестественно, файл должен быть хранён с доктайпом и прочей разметкой.Ваши примеры невалидны. Не нужно городить список в списке. Если вам нужен дополнительный отступ, задайте дополнительный отступ через CSS: index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
  <li>Пункт 1</li>
  <li class="subItem1">Пункт 1.1</li>
  <li class="subItem1">Пункт 1.2</li>
  <li>Пункт 2</li>
  <li class="subItem1">Пункт 2.1</li>
  <li class="subItem1">Пункт 2.2</li>
  <li class="subItem2">Пункт 2.2.1</li>
  <li class="subItem3">Пункт 2.2.1.1</li>
</ul>
</body> 
</html>
style.css:
.subItem1{
  margin-left: 20px;
}
.subItem2{
  margin-left: 40px;
}
.subItem3{
  margin-left: 60px;
}
Каждому подпункту задаём margin 20px (или сколько душе угодно), под-подподнкту 40px, под-под-подпункту 60px и так до бесконечности.Если захотите и маркеры поменять с кружочков на что-нибудь, то используйте list-style http://htmlbook.ru/css/list-style<- тут вы и многое другое найдёте по HTML и CSS


pokrovitel

Ваши примеры невалидны.
Первый не проходит валидацию, нужно закрывать LI Второй валидный.
Не нужно городить список в списке. Если вам нужен дополнительный отступ, задайте дополнительный отступ через CSS:
Вложенные списки это правильно, и отступы тут не при делах. Вложенность она ради вложенности, а не ради отступов.


pokrovitel

newJS, прав. Х.з. как я проверял, что вчера и на втором варианте выдало ошибку, хотя сам потом пробовал проверять подобный код:
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2
  <ul>
    <li>Пункт 2.1</li>
    <li>Пункт 2.2</li>
    <li>Пункт 2.3
    <ul>
      <li>Пункт 2.3.1</li>
      <li>Пункт 2.3.2</li>
    </ul>
    </li>
  </ul>
  </li>
  <li>Пункт 3</li>
</ul>
И всё было нормально. Первый вариант не проходит потому, что новый вложенный список должен быть внутри пункта главного списка, т.е. внутри тега
  • А браузер отображает оба варианта одинаково, т.к. он исправляет ошибки и, где необходимо, сам "додумывает" теги, которые были пропущены. Например, можно многие парные теги вообще не закрывать, но браузер "закроет" их сам, когда встретит следующий такой тег.


    pokrovitel

    А браузер отображает оба варианта одинаково
    Верить нужно валидатору.
    т.к. он исправляет ошибки и, где необходимо, сам "додумывает" теги
    А стоит ли доверять такую тонкую вещь браузерам? каждый браузер правит ошибки по своему и где гарантия что они все угадают правильно? Валидатор надежней.


    pokrovitel

    Не нужно городить список в списке. Если вам нужен дополнительный отступ, задайте дополнительный отступ через CSS
    плохой совет. чем плох вложенный список?


    pokrovitel

    А стоит ли доверять такую тонкую вещь браузерам? каждый браузер правит ошибки по своему и где гарантия что они все угадают правильно? Валидатор надежней.
    Так я с этим и не спорю. Просто топикстартер писал, что оба варианта отображаются одинаково, я и написал, почему так получается.
    плохой совет. чем плох вложенный список?
    Да ничем, я же ниже привёл и нормальный вариант Просто 1-й раз, когда проверял в валидаторе на сайте w3, мне выдало, что оба варианта не проходят. Неотформатированный текст не стал смотреть, м.б. криво скопировал, и предложил вариант с margin, написав заранее, что это только ради отступов можно сделать так. Затем поразмыслил, написал вариант и с вложенными списками.