HTML, заголовки внутри упорядоченных списков

Заголовки внутри упорядоченного списка наследуют заполнение из списка (скриншот). Как предотвратить это?

<h3>Lorem</h3>
<ol>
<li>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie. 
  </p>
</li>

<h3>Ipsum</h3>
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie.</li>
</ol>


html html-lists html-heading
person reti    schedule 08.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

<h3> внутри <ol> является недопустимым HTML. разрешенные теги включают только <li>. (Обратите внимание, например, на то, что ваш первый <h3> оформлен правильно, он находится за пределами <ol>.) Вместо этого структура должна быть примерно такой:

<h3>Lorem</h3>
<ol>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie.</p>
    </li>
</ol>
<h3>Ipsum</h3>
<ol>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie.</p>
    </li>
</ol>

Конечно, это приведет к тому, что ваш второй список снова начнется с 1, что в данном случае нежелательно. Вы можете использовать атрибут start в <ol>, чтобы указать начальный номер, что позволит вам контекстуально продолжить предыдущий список:

<h3>Lorem</h3>
<ol>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie.</p>
    </li>
</ol>
<h3>Ipsum</h3>
<ol start="2">
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum finibus egestas. Proin ac dui commodo, lacinia nisl sit amet, viverra nunc. Vivamus tempor tincidunt odio in semper. Suspendisse potenti. Fusce facilisis metus a ornare porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex metus, consectetur ut est non, congue fringilla nisl. Nullam sagittis felis quis facilisis molestie.</p>
    </li>
</ol>

person David    schedule 08.12.2019
comment
Спасибо чувак. Я знаю это решение. Если я добавлю, например. 5 новых ‹li› в первом ‹ol›, во втором ‹ol› все еще есть команда start=2, и я должен изменить ее вручную. - person reti; 10.12.2019
comment
@reti: если данные загружаются динамически, начальное значение может быть рассчитано динамически. Если данные статические, то начальное значение также является статическим. Так что я не вижу в этом минуса. В чем именно проблема? - person David; 10.12.2019
comment
Прошло много времени с тех пор, как я начал эту тему. Сейчас вопрос для меня уже не актуален, но большое спасибо за ответы. - person reti; 30.12.2019