Знакомство с HTML

Текстовый абзац

Текстовый абзац создаётся через тег p. Отступы добавляются автоматически для абзацев.

Если есть необходимость выделить какой-то участок текста, НЕ НАДО писать его в ВЕРХНЕМ РЕГИСТРЕ. Для этого можно использовать теги b (жирное начертание текста), i (курсивное начертание текста) или div.alert (alert).

<p>1 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>2 Lorem ipsum, dolor sit <b>amet consectetur</b> adipisicing elit.</p>
<p>3 Lorem ipsum, dolor sit <i>amet consectetur</i> adipisicing elit.</p>

<div class="alert alert-soft-primary px-4">Primary alert</div>
<div class="alert alert-soft-secondary px-4">Secondary alert</div>
<div class="alert alert-soft-info px-4">Info alert</div>
<div class="alert alert-soft-danger px-4">Danger alert</div>

Списки

Для создания списков необходимо использовать теги ol > li (нумерованный список) или ul > li (маркированный список). Тег li определяет отдельный элемент списка.

<ul>
  <li>Это</li>
  <li>нумерованный</li>
  <li>список</li>
</ul>
<ol>
  <li>Это</li>
  <li>маркированный</li>
  <li>список</li>
</ol>

Заголовки

Для заголовков подойдут теги h3 и h4. Не надо использовать заголовки h1 и h2. Лучше не использовать верхний регистр в заголовках.

<h3>h3 заголовок побольше</h3>
<h4>h4 заголовок поменьше</h4>

Таблицы

Элемент table служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов tr и td. Тег th предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Не надо использовать теги h1, h2, h3, h4 внутри тега th. Тег th должен размещаться внутри контейнера tr, который в свою очередь располагается внутри тега table. Нет необходимости вставлять тег p (текстовый абзац) внутри тегов td и th.

<table>
  <tr>
    <th>#</th>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Элемент 1</td>
    <td>Элемент 2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Элемент 1</td>
    <td>Элемент 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Элемент 1</td>
    <td>Элемент 2</td>
  </tr>
</table>