Является ли использование HTML 5 section id = "contacts" семантически правильным вместо div id = "contacts"?

Question

Является ли использование section id="contacts" семантически правильным вместо div id="contacts "?

На веб-странице мне нужно добавить информацию о нескольких контактах компании. Обычно я использую div id="contacts Но если я хочу использовать тег HTML 5, насколько это возможно, целесообразно использовать section id="contacts" в этом случае.

Или нет смысла использовать здесь элемент Section.

Например, чтобы обернуть несколько адресов, как это

<p>
<b>Address 1:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> (502) 657-6033<br>
<b>Fax: </b>(425) 936-7329<br>
</p>

<p>
<b>Address 2:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> (502) 657-6033<br>
<b>Fax: </b>(425) 936-7329<br>

Answer 1

Элемент адреса не должен использоваться представлять произвольные адреса (например, почтовые адреса), если не адреса на самом деле актуальны контактная информация.

Так что в вашем случае - если я правильно понимаю, что это веб-сайт компании - вы должны использовать <address>.

Answer 2

В HTML5 использование <div> по сравнению с <section> основано на содержимом, которое оно будет содержать.Если контент имеет контекстное отношение к странице, вы должны использовать <section>.Однако, если единственная причина, по которой вы инкапсулируете информацию в теге, заключается в применении стиля с помощью CSS и ничего более, вы должны использовать <div>.

Не запутайтесь здесь;Вы все еще можете применить стиль к <section>.

---

РЕДАКТИРОВАТЬ: Похоже, что <section> против <div>.

существует некоторая путаница

Примечание: элемент section не является общим элементом контейнера.Когда элемент нужен для стилизации или для удобства написания сценариев, авторам рекомендуется использовать вместо этого элемент div.Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет явно указано в схеме документа.

Источник: http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element

---

В вашем случае, вы предоставляете контекстно-релевантную информацию, поэтому вы должны использовать тег <section>.Однако, как указал @Knu, если адрес является релевантной контактной информацией, вы бы фактически обернули адрес в тег <address>.

Вы могли бы сделать что-то вроде этого:

<section id="contact">
    <p>For more information, contact us at one of the following addresses:</p>
    <address>
        <p>9900 Corporate Campus Dr., Suite 3000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> (502) 657-6033<br/><strong>Fax: </strong>(425) 936-7329</p>
    </address>
    <address>
        <p>9910 Corporate Campus Dr., Suite 5000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> (502) 657-6035<br/><strong>Fax: </strong>(425) 936-7339</p>
    </address>
</section>

Один пример использования <div> вместо <section> может быть, если содержимое было контейнером для многих <section>.

<div id="something">
    <section id="one">
        <p>This is some content.</p>
    </section>
    <section id="two">
        <p>This is some other content.</p>
    </section>
</div>

Answer 3

Я согласен с @knu и рекомендую использовать несколько элементов address, так как это не произвольные адреса. Я бы также использовал формат vcard .

Также см. Разметка почтового адреса с помощью HTML .

Answer 4

В этом отношении я бы порекомендовал вам взглянуть на микроданные на schema.org. Вы можете добавить определенные семантические теги для каждой части адреса, вашей компании и всего остального.

Это конкретный пример и учебник о том, как нам использовать микроданные:

http://www.htmlgoodies.com/html5/Web-Developer-Tutorial-HTML5-Microdata-3920016.htm#fbid=7JjItyF1dhi

Это словарь, который вам, вероятно, понадобится:

http://schema.org/Organization http://schema.org/PostalAddress

Answer 5

Вы можете использовать section для переноса нескольких адресов, только если у вас есть заголовок типа «Контактная информация» или что-то подобное.Если у вас нет (естественного) заголовка, то должен использоваться общий элемент уровня блока (div).

Кроме того, каждый адрес может быть заключен в тег address.(Я не слишком уверен в этом, хотя, как мне кажется, address предназначен только для разметки адресов электронной почты)

---

PS: я вижу, что вы неправильно использовали b здесь.Вместо него должно быть span.Кроме того, адрес не является абзацем.Таким образом, p также не следует использовать.