Основные элементы и теги HTML — бесплатный онлайн-учебник

HTML — это язык разметки: вы оборачиваете содержимое в теги (элементы), которые сообщают браузеру, что означает каждая часть контента — это заголовок, это абзац, это ссылка. Без разметки браузер видел бы лишь стену текста без какой-либо структуры. Понимание базовых тегов — это основа всего остального в HTML.

Вот элементы, которые вы будете использовать чаще всего практически на каждой странице:

теги заголовков <h1>-<h6>,
тег <p> (абзац),
тег <img> (изображение),
тег <a> (якорь/ссылка),
тег <button>,
теги списков <ul>, <ol> и <li>,
тег <hr> (горизонтальная линия).

На этой странице каждый из них рассматривается отдельно: объясняется, зачем он нужен, и приводится редактируемый рабочий пример.

HTML-документы

Каждая HTML-страница имеет одну и ту же шаблонную структуру. Части, описанные ниже, присутствуют во всех примерах на этой странице, поэтому стоит разобраться, для чего каждая из них нужна:

<!DOCTYPE html> должен быть самой первой строкой. Это не тег, а объявление, сообщающее браузеру использовать современный режим стандартов (HTML5). Если его опустить, браузеры переключатся в старый «режим совместимости», при котором страницы отображаются непоследовательно.
Весь документ обёрнут в элемент <html>: он начинается с <html> и заканчивается </html>. Это корневой элемент.
Раздел <head> содержит информацию о странице, которая не отображается в теле страницы — например, <title>, задающий текст во вкладке браузера и используемый поисковыми системами.
Видимое содержимое страницы располагается между <body> и </body>. Всё, что видит пользователь — заголовки, абзацы, изображения, ссылки — размещается здесь.

Пример HTML-документа:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>

Попробуйте сами »

Заголовки HTML

Заголовки задают структуру страницы. Существует шесть уровней HTML-заголовков: от <h1> (наиболее важный) до <h6> (наименее важный). Используйте <h1> для главного названия страницы, <h2> — для основных разделов, <h3> — для подразделов и так далее — как оглавление.

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

Пример заголовков HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

Попробуйте сами »

Абзацы HTML

Элемент <p> группирует текст в абзацы. Браузеры автоматически добавляют отступы сверху и снизу каждого абзаца, поэтому вам не нужно самостоятельно добавлять пустые строки — лишние пробелы и переносы строк в исходном коде сжимаются в один пробел. Оборачивая текст в <p>, вы говорите браузеру: «это один блок связного текста».

Пример абзацев HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>

Попробуйте сами »

Изображения HTML

Тег <img> встраивает изображение на страницу. Это пустой элемент (без закрывающего тега), который полностью управляется своими атрибутами:

src — путь или URL файла изображения для отображения. Без него ничего не покажется.
alt — альтернативный текст (см. ниже).
width / height — размер изображения в пикселях. Их указание резервирует место, чтобы макет не смещался во время загрузки изображения.

Почему атрибут alt важен

Атрибут alt содержит краткое текстовое описание изображения. Он обязателен, поскольку выполняет несколько важных функций:

Программы чтения с экрана зачитывают текст alt вслух, поэтому люди, которые не могут видеть изображение, всё равно понимают его содержание — это необходимо для доступности.
Если изображение не загружается, браузер показывает вместо него текст alt.
Поисковые системы используют его, чтобы понять, что изображено на картинке.

Хороший alt-текст описывает содержание или назначение изображения в нескольких словах, как если бы вы описывали его кому-то по телефону. Например, вместо alt="Aleq" (что ничего не говорит тому, кто не знает, кто такой «Aleq») лучше написать что-то вроде alt="Portrait of a smiling man wearing glasses". Если изображение носит чисто декоративный характер и не несёт никакой информации, используйте пустой alt="", чтобы программы чтения с экрана пропускали его.

Пример изображений HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>

Попробуйте сами »

Ссылки HTML

Ссылки превращают отдельные страницы в связанный веб — они позволяют пользователям переходить с одной страницы на другую. Ссылка создаётся с помощью тега <a> (якорь), которым оборачивается текст или изображение, долженствующее быть кликабельным.

Адрес назначения задаётся атрибутом href (сокращение от hypertext reference). Это адрес, на который браузер переходит при нажатии на ссылку — абсолютный URL вида https://www.w3docs.com/ или путь на вашем собственном сайте вроде /learn-html/html-links. Без href элемент <a> — просто текст, который ничего не делает.

Пример ссылок HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Попробуйте сами »

Кнопки HTML

Тег <button> создаёт кликабельную кнопку, которую пользователь может нажать для выполнения действия — отправки формы, открытия меню или запуска JavaScript.

У кнопки есть атрибут type. Указывать type="button" — хорошая привычка, когда кнопка не предназначена для отправки формы: по умолчанию <button> внутри <form> имеет тип type="submit", поэтому если не указать тип, форма может неожиданно отправиться (и страница перезагрузится). Использование type="button" делает кнопку бездействующей до тех пор, пока вы не привяжете к ней поведение, что предотвращает случайную отправку.

Пример тега HTML `<button>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>

Попробуйте сами »

Списки HTML

Списки группируют связанные элементы вместе. Используйте тег <ul> для неупорядоченного списка (маркированные элементы, где порядок не важен) или тег <ol> для упорядоченного списка (нумерованные элементы, где последовательность важна, например шаги рецепта). Внутри любого из них каждый пункт оборачивается тегом <li> (элемент списка).

Пример списков HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>

Попробуйте сами »

Горизонтальные линии HTML

Тег HTML <hr> представляет тематический разрыв между содержимым уровня абзаца — например, переход к новой теме внутри раздела или смену сцены в рассказе. В HTML5 это семантический элемент, а не просто декоративная линия: он сообщает, что содержимое до и после него посвящено разным вещам. Браузеры обычно отображают его как горизонтальную линию, но это лишь его внешний вид по умолчанию. Это пустой тег, поэтому у него нет закрывающего тега.

Пример тега HTML `<hr>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>

Попробуйте сами »

Практика

Какие утверждения об основных элементах HTML верны?

У большинства элементов есть открывающий и закрывающий теги (как у p), но пустые элементы — такие как img, hr и br — закрывающего тега не имеют.Атрибут alt элемента img предоставляет альтернативный текст для программ чтения с экрана и на случай, если изображение не загрузится.Атрибут href элемента a задаёт адрес назначения, на который указывает ссылка.Уровни заголовков от h1 до h6 существуют только для того, чтобы делать текст крупнее или мельче, и не несут никакого смысла.Элемент ul создаёт нумерованный упорядоченный список.

Итоги

Базовые HTML-теги, рассмотренные здесь, являются строительными блоками практически каждой веб-страницы:

Скелет документа — <!DOCTYPE html>, <html>, <head> с <title> и видимый <body>.
Текстовая структура — заголовки <h1>–<h6> и абзацы <p>.
Медиа и навигация — изображения <img> (всегда с осмысленным текстом alt) и ссылки <a> (с href).
Взаимодействие и группировка — кнопки <button>, неупорядоченные и упорядоченные списки, а также тематический разрыв <hr>.

HTML-документы

Пример HTML-документа:

Заголовки HTML

Пример заголовков HTML:

Абзацы HTML

Пример абзацев HTML:

Изображения HTML

Почему атрибут alt важен

Пример изображений HTML:

Ссылки HTML

Пример ссылок HTML:

Кнопки HTML

Пример тега HTML <button>:

Списки HTML

Пример списков HTML:

Горизонтальные линии HTML

Пример тега HTML <hr>:

Практика

Итоги

Пример тега HTML `<button>`:

Пример тега HTML `<hr>`: