Текст, списки и таблицы

Представь учебник без заголовков, списков и таблиц — просто бесконечная стена текста. Ты запутаешься через минуту. В вебе то же самое: хорошая структура помогает и людям, и поисковым системам понять страницу. В этом уроке ты изучишь элементы, которые наводят порядок в тексте.

Заголовки и абзацы

В HTML шесть уровней заголовков: <h1> — самый важный, <h6> — наименее важный. <h1> — главный заголовок страницы, и обычно он встречается на ней один раз. Разделы получают <h2>, их подразделы — <h3>. Обычный текст делится на абзацы — элементы <p>.

Обрати внимание: браузер не учитывает лишние пробелы и переносы строк в коде — десять пробелов отображаются как один, а Enter не создаёт новую строку. Для новой строки внутри абзаца используй <br>, а для горизонтальной линии при смене темы — <hr>.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; color: #1e293b; }
  h1 { color: #0f766e; }
</style>

<h1>Visiting Baku</h1>
<p>Baku is the capital of Azerbaijan, on the shore of the Caspian Sea.</p>

<h2>Old City</h2>
<p>Narrow streets     and
   old stone houses.</p>

<h2>Seaside Boulevard</h2>
<p>A long park by the sea.<br>Perfect for an evening walk.</p>
<hr>
<h3>Tip</h3>
<p>Bring a light jacket: it is often windy.</p>

Выделение в тексте

Иногда отдельные слова нужно выделить. Для этого есть строчные элементы — они не начинаются с новой строки, а остаются внутри текста:

Есть ещё теги <b> и <i>, но они меняют только внешний вид. А <strong> и <em> несут ещё и смысл: скринридер может прочитать такие слова с другой интонацией. Поэтому, когда важен смысл, выбирай <strong> и <em>.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.6; }
</style>

<p><strong>Warning:</strong> the museum is closed on Mondays.</p>
<p>I <em>really</em> want to see the Maiden Tower.</p>
<p>Chapter 3 is <mark>important for the exam</mark>.</p>
<p>Water is H<sub>2</sub>O, and 3<sup>2</sup> = 9.</p>
<p><small>Prices may change without notice.</small></p>

Списки

Для пунктов, порядок которых не важен, используют маркированный список <ul> (unordered list), а когда порядок важен — шаги, рейтинги — нумерованный список <ol> (ordered list). Каждый пункт — это элемент <li> (list item). Непосредственно внутри <ul> и <ol> могут находиться только <li>, а вложенный список пишут внутри <li>.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  h3 { color: #7c3aed; margin-bottom: 4px; }
</style>

<h3>Shopping list</h3>
<ul>
  <li>Bread</li>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pomegranates</li>
    </ul>
  </li>
  <li>Tea</li>
</ul>

<h3>Making tea</h3>
<ol>
  <li>Boil the water.</li>
  <li>Warm the teapot.</li>
  <li>Add the tea and wait 5 minutes.</li>
</ol>

Таблицы

Таблицы предназначены для табличных данных — сведений, которые располагаются по строкам и столбцам, например расписание уроков или результаты экзаменов. <table> охватывает всю таблицу, <tr> (table row) — строку, <td> (table data) — обычную ячейку, а <th> (table header) — ячейку заголовка. <caption> задаёт название таблицы, а <thead> и <tbody> группируют строки заголовка и основные строки.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  table { border-collapse: collapse; }
  th, td { border: 1px solid #cbd5e1; padding: 6px 12px; }
  th { background: #e0e7ff; }
  caption { font-weight: bold; margin-bottom: 6px; }
</style>

<table>
  <caption>Class timetable</caption>
  <thead>
    <tr><th>Time</th><th>Monday</th><th>Tuesday</th></tr>
  </thead>
  <tbody>
    <tr><td>09:00</td><td>Math</td><td>Physics</td></tr>
    <tr><td>10:00</td><td>History</td><td>Math</td></tr>
    <tr><td>11:00</td><td colspan="2">Sports day</td></tr>
  </tbody>
</table>

colspan объединяет ячейки по горизонтали, а rowspan — по вертикали. <th scope="col"> сообщает скринридеру, что заголовок относится ко всему столбцу, а scope="row" — что к строке.