Тег статьи семантики HTML5 для основного содержимого

ProgramBox

Тег статьи семантики HTML5 для основного содержимого

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#html #semantics #article

#HTML #семантика #Статья

Вопрос:

Семантика: вы хотите разобраться в них правильно, но иногда они просто сбивают с толку.

Структура документа веб-сайта:

 <body>
    <header>
    <div id="main">
        <header> (not on every page)
        <div id="content">
        <footer> (not on every page)
    <aside>
    <footer>

Семантически правильно ли заменять div#main тегом article?

Ответ №1:

Чтобы поднять мертвых на этот вопрос, принятый в настоящее время ответ скоро будет неправильным. Подготовлен проект расширения для <main> элемента, предназначенного именно для того, что вам нужно. Кроме того, он автоматизирует ARIA role="main" в браузере для улучшения доступности. Пожалуйста, смотрите эту ссылку для получения дополнительной информации: https://dvcs.w3.org/hg/html-extensions/raw-file/tip/maincontent/index.html

Эта спецификация является расширением спецификации HTML5 [HTML5]. Он определяет элемент, который будет использоваться для идентификации области основного содержимого документа. Все нормативное содержимое спецификации HTML5, если оно специально не переопределено этой спецификацией, предназначено для того, чтобы быть основой для этой спецификации.

Элемент main формализует обычную практику идентификации раздела основного содержимого документа с использованием значений id, таких как ‘content’ и ‘main’. Он также определяет HTML-элемент, который воплощает семантику и функцию WAI-ARIA [ARIA] landmark role=main.

 <main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

Ответ №2:

Согласно http://html5doctor.com/the-article-element / это допустимый семантический способ кодирования. Он называется «В стиле блога <article> «.

В зависимости от вашей структуры вы могли бы также заменить #content на article.

Не забудьте включить http://code.google.com/p/html5shiv и пока вы этим занимаетесь, если вы обслуживаете свой сайт через https, также посмотрите на относительный URL протокола (его можно найти в Google), чтобы вам не приходилось обнаруживать переключение между http и https.

1. Спасибо! HTML5 Shiv уже включен. Чтобы было понятно, использование элемента article семантически корректно, когда его содержимое имеет смысл само по себе?

2. Согласно HTML5Doctor: «Элемент <article> является специализированным видом <section>; он имеет более конкретное семантическое значение, чем <section>, поскольку он является независимым, автономным блоком связанного содержимого. Мы могли бы использовать <section>, но использование <article> придает содержимому больше семантического значения «. — так что я бы сказал «да»! 🙂

Ответ №3:

Я думаю, было бы более уместно заменить его <section> тегом. <article> Тег предназначен для таких материалов, как сообщения в блогах, на форумах или газетные статьи (отсюда и название тега).

В отличие от этого, <section> тег предназначен для более общих частей содержимого в вашем документе и, следовательно, лучше подходит в данном случае.

Это все гораздо лучше объяснен Марком Пилгримом в DiveIntoHTML5.ep.io

1. Элемент article может легко выделяться сам по себе, но разве элемент section не лучше всего дополнять другими элементами section?

2. Возможно, но, насколько я понимаю вашу структуру, у вас есть другой тег, div с идентификатором содержимого, поэтому я предполагаю, что именно там <article> тег более подходит и для охватывающего элемента a <section> более подходит.

3. article в section a, вероятно, не то, что вы хотите здесь, это создало бы неправильный контур. здесь было бы уместно использовать только article . его использование в контенте, который можно описать термином «статья», не ограничено. имя элемента не должно быть прочитано / понято таким образом.

4. <article> Элемент определяет область, которая может быть отдельной, <section> элемент определяет тематический разрыв.