Основные HTML-теги: текст, ссылки, списки и изображения

Большинство страниц собирается из небольшого набора тегов. Важно не зазубрить «все теги W3C», а понимать, какой тег несёт какой смысл.

Текст и заголовки

Заголовки h1–h6 задают иерархию. На странице обычно один h1. Абзацы — p. Для сильного и логического акцента — strong и em (не путайте с «просто жирным» из декоративных целей — для вида есть CSS).

Ссылки и списки

Ссылка a href ведёт на URL или якорь. Списки ul/ol с пунктами li помогают сканировать содержание. Внутренние учебные ссылки уже на портале выглядят так: курс HTML.

Изображения

Тег img требует src и осмысленный alt — и для доступности, и для SEO. Размеры лучше контролировать стилями, а не устаревшими атрибутами без необходимости.

Следующий урок — структура страницы.

HTML

<article>
  <h1>Заголовок статьи</h1>
  <p>Короткий вводный <strong>абзац</strong> с <em>акцентом</em>.</p>
  <ul>
    <li>Первый пункт</li>
    <li><a href="/programming/html">Ссылка на курс HTML</a></li>
  </ul>
  <p><img src="/media/demo.jpg" alt="Демонстрационное изображение макета"></p>
</article>

Практическое задание

Задание: сверстайте карточку статьи без CSS-фреймворков.

Один h1, два абзаца, маркированный список из 3 пунктов
Как минимум одна внутренняя ссылка
Одно изображение с осмысленным alt
Нет «голого» текста вне тегов в body