Нужны ли мне все эти теги HTML5 для основного заголовка моего сайта? - PullRequest
4 голосов
/ 17 июля 2011

Я начал изучать html / css, и на протяжении всего обучения я видел, что идея семантики сильно подчеркивается.Большую часть времени я понимаю, что я должен использовать, и все работает отлично.Но часто бывает так, что кажется, что слишком много тегов для чего-то простого, например:

Предположим, у меня есть главный заголовок на моем сайте с некоторыми ссылками для навигации.*

<section id="masterHeader">
    <header>
        <nav>
            <ul>
                <li><a href="#"> link </a></li>
            </ul>
        </nav>
     </header>
</section>

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

Ответы [ 2 ]

5 голосов
/ 17 июля 2011

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

Проблема в том, что IE8 и ниже не поддерживают эти семантические элементы и поэтому требуют js shiv.Но тогда ваш макет ломается в IE8 и ниже, если у них отключен JS.Это компромисс, который вам придется серьезно взвесить, прежде чем вы решите использовать элементы HTML5, так как ваш макет сломается в IE8-6 без no-js.

Кроме того, я бы сказал, что элемент section не является семантически правильным вваше использование здесь (но я могу ошибаться, мне придется проверить спецификации w3c).Но это ни здесь, ни там, и в основном это просто придирки.

3 голосов
/ 17 июля 2011

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

<header id="masterHeader">
    <nav>
        <ul>
            <li><a href="#"></a></li>
        </ul>
    <nav>
</header>
...