Общая разметка/структура страниц.

Больше, об этом, читайте в статье Именование классов.

Элементы на которых можно использовать id:

  • элементы для JavaScript имплементации;

  • элементы форм, которые связаны с соответствующими label через for/id. ***

Страница с основной колонкой и боковой уникальной колонкой.

<div class="wrapper">

    <header class="header"></header>

    <main class="main role="main">
        <section class="content"></section>
        <div class="sidebar"></div>
    </main>

    <footer class="footer"></footer>

</div>

Страница с основной колонкой, боковой уникальной колонкой и одной дополнительной колонкой.

<div class="wrapper">

    <header class="header"></header>

    <main class="main">

        <div class="twocolumns">
            <section class="content"></section>
            <div class="aside"></div>
        </div>
        <div class="sidebar"></div>

    </main>

    <footer class="footer"></footer>

</div>

Страница с основной колонкой и двумя дополнительными колонками.

<div class="wrapper">

    <header class="header"></header>

    <main class="main">

        <div class="twocolumns">
            <section class="content"></section>
            <div class="aside"></div>
        </div>
        <div class="aside aside-2"></div>

    </main>

    <footer class="footer"></footer>

</div>

Страница типа LandingPage.

<div class="wrapper">

    <nav class="nav">_</nav>

    <header class="section">_</header>

    <section class="section">_</section>
    <section class="section">_</section>
    <section class="section">_</section>

    <footer class="footer">...</footer>

</div>
PreviousАдаптивная версткаNextОсновные элементы веб-страницы и их реализации.

Last updated