Плохо ли иметь много вложенных элементов?

Question

<!-- beginning of main-container  -->
<div class="main-container">
  <main>
    <section>
      <h3>Featured Stories</h3>
      <figure>
        <a href="#"><img src="bird-story.jpg" alt="A red-flanked bluetail roosting on the grounds of Library" title="A red-flanked bluetail roosting on the grounds of Library" /></a>
        <footer>
          <a href="#"><h4>Rare bird attracts crowds</h4></a>
          <figcaption>A red&dash;flanked bluetail roosting on the grounds of Library is popular with birders&period;</figcaption>
        </footer>
      </figure>
    </section>
  </main>
</div>
<!-- end of main-header -->

Я читал, что HTML должен быть семантическим, то есть вы должны описывать смысл вашего контента, а не то, как он выглядит.Ребята, вы думаете, я переборщил?Иногда это сбивает меня с толку, когда я пытаюсь стилизовать его.

Answer 1

Наличие слишком большого количества вложенных элементов - это неплохо.Плохо иметь слишком много ненужных элементов.Наличие ненужных элементов увеличит вашу DOM и замедлит процессы манипуляции DOM, если они будут выполнены.

В вашем html,

• Вы можете избавиться от своего раздела *Тег 1008 *, если в main .

• имеется только 1 секция h4 в a неверная семантика HTML (элемент уровня блока внутри элемента inline-block).Если бы он использовался другим способом ( a внутри h4 ) * тег 1023 *

• footer также может быть опущен.Но, опять же, это будет зависеть от того, насколько сильно вы хотите сосредоточиться на figcaption по отношению к SEO.

Нет абсолютно такого правила, все дело в том, чтобы иметьв перспективе при написании HTML.

Answer 2

Цель HTML - отображать данные семантически и осмысленно.Вложенность - это способ описания иерархии между элементами: статья содержит заголовок и несколько абзацев;таблица содержит строки, а строки содержат ячейки;список содержит элементы.

Вы должны создать свой HTML-код таким образом, чтобы он представлял отношения данных и разделов вашего сайта, и избегайте добавления разметки, которая предназначена в основном для стилизации.Пока у каждого вложенного элемента есть значимая причина для вложения, вы можете вкладывать столько, сколько захотите.Спросите себя, имеет ли смысл родительский тег содержать дочерний тег или они должны быть братьями и сестрами.

Answer 3

На самом деле нет ограничений на уровни вложенности тегов, это просто вопрос хорошей практики.Поддержание кода с множеством уровней может оказаться трудным делом в течение всего времени.

Answer 4

Это зависит от того, чего вы хотите достичь.Иногда лучше добавить еще один div, который может сохранить несколько строк кода.Если вы запускаете проект с самого начала, переходите к строке, которую вы начали, когда вы продолжаете, например, проект начальной загрузки, вы должны написать способ, который вы получили.

Answer 5

HTML все, что связано со структурой из того, что я узнал.Может быть, попробуйте сделать интервалы между вашими html, чтобы их было легче читать (поверьте, это сэкономит время в долгосрочной перспективе при поиске мелких ошибок) Попробуйте использовать какой-нибудь текстовый редактор, чтобы идея чистого html в вашу голову всегда помогала,Также не очень понятно, почему у вас есть встроенный тег нижнего колонтитула, этот тег обычно используется для авторских прав и т. Д. Если вы хотите уменьшить размер текста, просто используйте css.Правило большого пальца. CSS внешний вид. HTML-структура.

Просто укажите идентификатор текста, который вы хотите сделать меньше, и измените размер шрифта в вашем CSS позже.Сохраняет использование ненужного тега нижнего колонтитула

<!-- beginning of main-container  -->
<div class="main-container">
  <main>
    <section>

      <h3>Featured Stories</h3>

      <figure>

        <a href="#"><img src="bird-story.jpg" alt="A red-flanked bluetail roosting on the grounds of Library" title="A red-flanked bluetail roosting on the grounds of Library" /></a>
        <a href="#"><h4>Rare bird attracts crowds</h4></a>
        <figcaption id = "Smaller text" >A red&dash;flanked bluetail roosting on the grounds of Library is popular with birders&period;</figcaption>

      </figure>

    </section>

  </main>

</div>
<!-- end of main-header -->