Теги HTML для текста, ссылок и изображений: практический разбор

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

Зачем вообще понимать эти теги

HTML — это скелет любого сайта. Он не красит кнопки и не двигает блоки, но именно он объясняет браузеру: вот это заголовок, это абзац, а это ссылка на другую страницу. Когда разметка сделана грамотно, вы получаете сразу несколько плюсов. Поисковые системы лучше понимают, о чём страница, и ранжируют её точнее. Пользователям проще читать — особенно если они используют скринридеры. А вам или разработчику, который будет дорабатывать сайт, не придётся гадать, где тут смысловая часть, а где просто декорация. Я не раз переделывал чужие проекты, где весь текст был завёрнут в <div> и <span>, и это превращалось в головную боль. Правильная структура живёт дольше любого дизайна — это факт.

Базовые теги для текста

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

Заголовки: от h1 до h6

Заголовки — это не просто крупный шрифт. Они выстраивают иерархию материала. Представьте оглавление книги: название книги — это <h1>, названия глав — <h2>, параграфы внутри главы — <h3>. В HTML точно так же. Главное правило, которое я всегда повторяю заказчикам: один <h1> на страницу. Это как название всей страницы, и поисковики считывают его в первую очередь. Дальше идут <h2> — основные смысловые блоки. Если внутри блока нужно деление — используйте <h3>. Прыгать через уровень (сразу с <h2> на <h4>) не стоит: это сбивает с толку и людей, и роботов. И ещё: заголовок должен говорить о содержании, а не просто повторять ключевик. Я часто вижу <h1>Купить пластиковые окна дёшево Москва</h1> — это плохо. Лучше «Пластиковые окна: как выбрать и не переплатить».

<h1>Как выбрать домен для сайта</h1>
<h2>Основные критерии</h2>
<h3>Длина и запоминаемость</h3>
<h3>Зона и регистратор</h3>
<h2>Частые ошибки</h2>

На практике в небольших проектах редко уходят глубже <h3>. Если чувствуете, что нужен четвёртый уровень — возможно, стоит разбить раздел на два.

Абзац: p

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

<p>Это абзац с описанием услуги.</p>

Перенос строки: br

<br> — это перенос строки внутри одного логического блока. Не путайте с новым абзацем. Я часто вижу, как начинающие верстальщики нажимают Enter в визуальном редакторе и получают кучу <br>, а потом удивляются, что текст «плывёт». Запомните: для разделения мыслей — <p>, для адреса в одну строку — <br>. Например, в футере сайта:

<p>ИП Иванов,<br>г. Москва, ул. Строителей, 5<br>+7 999 123-45-67</p>

Тут переносы оправданы. А вот делать <br><br> между абзацами — дурной тон.

Сильный и акцентный текст: strong, em

<strong> и <em> — это не просто жирный и курсив. Они передают смысл. <strong> говорит: «вот это ключевая мысль, обрати внимание». <em> — «здесь интонационное ударение, прочти с выражением». Поисковики тоже это считывают. Поэтому не надо оборачивать в <strong> каждое второе слово ради «SEO» — это выглядит как спам. Я обычно использую <strong> для важных условий: «Доставка бесплатно при заказе от 3000 ₽». А <em> — для уточнений: «Цена указана за комплект, а не за штуку». И ещё: не путайте с <b> и <i>, которые только визуальные. Если сомневаетесь, берите <strong> и <em> — они семантически правильнее.

<p>Это <strong>очень важно</strong> для SEO.</p>
<p>Я <em>никогда</em> не использую скрытый текст.</p>

Списки: ul, ol, li

Списки — это спасение, когда нужно перечислить характеристики товара, этапы работы или преимущества. <ul> — маркированный (точки, квадратики), <ol> — нумерованный (1, 2, 3). Внутри каждого — элементы <li>. Я всегда рекомендую: если у вас в тексте идёт перечисление из трёх и более пунктов, оформляйте списком. Так читателю легче пробежать глазами. И не забывайте про вложенность: внутри <li> можно делать подсписки. Например, в карточке товара:

<ul>
  <li>Материал: массив дерева</li>
  <li>Цвета:
    <ul>
      <li>Белый</li>
      <li>Серый</li>
    </ul>
  </li>
</ul>

Нумерованный список удобен, когда важен порядок действий:

<ol>
  <li>Выбрать тариф</li>
  <li>Заполнить форму</li>
  <li>Оплатить</li>
</ol>

Теги для ссылок: как правильно делать переходы

Ссылки превращают набор страниц в сайт. Без них пользователь упрётся в тупик. Но ссылка должна быть не просто кликабельной, а понятной и уместной.

Основной тег ссылки: a

Ссылка — это тег <a> с обязательным атрибутом href. Всё, что между <a> и </a>, становится кликабельным. Но не пишите туда «здесь» или «жми сюда». Представьте, что пользователь видит только эту ссылку без окружающего текста — он должен понять, куда попадёт. Поэтому «Скачать прайс-лист» в сто раз лучше, чем «скачать». Я часто правлю такие ссылки на сайтах заказчиков, и это сразу повышает юзабилити.

<!-- Плохо -->
<a href="/price">тут</a>

<!-- Хорошо -->
<a href="/price">Посмотреть цены</a>

Внешние и внутренние ссылки

Ссылки делятся на внешние (на другие сайты) и внутренние (на страницы вашего же проекта). Внешние обычно открывают с полным адресом: https://.... Внутренние — с относительным путём: /catalog или /contacts. Для маленьких сайтов внутренние ссылки особенно важны: они связывают страницы в единую сеть и помогают посетителю не потеряться. Я всегда советую продумать перелинковку ещё на этапе структуры: из карточки товара — в каталог, из статьи — в другие материалы по теме. Это и для SEO плюс.

Внешние

<a href="https://example.com">Партнёрский сайт</a>

Внутренние

<a href="/about">О компании</a>

Якорные ссылки

Якоря — это ссылки, которые ведут к определённому блоку на той же странице. Делается просто: у нужного блока ставите id="contacts", а ссылка выглядит как <a href="#contacts">Контакты</a>. Клик — и страница плавно прокручивается. Идеально для лендингов с меню, для длинных статей с оглавлением. Только не забывайте, что id должен быть уникальным на странице.

<h2 id="contacts">Контакты</h2>
<a href="#contacts">Перейти к контактам</a>

Атрибут target

target="_blank" заставляет ссылку открываться в новой вкладке. Раньше это использовали для всех внешних ссылок, чтобы не уводить посетителя с сайта. Но сейчас это считается не очень хорошим тоном: пользователь сам решит, как открывать. Я ставлю _blank только там, где это действительно нужно: например, ссылка на документ PDF или на сторонний сервис, где человек должен что-то сделать и вернуться. И обязательно добавляю rel="noopener noreferrer" для безопасности.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Внешний ресурс</a>

Теги для изображений: как вставлять картинки без ошибок

Картинки оживляют сайт, но без правильной разметки они могут навредить. Самое частое, что я вижу у новичков: забытый alt, битые ссылки на изображения и попытки растянуть фото 100×100 пикселей до размеров экрана. Разберёмся, как делать правильно.

Основной тег: img

<img> — одиночный тег, закрывать его не нужно. Внутри обязательно указать src (путь к файлу) и alt (описание). Всё. Никаких <img></img> — это ошибка.

<img src="photo.jpg" alt="Описание фото">

Что значит src

src — это адрес картинки. Может быть относительным (images/cat.jpg) или абсолютным (https://mysite.ru/img/cat.jpg). На своих проектах я всегда использую относительные пути: при переносе сайта на другой домен или в папку ничего не сломается. Абсолютные пути хороши, когда картинка лежит на другом сервере, но тогда вы зависите от его доступности.

<!-- Относительный путь -->
<img src="images/logo.png" alt="Логотип">

<!-- Абсолютный путь -->
<img src="https://site.com/images/logo.png" alt="Логотип">

Почему так важен alt

alt — это не просто строчка для галочки. Представьте, что вы описываете картинку человеку, который её не видит. Именно этот текст услышит пользователь скринридера, и его же увидит поисковик. Если картинка не загрузилась, вместо битой иконки покажется этот текст. Поэтому «Фото товара» — плохо, «Керамическая кружка с логотипом, вид спереди» — хорошо. Я всегда прошу заказчиков давать нормальные описания к товарам, а не «img_0012». Это влияет и на SEO-трафик из поиска по картинкам.

<!-- Хороший alt -->
<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">

<!-- Плохой alt -->
<img src="cat.jpg" alt="image1">

Когда alt можно оставить пустым

Если картинка просто для красоты — разделительная линия, абстрактный фон, иконка-украшение — смело ставьте alt="". Это сигнал скринридеру: «пропусти, тут ничего важного». Но не злоупотребляйте: если иконка телефона рядом с номером — это уже контентная картинка, и alt="Телефон" будет уместен.

<img src="decor-line.png" alt="">

Практическая таблица: какой тег для чего нужен

Чтобы не путаться, держите шпаргалку. Я сам когда-то такую распечатал и повесил над столом.

Как собрать простой текстовый блок с ссылкой и изображением

Давайте соберём типичный фрагмент: заголовок, текст, картинка и ссылка. Вот как это выглядит в коде:

<h1>О студии</h1>
<p>Мы делаем сайты для малого бизнеса с 2015 года.</p>
<img src="team.jpg" alt="Команда студии за работой">
<p>Подробнее — на странице <a href="/services">услуг</a>.</p>

Обратите внимание: ссылка встроена в абзац, а не висит отдельно. Так текст читается естественнее.

Типовые ошибки новичков

1. Один и тот же тег для всего текста

Видел проекты, где вся страница — это <div> внутри <div>, и текст просто лежит без тегов. В итоге ни структуры, ни SEO. Используйте заголовки, абзацы, списки — это как скелет, на который потом наращивается дизайн.

2. Слишком много br

Классика: заказчик в визуальном редакторе жмёт Enter, чтобы отодвинуть текст, и получает десять <br>. Потом при смене темы всё съезжает. Вместо этого — отдельные абзацы и отступы через CSS.

3. Плохие ссылки

«Читать далее» без контекста — бич многих сайтов. Я всегда прошу писать так, чтобы даже вырванная из контекста ссылка была понятна: «Узнать стоимость разработки» или «Скачать коммерческое предложение».

4. Пустой или бессмысленный alt

Часто вижу alt="картинка" или alt="image". Это всё равно что ничего. Либо описывайте, либо оставляйте пустым для декора. И да, alt="фото товара" — тоже плохо, если товаров много, они сольются.

5. Отсутствие структуры заголовков

Бывает, страница начинается с <h1>, а дальше идёт сплошной текст <p>. Глазу не за что зацепиться. Разбивайте на разделы с <h2>, внутри — <h3>. Это как главы в книге.

Чек-лист перед публикацией страницы

Перед тем как показать сайт миру, пробегитесь по этому списку. Я сам до сих пор проверяю эти моменты, когда сдаю проект.

• [ ] На странице есть один понятный h1.
• [ ] Разделы разбиты через h2, при необходимости — через h3.
• [ ] Текст оформлен абзацами через p.
• [ ] Ссылки понятны по смыслу.
• [ ] У картинок заполнен alt, если они не декоративные.
• [ ] Декоративные изображения не мешают восприятию контента.
• [ ] Нет лишних br вместо нормальной структуры.
• [ ] Список шагов оформлен через ol, а перечень — через ul.

Как запомнить назначение этих тегов

Когда я обучаю новичков, даю простое правило: текст — <p>, <strong>, <em>; структура — <h1>–<h6>; переходы — <a>; картинки — <img>; перечисления — <ul>, <ol>, <li>. Если запомнить эту пятёрку, 80% типовой вёрстки уже в кармане.

Вывод

Освоив эти десять тегов, вы уже сможете сверстать осмысленную страницу: лендинг, статью, описание услуги. Не нужно сразу лезть в сложные фреймворки. Главное — понять логику: каждый тег для своего типа контента. Когда вы начнёте видеть за тегами не просто код, а структуру документа, HTML перестанет пугать. Проверено на себе и десятках учеников.

FAQ

Какой тег использовать для обычного текста?

<p>. Это база. Если вы пишете больше одного предложения, оборачивайте в <p>. Текст без тега — как фундамент без бетона.

Можно ли сделать ссылку без href?

Нет. Без href тег <a> не будет выполнять функцию ссылки. Браузер просто проигнорирует клик.

Обязательно ли указывать alt у изображения?

Да, если картинка несёт смысл. Если изображение декоративное, можно указать пустой alt="". Но совсем пропускать атрибут не стоит — это нарушает стандарт.

Сколько заголовков h1 можно использовать на странице?

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

Что лучше: strong или b?

Если нужен смысловой акцент, лучше <strong>. Если требуется только визуальное выделение, иногда используют <b>, но для новичка полезнее сначала привыкнуть к <strong>. Семантика всегда выигрывает у простого украшательства.

Почему не стоит заменять абзацы на br?

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