Основные теги HTML: быстро, просто и по делу
HTML – это скелет любого сайта. Без него в браузере не было бы ни текста, ни картинок, ни кнопок, вообще ничего. Поэтому, если ты хочешь научиться верстать, начнем с самого важного – основных тегов HTML.
Работа с текстом и форматированием
Каждый сайт состоит из текста: заголовки, абзацы, списки – все это нужно правильно оформлять. Давай разбираться.
Заголовки (<h1> - <h6>)
Что это?
Заголовки – это структурные элементы, которые помогают пользователю понять, о чем идет речь в разделе страницы. Они также важны для SEO, потому что поисковики анализируют их, чтобы понять содержание страницы.
Как работают заголовки?
HTML предлагает 6 уровней заголовков:
- <h1> – главный заголовок страницы (используется только один раз).
- <h2> - <h6> – подзаголовки, которые создают иерархию внутри страницы.
Пример кода:
<h1>Заголовок первого уровня (главный заголовок)</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>Результат:
Заголовок первого уровня (главный заголовок)
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Как браузер отображает заголовки?
Браузер автоматически задаёт разный размер шрифта:
- <h1> – самый крупный
- <h6> – самый маленький
Когда использовать?
- <h1> – название страницы или статьи.
- <h2> – основные разделы внутри страницы.
- <h3> - <h6> – подразделы и подзаголовки.
Важно!
- Не пропускай уровни (например, не ставь <h3> сразу после <h1>, не имея <h2>).
- Используй только один <h1> на странице – это важно для SEO.
Абзацы (<p>)
Что это?
Тег <p> используется для создания абзацев. Каждый абзац автоматически получает отступ сверху и снизу, что делает текст удобочитаемым.
Пример кода:
<p>Это первый абзац. Он отделён от других абзацев.</p>
<p>А это второй абзац. Благодаря отступам текст не сливается в одну простыню.</p>Как браузер отображает абзацы?
Браузер автоматически добавляет отступы между абзацами, так что не нужно вручную вставлять пустые строки.
Советы:
- Не используй <br> для разбиения текста на абзацы – лучше правильно структурируй <p>.
- Каждый отдельный смысловой блок – это отдельный абзац.
Жирный и курсив (<strong>, <em>)
Иногда нужно выделить важные части текста. Для этого есть два основных тега:
- <strong> – выделяет текст жирным (используется для действительно важной информации).
- <em> – делает текст курсивным (подчеркивает, что слово имеет особое значение).
Пример кода:
<p><strong>Внимание!</strong> Это важная информация.</p>
<p><em>Этот текст выделен курсивом</em>, чтобы показать его особое значение.</p>Разница между <b>/<i> и <strong>/<em>
Раньше использовались <b> (bold) и <i> (italic), но они просто меняют стиль.
<strong> и <em> имеют смысловую нагрузку: поисковики и голосовые помощники понимают, что текст выделен не просто для красоты, а потому что он важен.
Списки: <ul>, <ol>, <li>
Списки помогают упорядочить информацию. Есть два вида списков:
- Маркированные (<ul>, unordered list) – кружочки, квадратики.
- Нумерованные (<ol>, ordered list) – числа, римские цифры.
Маркированный список <ul>
Используется, когда порядок пунктов не важен.
Пример:
<h3>Что взять в путешествие:</h3>
<ul>
<li>Зарядное устройство</li>
<li>Документы</li>
<li>Карту или навигатор</li>
</ul>Как это выглядит в браузере?
- Зарядное устройство
- Документы
- Карту или навигатор
Нумерованный список <ol>
Используется, когда важен порядок действий (например, инструкция).
Пример:
<h3>Как приготовить чай:</h3>
<ol>
<li>Вскипятить воду</li>
<li>Положить чайный пакетик в кружку</li>
<li>Залить кипятком</li>
<li>Подождать 5 минут</li>
</ol>Как это выглядит в браузере?
- Вскипятить воду
- Положить чайный пакетик в кружку
- Залить кипятком
- Подождать 5 минут
Можно вложить один список в другой
Иногда нужно сделать списки с подкатегориями:
Пример:
<h3>Как приготовить пиццу:</h3>
<ol>
<li>Подготовка ингредиентов
<ul>
<li>Тесто</li>
<li>Соус</li>
<li>Начинка</li>
</ul>
</li>
<li>Собрать пиццу</li>
<li>Выпекать 15 минут при 200°C</li>
</ol>Как это выглядит в браузере?
Как приготовить пиццу:
- Подготовка ингредиентов
- Тесто
- Соус
- Начинка
- Собрать пиццу
- Выпекать 15 минут при 200°C
Дополнительные полезные теги для форматирования текста
Горизонтальная линия <hr>
Добавляет разделитель между блоками текста.
Пример:
<p>Это первый блок текста.</p>
<hr>
<p>А это второй блок, отделённый линией.</p>Перенос строки <br>
Используется, если нужно принудительно перейти на новую строку.
Пример:
<p>Привет!<br>Как твои дела?</p>Результат:
Привет!
Как твои дела?
Но лучше использовать <p> вместо <br>, если речь идет о разделении смысловых частей.
Вставка ссылок и изображений
Ссылки в HTML
Ссылки – это интерактивные элементы, которые позволяют пользователям переходить на другие страницы, загружать файлы, отправлять email и многое другое.
Основной тег для ссылок: <a>
Ссылки создаются с помощью тега <a>, у которого есть ключевой атрибут href (Hyperlink Reference).
Простейший пример ссылки:
<a href="https://www.google.com">Перейти на Google</a>Как это работает?
- href="https://www.google.com" – указывает, куда ведёт ссылка.
- Текст между <a> и </a> – это то, что видит пользователь.
| Атрибут | Описание |
|---|---|
| href | Содержит адрес, куда ведёт ссылка |
| target | Определяет, как открыть ссылку (_blank, _self, _parent, _top) |
| rel | Сообщает браузеру, какое отношение ссылка имеет к текущей странице |
| title | Показывает подсказку при наведении на ссылку |
Открытие ссылки в новой вкладке
Чтобы открыть ссылку в новом окне или вкладке, нужно добавить target="_blank".
<a href="https://www.google.com" target="_blank">Открыть Google в новой вкладке</a>Важно! Для безопасности всегда добавляй rel="noopener noreferrer" к внешним ссылкам:
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>Спросишь зачем? Давай разбираться...
Что такое rel="noopener noreferrer" и зачем он нужен?
Атрибут rel в теге <a> указывает отношение ссылки к текущей странице.
Когда ты добавляешь target="_blank", браузер открывает ссылку в новой вкладке, но при этом новая страница получает доступ к window.opener.
Это опасно, потому что злоумышленники могут изменить родительскую страницу через JavaScript.
Как работает атака через window.opener?
Ты создаешь ссылку без noopener:
<a href="https://bad-site.com" target="_blank">Перейти</a>- Пользователь кликает, открывается "плохой сайт" в новой вкладке.
- Злоумышленники выполняют JavaScript:
window.opener.location = "https://phishing-site.com";Родительская вкладка автоматически заменяется на вредоносный сайт.
В итоге: пользователь думает, что он вернулся на твой сайт, но на самом деле его уже перенаправили на поддельную страницу.
Как защититься?
Просто добавь rel="noopener noreferrer" к target="_blank" ссылкам:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>| Атрибут | Что делает? |
|---|---|
| noopener | Запрещает доступ к window.opener, защищая родительскую страницу |
| noreferrer | То же самое, но также скрывает HTTP-реферер (не передает информацию о том, с какого сайта пришел пользователь) |
Всегда используй rel="noopener noreferrer", если не хочешь, чтобы твои пользователи стали жертвой атак!
Ссылка на файл (PDF, DOC, ZIP и т. д.)
Ссылки могут вести не только на другие страницы, но и на файлы.
<a href="files/manual.pdf" download>Скачать инструкцию в PDF</a>Атрибут download говорит браузеру, что файл нужно скачать, а не открыть.
Якорные ссылки (переход по странице)
Якорные ссылки позволяют перемещаться по одной и той же странице. Они особенно полезны в длинных текстах.
Пример: создание якоря
- Создаём ссылку
<a href="#section2">Перейти ко второму разделу</a>- Добавляем якорь (ID секции)
<h2 id="section2">Это второй раздел</h2>
<p>Тут находится нужная информация.</p>Теперь, если нажать на ссылку, страница прокрутится к нужному разделу.
Email-ссылки (mailto:) и телефонные ссылки (tel:)
Можно сделать ссылки, которые автоматически открывают почтовый клиент или приложение для звонков.
Ссылка на email:
<a href="mailto:example@email.com">Написать письмо</a>Результат:
Ссылка для звонка:
<a href="tel:+1234567890">Позвонить нам</a>Результат:
На мобильных устройствах такая ссылка откроет приложение для звонков.
Вставка изображений в HTML
Картинки делают сайты красивыми и привлекательными. В HTML для вставки изображений используется тег <img>.
Простейший пример изображения:
<img src="cat.jpg" alt="Милый котик">| Атрибут | Описание |
|---|---|
| src | Указывает путь к изображению |
| alt | Описание изображения (показывается, если картинка не загрузилась) |
| width | Задаёт ширину изображения |
| height | Задаёт высоту изображения |
| title | Показывает всплывающую подсказку при наведении |
Пути к изображениям (src)
Изображения могут быть загружены из разных источников:
- Картинка из локальной папки
<img src="images/photo.jpg" alt="Фото из папки">Здесь "images/photo.jpg" – это путь к файлу внутри проекта.
- Картинка из интернета
<img src="https://example.com/photo.jpg" alt="Фото с интернета">Здесь изображение загружается с другого сайта.
Можно задавать размеры вручную, но лучше использовать CSS для гибкости.
Пример:
<img src="cat.jpg" alt="Котик" width="300">Здесь картинка будет шириной 300 пикселей, а высота изменится автоматически.
Оптимизация изображений для быстрой загрузки
Изображения могут замедлять сайт, поэтому их нужно правильно подготавливать.
| Формат | Когда использовать? |
|---|---|
| JPEG | Для фотографий и сложных картинок (меньший размер, но потеря качества) |
| PNG | Для картинок с прозрачностью |
| SVG | Для иконок, логотипов (идеально для масштабирования) |
| WEBP | Современный формат (качество как у JPEG, но весит меньше) |
Используй srcset для адаптивных картинок
Чтобы сайт загружал разные версии картинок для разных экранов:
<img src="small.jpg" srcset="large.jpg 2x" alt="Адаптивное изображение">Браузер автоматически выберет версию изображения, подходящую под разрешение экрана.
Сжимай изображения перед загрузкой
Перед тем, как загружать картинку на сайт, сожми её, чтобы уменьшить размер файла.
