Примеры: Текст, заголовки, списки и ссылки

Кратко

Рядом с каждым кодом — реальный результат (рендер текста, списков и кликабельных ссылок). Сравнивайте код и «Результат», меняйте значения и проверяйте в браузере.

Рабочие примеры

В каждом примере сверху — реальный результат, снизу — код, который его создаёт.

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

Один h1 на странице, под ним — h2. Размер у заголовков разный по умолчанию, но выбираем мы их по смыслу.

Профиль студента

Я изучаю HTML и собираю первую страницу-резюме.

Обо мне

Люблю разбираться, как устроены сайты.

<h1>Профиль студента</h1>
<p>Я изучаю HTML и собираю первую страницу-резюме.</p>

<h2>Обо мне</h2>
<p>Люблю разбираться, как устроены сайты.</p>

2. Выделения strong, em и перенос br

strong — важность (жирный), em — ударение (курсив), br — перенос строки внутри абзаца.

Дедлайн — сегодня, и это действительно важно.
Следующая строка того же абзаца после <br>.

<p>Дедлайн — <strong>сегодня</strong>, и это
   <em>действительно</em> важно.<br>
   Следующая строка того же абзаца после &lt;br&gt;.</p>

3. Списки: ul, ol и dl

Маркеры и нумерацию рисует браузер автоматически — вручную «1.» писать не нужно.

ul — без порядка
  • HTML
  • CSS
  • Ссылки
ol — по шагам
  1. Создать файл
  2. Написать разметку
  3. Открыть в браузере
dl — термин/описание
href
адрес ссылки
target
где открыть
<ul><li>HTML</li><li>CSS</li><li>Ссылки</li></ul>

<ol><li>Создать файл</li><li>Написать разметку</li></ol>

<dl>
  <dt>href</dt><dd>адрес ссылки</dd>
  <dt>target</dt><dd>где открыть</dd>
</dl>

4. Ссылки: внешняя, e-mail и якорь

Ссылки ниже кликабельны. Внешняя открывается в новой вкладке с rel="noopener noreferrer", mailto открывает почтовый клиент, якорь прыгает к нужному разделу этой страницы.

<a href="https://developer.mozilla.org"
   target="_blank" rel="noopener noreferrer">
  Открыть документацию MDN
</a>

<a href="mailto:anna@example.com">Написать на anna@example.com</a>

<a href="#examples">Вернуться к началу примеров</a>

5. Стилизация ссылок в CSS

HTML отвечает за смысл, CSS — за вид. Здесь меняем цвет и убираем подчёркивание у наведённой ссылки.

a {
  color: #0f766e;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid #0f766e;
}