
В HTML нет понятия «команды» в привычном смысле программирования. Вместо этого используются теги – специальные обозначения, заключённые в угловые скобки. Они сообщают браузеру, как отображать содержимое страницы. Каждый тег – это инструкция, которая начинается с символа < и заканчивается на >. Пример: <p> указывает на абзац.
HTML-теги бывают парными и одиночными. Парные состоят из открывающего и закрывающего элемента, например: <strong>важный текст</strong>. Закрывающий тег имеет дополнительный символ / перед названием. Одиночные не требуют закрытия: <br> вставляет разрыв строки.
Каждый тег имеет имя, по которому его распознаёт браузер. Например, тег <a> отвечает за гиперссылки, <ul> – за маркированные списки, <table> – за таблицы. Регистр букв в HTML-тегах не влияет на результат, но рекомендуется использовать строчные буквы для лучшей читаемости и соответствия современным стандартам.
К тегам часто добавляются атрибуты – дополнительные параметры, уточняющие поведение или внешний вид элемента. Пример: <a href="https://example.com"> – атрибут href указывает адрес ссылки.
Понимание структуры и назначения тегов – основа грамотной вёрстки. Без этого невозможно контролировать разметку, семантику и доступность HTML-документов.
Чем отличаются одиночные и парные теги

Одиночные теги не требуют закрытия и используются для вставки элементов, не содержащих вложенного содержимого. Примеры: <br> для разрыва строки, <hr> для горизонтальной линии, <img> для изображения. Они могут включать атрибуты, но не содержат текст между начальным и конечным тегами, так как конечного тега не существует.
Парные теги состоят из начального и закрывающего. Пример: <p>Текст</p>. Такие конструкции обязательны для обрамления содержимого, которое должно отображаться или форматироваться особым образом. Они могут вкладываться друг в друга, и порядок закрытия должен соответствовать порядку открытия.
Нарушение структуры парных тегов приводит к ошибкам отображения и затрудняет анализ HTML-кода. Одиночные теги применяются только тогда, когда структура не требует вложенности или содержимого между тегами.
Как правильно писать атрибуты внутри тегов

Атрибуты задаются внутри начального тега и всегда располагаются после имени тега. Каждый атрибут состоит из имени и значения, разделённых знаком равенства. Пример: <input type="text">.
Все значения атрибутов должны быть заключены в двойные кавычки. Одинарные кавычки допустимы, но не рекомендуются, особенно при вложенности JavaScript-кода. Пример: <a href="https://example.com">.
Имена атрибутов и значений чувствительны к регистру только в XHTML. В HTML5 регистр не влияет на обработку, но рекомендуется использовать строчные буквы для единообразия. Пример: maxlength="10", а не MAXLENGTH="10".
Атрибуты следует указывать в логической последовательности: сначала глобальные (например, id, class), затем специфические. Пример для кнопки: <button id="save" class="primary" type="submit">.
Булевы атрибуты (например, disabled, checked) в HTML5 могут указываться без значения: <input disabled>. Однако для совместимости лучше писать полную форму: disabled="disabled".
Не следует указывать один и тот же атрибут несколько раз в пределах одного тега. Это приведёт к неопределённому поведению. Например: <div class="a" class="b"> – ошибка.
Если значение атрибута содержит пробелы, спецсимволы или кавычки, их необходимо экранировать. Пример: title="5 < 10 & 2 > 1".
Для пользовательских атрибутов используется префикс data-. Пример: <div data-user-id="42">. Такие атрибуты не влияют на разметку, но доступны в JavaScript через dataset.
Для чего используется тег <head> и что в него включают
Тег <head> содержит служебные данные, не отображающиеся напрямую в окне браузера. Он используется для передачи информации о документе, подключения ресурсов и настройки поведения страницы.
<title>– определяет название вкладки. Отображается в заголовке окна браузера и влияет на SEO.<meta charset="UTF-8">– задаёт кодировку символов. Обязательно для корректного отображения текста.<meta name="viewport" content="width=device-width, initial-scale=1.0">– управляет масштабированием на мобильных устройствах.<meta name="description" content="Описание страницы">– краткое описание, используемое поисковыми системами.<link rel="stylesheet" href="style.css">– подключает внешний CSS-файл.<script src="script.js" defer>– подключает JavaScript с отложенным выполнением после загрузки HTML.<meta name="robots" content="index, follow">– управляет индексацией страницы поисковыми системами.<link rel="icon" href="favicon.ico">– задаёт иконку сайта.
Также в <head> можно добавлять <base> для установки базового URL и <style> для встроенных CSS.
Порядок тегов влияет на читаемость и производительность. Сначала кодировка, затем заголовок, meta-теги, стили, затем скрипты с defer.
Какие теги отвечают за структуру текста

Для создания заголовков используются теги <h1> – <h6>. <h1> обозначает основной заголовок, а <h6> – самый низкий уровень. Уровень заголовка определяет иерархию информации на странице.
Абзацы оформляются с помощью тега <p>. Он разделяет текст на логические блоки, улучшая читаемость и восприятие содержимого.
Для выделения важного текста применяется <strong>. Этот тег делает акцент на значимости содержимого. <em> используется для смыслового выделения с интонацией ударения.
Списки создаются с помощью <ul> (маркированный), <ol> (нумерованный) и <li> (элемент списка). Они упорядочивают однородные фрагменты информации.
Цитаты оформляются через <blockquote> для длинных цитат и <q> для кратких. Эти теги указывают, что текст заимствован из другого источника.
Тег <br> добавляет принудительный перенос строки внутри блока текста, если не требуется новый абзац.
Для определения терминов используется <dfn>. Он помогает обозначать первое упоминание или значение понятия.
Предварительно форматированный текст оформляется тегом <pre>. Он сохраняет пробелы, табуляции и переносы строк в точности как в исходном коде.
Как оформляются ссылки и чем отличается абсолютный путь от относительного

Ссылка в HTML создаётся с помощью тега <a>. Обязательный атрибут – href, в котором указывается путь к ресурсу. Текст между открывающим и закрывающим тегами отображается пользователю.
Абсолютный путь начинается с протокола (например, https://) и включает полный адрес сайта: <a href="https://example.com/page.html">Перейти</a>. Такой путь используется при переходе на внешний ресурс или при необходимости однозначного указания местоположения страницы.
Относительный путь указывает расположение файла относительно текущей страницы. Пример: <a href="docs/instruction.html">Инструкция</a> – файл находится в подкаталоге docs. Путь ../ поднимается на уровень выше: <a href="../index.html">Главная</a>.
Абсолютные пути зависят от домена и корректны при любом местоположении HTML-документа. Относительные удобны при переносе проекта между средами без изменения ссылок. На этапе разработки предпочтительнее относительные, при ссылках на внешние ресурсы – абсолютные.
Что такое семантические теги и когда их использовать

Семантические теги в HTML имеют четкое значение и представляют собой элементы, которые ясно описывают свою роль на странице. В отличие от простых контейнеров, таких как <div> и <span>, семантические теги помогают структурировать контент, улучшая доступность и SEO-оптимизацию. Примеры таких тегов: <header>, <footer>, <article>, <section>, <nav>.
Когда использовать семантические теги:
1. Структурирование контента: Семантические теги помогают разделить страницу на логические части, такие как заголовки, абзацы, навигационные панели, статьи и т.д. Это улучшает восприятие контента как для пользователей, так и для поисковых систем.
2. Доступность: Семантические теги играют важную роль в обеспечении доступности. Например, использование <nav> для навигационных ссылок помогает программам для чтения с экрана понять, что данный блок содержит меню, а не обычный текст.
3. SEO: Семантические теги улучшают SEO-оптимизацию. Поисковые системы могут точнее определить контекст и важность элементов на странице, что может повлиять на ранжирование.
Когда избегать семантических тегов:
Семантические теги не всегда подходят для всех типов контента. Например, если требуется лишь контейнер для стилизации или простое разделение, то использовать семантический тег может быть излишним. В таких случаях проще использовать <div> или <span>.
Как добавлять изображения через тег <img>

Тег <img> используется для вставки изображений в HTML-документ. Он не имеет закрывающего тега и должен содержать несколько атрибутов, которые определяют путь к изображению и другие параметры.
- src – обязательный атрибут, указывающий путь к изображению. Путь может быть относительным или абсолютным. Пример:
src="images/photo.jpg". - alt – текстовое описание изображения. Этот атрибут важен для доступности и поисковой оптимизации. Пример:
alt="Фото красивого заката". - width и height – атрибуты для указания размеров изображения в пикселях. Например,
width="600" height="400". Если размеры не указаны, изображение будет отображаться в исходном размере. - title – дополнительная информация, которая появляется при наведении курсора на изображение. Пример:
title="Нажмите для увеличения".
Пример использования тега:
<img src="images/photo.jpg" alt="Фото красивого заката" width="600" height="400" title="Нажмите для увеличения">
При указании пути в атрибуте src важно учитывать, где находится изображение относительно HTML-документа. Для локальных файлов обычно используется относительный путь, для удалённых – абсолютный URL.
- Если изображение в той же папке, что и HTML-документ, достаточно указать его имя:
src="image.jpg". - Если изображение находится в подкаталоге, указывается путь с учётом структуры папок:
src="images/photo.jpg". - Для внешнего изображения нужно указать полный URL:
src="https://example.com/image.jpg".
Размеры изображения можно задавать как с помощью атрибутов width и height, так и через CSS, однако важно учитывать, что указанные атрибуты влияют на быстродействие страницы, так как браузер знает размеры изображения заранее.
Когда изображение не удаётся загрузить, браузер отображает текст из атрибута alt, что важно для пользователей с ограниченными возможностями или в случае проблем с сетью.
Для улучшения производительности страницы можно использовать атрибут loading=»lazy», который откладывает загрузку изображений до тех пор, пока они не станут видимыми на экране. Пример:
<img src="images/photo.jpg" alt="Фото красивого заката" loading="lazy">
Чем отличается тег <div> от тега <span>

<div> используется для группировки элементов и создания структурных блоков на странице. Это блочный элемент, что означает, что он всегда занимает всю доступную ширину контейнера и начинается с новой строки. Тег <div> подходит для разделения контента на секции и часто используется при создании макетов страниц, а также при применении CSS для задания внешнего вида.
С другой стороны, <span> является строчным элементом, который не нарушает потока текста. Он используется для выделения фрагментов текста внутри строк, например, для изменения цвета или шрифта определённых слов или символов. В отличие от <div>, <span> не начинает новый блок, а просто помещается внутри текущего потока контента.
Когда использовать <div>:
- Для создания больших структурных блоков на странице.
- Для группировки элементов, которые должны располагаться друг под другом.
- Когда нужно применить стили или добавить скрипты к нескольким элементам сразу.
Когда использовать <span>:
- Для выделения отдельных фрагментов текста внутри строки.
- Для стилизации небольших частей контента без изменения структуры документа.
- Когда нужно применить стили к элементам, не влияя на их расположение в потоке текста.
Таким образом, выбор между <div> и <span> зависит от того, нужен ли вам блочный или строчный контейнер, а также от задач по стилизации и структурированию контента.
Вопрос-ответ:
Какие основные теги используются для структуры HTML-документа?
В HTML для создания структуры документа используются такие теги, как , который является корневым элементом,
для метаинформации, и , внутри которого содержится основной контент страницы. Кроме того, в часто добавляются тегиЧто такое теги разметки в HTML?
Теги разметки в HTML — это элементы, которые определяют структуру и содержание веб-страницы. Например,
используется для заголовков первого уровня,
для абзацев, а — для создания ссылок. Эти теги сообщают браузеру, как отображать текст и другие элементы на странице.
Как в HTML задать изображения на веб-странице?
Для добавления изображения на страницу HTML используется тег . В нем указывается атрибут src, который указывает путь к изображению, и атрибут alt, который содержит текстовое описание изображения для пользователей с ограниченными возможностями или в случае, если изображение не может быть загружено. Пример:
.
Что такое блочные и строчные элементы в HTML?
В HTML элементы делятся на блочные и строчные. Блочные элементы, такие как
, занимают всю доступную ширину и начинаются с новой строки. Строчные элементы, например, или , не нарушают поток текста и размещаются в строке рядом с другими элементами. Это деление важно для управления отображением контента на странице.
Какие атрибуты могут быть у тега в HTML?
Что такое теги и команды в HTML?
HTML (Hypertext Markup Language) — это язык разметки, который используется для создания веб-страниц. Теги — это элементы, которые задают структуру и содержание этих страниц. Например,
для параграфов,
