Что из этого лучше семантически? - PullRequest
Новая
       23

Что из этого лучше семантически?

0 голосов
/ 20 февраля 2012

Чтобы сделать веб-сайты более доступными, мне рекомендовано использовать теги HTML5 <header>, <footer> и т. Д. ... только для того, чтобы окружать фактический контент, но у меня есть ощущение, что я могу что-то делать не так.

Пример тела: 

<header>
    <div class="center">
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </div>
</header>
<div>
    <section>
        ...
    </section>
</div>
<footer>
    <div class="center">
        ...
    </div>
</footer>

.center {
   max-width: 70em;
   margin: 0 auto;
}

header {
   width: 100%
   background-color: red;
}

footer {
   width: 100%
   background-color: green;
}

body > div {
   width: 100%
   background-color: blue;
}

Это действительно лучше, как это? 

<div id="head">
    <header>
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </header>
</div>
<div>
    <section>
        ...
    </section>
</div>
<div id="foot">
    <footer>
        ...
    </footer>
</div>

Ответы [ 4 ]

1 голос
/ 20 февраля 2012

Что касается того, что лучше - DIV внутри структурных элементов, таких как HEADER / FOOTER или структурных элементов внутри DIV, это не имеет значения, поскольку DIV является общим контейнером без какого-либо семантического смысла вообще.

То, что на самом деле не является семантической / плохой практикой в ​​вашем первом примере, это center имя класса. Имена классов должны отражать назначение блока (content, products и т. Д.), А не его представление (center, red и т. Д.).

0 голосов
/ 20 февраля 2012

Попробуйте 

<section>
  <header> head content </header>
  main content
  <footer> footer content </footer>
</section>

Это избавит вас от всех этих глупых div'ов, и теперь ваш заголовок и нижний колонтитул связаны с вашим разделом, как и должно быть.

0 голосов
/ 20 февраля 2012

Было бы лучше так: 

<header>
    <h1>Title</h1>
    <nav>
        ...
    </nav>
</header>
<section>
    ...
</section>
<footer>
    ...
</footer>

Или, альтернативно: 

<div class="header">
    <h1>Title</h1>
    <div class="nav">
        ...
    </div>
</div>
<div class="section">
    ...
</div>
<div class="footer">
    ...
</div>

Почему вам говорят добавить эти дополнительные элементы оболочки div?

0 голосов
/ 20 февраля 2012

По сути, элементы div не требуются в семантическом смысле (может быть, они вам нужны для стилизации?).

div - это элемент без семантики (как аналог для встроенных элементов span), и вы должны использовать их там, где нет ничего лучше. Даже если вы дадите им некоторую семантику с ее атрибутом id, эта семантика известна только вам, а не, например, любому поисковому движку в Интернете (google) или программе чтения с экрана (например, для слепых), потому что нет никаких определенных соглашений о id или class значениях.

Если вы используете header, footer и т. Д., Вы даете им семантику. Может быть, вы хотите увеличить их семантику, используя некоторое значение для атрибута role .

Кстати, это section, конечно, не нужно. Посмотрите, что люди из HTML5 Doctor говорят :

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

Но с какой стати конкретно это делать? Если вам нужно стилизовать его, используйте div. Вспомогательная технология, как Screenreader может найти основной контент, потому что это первое внутри страницы, которая не является верхним или нижним колонтитулом.

С <div role="main"> у вас есть все, что вам нужно.

...