Текст не разрешен в элементе ul в этом контексте с использованием класса после тега ul

Question

<div class="tm-gallery-header">
                <h2 class="tm-mb-1 text-center">The Gallery Section</h2>
                <ul class="tm-gallery-filter tabs clearfix filters-button-group">
                    <li><a role="button" href="#" class="active" data-filter="*">Show All</a></li>
                    . <li><a role="button" href="#" data-filter=".nature">Nature</a></li>
                    . <li><a role="button" href="#" data-filter=".campus">Campus</a></li>
                    . <li><a role="button" href="#" data-filter=".people">People</a></li>
                </ul>
</div>

Запустив его в валидаторе, он выдает ошибку: «Текст не разрешен в элементе ul в этом контексте».

Проблема в том, что класс tm-gallery-filter tabs clearfix filters-button-group дает мне анимацию. Так что у меня использовать это. Помогите мне найти способ обойти эту ошибку.

Answer 1

Проблема в классе

Нет, это не так. Проблема заключается в тексте элемента <ul>. Которая может содержать только элементы <li>, <script> или <template> . Убрать поручение ". " символы:

<ul class="tm-gallery-filter tabs clearfix filters-button-group">
  <li><a role="button" href="#" class="active" data-filter="*">Show All</a></li>
  <li><a role="button" href="#" data-filter=".nature">Nature</a></li>
  <li><a role="button" href="#" data-filter=".campus">Campus</a></li>
  <li><a role="button" href="#" data-filter=".people">People</a></li>
</ul>

Answer 2

Если ваш HTML код в точности такой, как в вашем вопросе, сообщение об ошибке, вероятно, относится к "." символы перед элементами li - технически это текст внутри элемента ul (а не в его дочерних элементах) ...