Какие теги HTML5 должен содержать нижний колонтитул из трех разделов - PullRequest
Новая
       12

Какие теги HTML5 должен содержать нижний колонтитул из трех разделов

3 голосов
/ 27 ноября 2011

Я обнаружил, что чем более семантически я делаю свой HTML с использованием новых тегов HTML 5, тем легче оформлять и работать с документом. Я новичок в HTML 5 и только новичок в HTML, но я хочу сделать свой HTML 5 максимально семантически правильным. В настоящее время мой нижний колонтитул HTML 5 разделен следующим образом. 

    <footer>
        <section>
            <h2>Contact</h2>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </section>
        <section>
            <h2>Explore</h2>
            <ul>
                <li><a href="snip">Stack Overflow</a></li>
                <li><a href="snip">LinkedIn</a></li>
                <li><a href="snip">Flickr</a></li>
                <li><a href="snip">Google+</a></li>
            </ul>
        </section>
        <section>
            <h2>About</h2>
            <p>
               snip
            </p>
        </section>
    </footer>

Конкретные теги, которые я запрашиваю, это раздел и использование тега h2. Я думаю, что раздел более семантически верен, чем раздел или статья, поскольку каждый раздел нижнего колонтитула, ну, в общем, раздел. H2 также беспокоит меня. Я хотел бы использовать H1, так как это первый заголовок в разделе, но я боюсь, что паук Google откажется от меня и не даст мне завести друзей, если я использую h1 вместо h2.

Мысли от людей, которые работали с семантикой, очень ценятся.

1 Ответ

3 голосов
/ 27 ноября 2011

Возможно, вы захотите добавить тег address к вашей контактной информации: 

<footer>
    <section>
        <h1>Contact</h1>
        <address>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </address>
    </section>
    <section>
        <h1>Explore</h1>
        <ul>
            <li><a href="snip">Stack Overflow</a></li>
            <li><a href="snip">LinkedIn</a></li>
            <li><a href="snip">Flickr</a></li>
            <li><a href="snip">Google+</a></li>
        </ul>
    </section>
    <section>
        <h1>About</h1>
        <p>
           snip
        </p>
    </section>
</footer>

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

EDIT: Также измените <h2> на <h1>:

Обратите внимание, что использование раздела означает, что автор может использовать элементы h1 повсюду, не беспокоясь о том, находится ли определенный раздел на верхнем уровне, втором уровне, третьем уровне и т. Д.

...