Html 5 Layout

<body>
    <header>
        <nav>
            Navigation
        </nav>
    </header>
    <section>
        <main>
            <article>
                Article
            </article>
            <article>
                Article
            </article>
        </main>
        <aside>
            Aside element
        </aside>
    </section>
    <footer>
        Footer
    </footer>
</body>

Форматирование текста

Текст в HTML обычно помещают в заголовках:

<h1>
 Заголовок первого уровня
</h1>
<h6>
 Заголовок шестого уровня
</h6>

в параграфах:

<p>
 Какая-нибудь статья
</p>
<pre>
 Какая-нибудь статья с сохранением переносов строк и пробелов
</pre>

в цитатах:

<blockquote site="http://twitter.com">
    "Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем
</blockquote>

Строки и ячейки таблицы в Html:

Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> — это контейнер для остальных тегов таблицы.

Тег <tr> образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега <td> (хотя первая может быть задана и тегом <th>).

 <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

RESULT:

Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.

Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.

<table>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

Столбцы таблицы объединяются атрибутом colspan, а строки — атрибутом rowspan.

Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали

Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали

В <thead> для ячеек используют тег <th>. Контент в ячейке th браузер выравнивает по центру, а текст к тому же отображает жирным шрифтом.

 <thead>
            <tr>
                <th>th</th>
                <th colspan="4">th</th>
            </tr>
        </thead>

Подытожим:

Таблица состоит из строк <tr> и ячеек (<td> и <th>). Дочерними элементами строки <tr> могут быть только ячейки, но не наоборот.

За логическое структурирование таблицы, отвечают теги <thead>, <tbody> и <tfoot>. Также они полезны при стилизации секций таблицы.

Внутри <thead> ячееки задают тегом <th> (он семантический), внутри <tfoot> — <td>, а внутри <tbody> допустимы оба.