Использую ли я правильные теги HTML5 для общего макета сайта?

Question

Я пытаюсь понять элементы HTML5. У меня есть базовый HTML-макет, ниже которого я хочу перейти на HTML5-макет. Пожалуйста, посмотрите на это и дайте мне знать, правильно ли я его использую. Я не уверен, правильно ли я использую <section> и <article>.

HTML:

<div id = "wrapper" >

<div id = "left" >
    <div class = "left-box"> ...    </div>
    <div class = "left-box"> ...    </div>
</div>

<div id = "center" >
    <div class = "center-box"> ...  </div>
    <div class = "center-box"> ...  </div>
</div>

<div id = "right">
    <div class = "right-box"> ...   </div>
    <div class = "right-box"> ...   </div>
</div>

</div>

HTML5:

<aside id="left">
    <article class="left-box"> ... </article>
    <article class="left-box"> ... </article>
</aside>

<section id="center">           
    <article class="center-box"> ... </article>  
    <article class="center-box"> ... </article>
</section>

<aside id="right">
    <article class="right-box"> ... </article>
    <article class="right-box"> ... </article>
</aside>

PS. Как я использую div <wrapper>, чтобы обернуть все, как я использую это в html5? Спасибо

Answer 1

HTML5:

<section id="wrapper">
    <aside id="left">
        <article class="left-box"> ... </article>
        <article class="left-box"> ... </article>
    </aside>

    <section id="center">           
        <article class="center-box"> ... </article>  
        <article class="center-box"> ... </article>
    </section>

    <aside id="right">
        <article class="right-box"> ... </article>
        <article class="right-box"> ... </article>
    </aside>
</section>

Это нормально. Помните, что элементы html5 являются просто семантическими, это означает, что они должны сказать свое значение. У вас есть раздел с этим разделом слева и справа между разделом с f.e. содержание контента. Это действительно не так уж много различий.

Вместо установки оболочки вы можете также применить эти стили непосредственно к «телу», но я бы не рекомендовал это на данный момент (старые браузеры могут создавать некоторые проблемы). Также имейте в виду, что старые браузеры, вероятно, не распознают эти теги раздела.

Статья используется для ... ну ... статей. Поэтому я не знаю, что вы пытаетесь добавить в эти центральные блоки, но используйте раздел, если они не являются статьями. Это все во имя ... например когда у вас есть адресные данные, вы используете адрес-тег.

Answer 2

Трудно сказать, семантически ли это правильно или нет, поскольку мы не знаем, каково содержание элементов aside, section и article.Эти (и другие) элементы должны использоваться семантически, поэтому содержимое является ключевым.