Элементы HTML5 и структурирование / секционирование HTML - PullRequest
Новая
       59

Элементы HTML5 и структурирование / секционирование HTML

0 голосов
/ 16 марта 2019

Я использовал HTML целую вечность, но никогда не смотрел слишком глубоко на новые элементы HTML5 и структурирование / секционирование HTML.Я немного читал MDN и w3s, но все еще в замешательстве.Ниже приведено изображение макета, структура документа раздела тела и некоторые вопросы, которые у меня есть.

enter image description here

<body>
  <header id='header'>
    <h1 id='header-left'>
      <img id='logo' />
    </h1>
    <div id='header-right'>
      <nav id='nav-links-cont'>
        <a class='nav-links' href='' alt=''>FILTER</a>
        <a class='nav-links' href='' alt=''>SELL</a>
        <a class='nav-links' href='' alt=''>FEEDBACK</a>
      </nav>
    </div>
  </header>
  <main id='content'>
    <div id='content-left'>
      <aside id='search-and-filter-pane'></aside>
      <article id='product-info-pane'></article>
      <aside id='transaction-pane'></aside>
    </div>
    <section id='content-right'>
      <article class='grid-item'>
        <h4 class='row item-transaction'></h4>
        <div class='row item-image'></div>
        <h1 class='row item-product'></h1>
        <h2 class='row item-brand'></h2>
        <h3 class='row item-model'></h3>
      </article>
      <article class='grid-item'>
        <div class='row item-transaction'></div>
        <div class='row item-image'></div>
        <div class='row item-product'></div>
        <div class='row item-brand'></div>
        <div class='row item-model'></div>
      </article>
    </section>
  </main>
</body>

  1. Должны ли content-left и content-right вместо section элементов или даже h3 и h4 элементов, а не div элементов?Или content-left и content-right должны быть aside и section элементами соответственно?

  2. Можно ли использовать элементы h1 через h4 в неупорядоченном виде, напримерв элементе content-right article:first-child?

  3. Я знаю, что вы должны избегать использования более одного тега h1, но читайте где-нибудь на MDN, что это допустимо в разныхразделы?Так можно ли повторно использовать h1 через h4 в article элементах?

  4. Правильно ли мое использование aside элементов в content-left?Должны ли элементы content-left aside быть элементами section вместо?

Ответы [ 2 ]

1 голос
/ 20 марта 2019

Если честно: есть пара вещей, которые я бы сделал по-другому ...

По вашим вопросам:

  1. Должны ли content-left и content-right вместо этого быть элементами секции или даже элементами h3 и h4, а не элементами div? Или контент-левый и контент-правый должны быть в стороне и элементы раздела соответственно?

Div-элемент допускает потоковое содержимое, а h * -элементы допускают только phrasing-content. Это единственная причина, по которой они не должны быть h * -элементами.

Вы упомянули, что левый контент содержит важную информацию о выбранном продукте. Мне не имеет смысла включать важную информацию в сторонний элемент.

  1. Можно ли использовать элементы с h1 по h4 неупорядоченно, как в статье о праве на контент: элемент first-child?

Нет. Вы можете сделать это, но я бы не назвал это «хорошо».

  1. Я знаю, что вы должны избегать использования более одного тега h1, но читайте где-нибудь на MDN, что это допустимо в разных разделах?

Что? Возможно, имеет смысл использовать несколько элементов h1 на одной странице.

  1. Так можно ли повторно использовать h1 - h4 в элементах статьи?

Семантически неправильно использовать элементы h * на неправильном уровне вложенности. То есть использовать h1-элементы (один или несколько) на самом высоком уровне, h2-элементы на уровне ниже h1 и т. д. ...

  1. Правильно ли мое использование сторонних элементов в левом контенте? Должны ли элементы content-left aside быть элементами section вместо этого?

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

Вообще говоря: h * -, section, aside, nav и элементы article разделят документ. (Почти) каждый из них создает строку в виртуальной «таблице содержания». То, как вы предлагаете использовать h * -элементы, похоже, не указывает на предполагаемое использование. Прежде чем мы углубимся в элементы section и article: вас интересует содержание вашего html-дерева? Как вы хотите, чтобы эта таблица содержания выглядела?

1 голос
/ 16 марта 2019

Я постараюсь ответить на ваши вопросы, основываясь на моем понимании того, что сказано здесь:

Следует content-left и content-rightвместо элементов section или даже элементов h3 и h4 вместо div элементов?Или content-left и content-right должны быть aside и section элементами соответственно?

И content-left, и content-right могут быть section.Согласно ссылкам выше, элемент a section представляет общий раздел документа ... и тематическую группировку содержимого. И далее приводятся примеры. Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации.Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.

Однако ни они не могут быть h3 или h4, поскольку оба содержат article элемент, который не считается формулирующим контентом .

Теперь они также могут быть aside, если их содержимое имеет тангенциальное отношение к содержимомуродителя , который в данном случае является main#content ... aside можно считать отдельным от родителя , хотя и связанного с ним.

Можно ли использовать элементы h1 через h4 в неупорядоченном порядке, как в элементе content-right article:first-child?

Удивительно, но это нормально в соответствии с HTMLУровень жизни - заголовки и разделы , в которых говорится:

Последующие заголовки равны или выше ранга начинают новые (подразумеваемые) разделы, заголовки более низкого ранга начинают подразумеваемые подразделыявляются частью предыдущего.В обоих случаях элемент представляет заголовок подразумеваемого раздела. (выделение добавлено)

Я знаю, что вы должны избегать использования более одного тега h1, но читать где-нибудьна МДН что это приемлемо в разных разделах?Так можно ли повторно использовать h1 thru h4 в элементах статьи?

Это похоже на ваш предыдущий вопрос.Ссылка, которую я привел, на самом деле повторно использует h1 в элементах section в том же элементе body.

В некоторых случаях это на самом деле легче поддерживать, особенно если section имеет тенденцию сильно перемещаться во время редактирования.

Является ли мое использование сторонних элементов в левом содержимомправильный?Должны ли элементы содержимого, оставленные в стороне, вместо этого быть элементами раздела?

Технически, это правильно.Допускается aside, когда ожидается содержание потока .

Но выбор между тем, чтобы сделать их aside или section, будет зависеть от того, что их контент фактически выполняет в отношении section, к которому они принадлежат.aside более конкретен в своем назначении.

...