HTML — итоги
Кратко — что стоит унести из раздела "HTML". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные сбои и ситуации после раздела про разметку. Здесь — что проверить и в какой главе копать; формулировки для зачёта — в чек-листе. Ниже — блок в духе поисковых запросов про SEO и индексацию (краткий ответ + ссылка в раздел).
Вопрос. Открыл файл .html в браузере — на экране видны сами теги <p>, <div>.
Ответ. Браузер показал файл как обычный текст: неверное расширение, файл сохранён как "текстовый" или открыт через "Открыть с помощью" не тем приложением. Сохраните с расширением .html, в первой строке укажите <!DOCTYPE html>, кодировку — UTF-8. Подробнее здесь — основы HTML.
Вопрос. Разметка вроде правильная, а страница выглядит "голой" — только чёрный текст без колонок и цветов.
Ответ. HTML задаёт структуру, оформление подключается отдельно — CSS через <link rel="stylesheet"> или встроенные стили. Проверьте путь к файлу стилей (404 в DevTools → Network) и что селекторы попадают в ваши классы. Подробнее здесь — основы HTML, CSS — о разделе.
Вопрос. Картинка на странице — иконка "битого" файла, хотя файл лежит рядом с HTML.
Ответ. Чаще всего неверный путь в src (регистр букв на Linux-сервере, лишний ./, другая папка после деплоя). Откройте URL картинки в новой вкладке; для важного контента всегда заполняйте осмысленный alt. Подробнее здесь — основные теги.
Вопрос. Русские буквы в заголовке или абзаце превратились в "ÐÑаÐ"Ð"о".
Ответ. Файл и объявление кодировки расходятся: в <head> нужен <meta charset="UTF-8">, сам файл сохраните в UTF-8 без "ANSI" в редакторе. Подробнее здесь — основы HTML.
Вопрос. Скопировал текст из Word в HTML — появились странные символы и лишние <span>.
Ответ. Редакторы офисных документов тащат внутреннюю разметку. Вставляйте как "простой текст" или прогоните через очистку; длинные стили в style="" лучше вынести в CSS. Подробнее здесь — основные теги.
Вопрос. Ссылка уводит с учебной страницы и "съедает" всю вкладку — как открыть в новом окне безопасно?
Ответ. Для внешних ресурсов используйте target="_blank" вместе с rel="noopener noreferrer" — иначе новая вкладка получит доступ к window.opener. Подробнее здесь — основные теги.
Вопрос. Клик по кнопке "Отправить" перезагружает страницу, а данные из полей пропадают.
Ответ. Так ведёт себя классическая отправка формы (method, action). Для учебной страницы без сервера временно уберите action или обработайте отправку через JavaScript с preventDefault. Проверьте, что у кнопки внутри формы тип submit, а у "просто кнопки" — type="button". Подробнее здесь — основные теги.
Вопрос. Несколько чекбоксов, а на сервер уходит только одно значение.
Ответ. У группы чекбоксов должен быть одинаковый name, у радиокнопок в группе — тот же name и разные value. Без name поле в запрос не попадёт. Подробнее здесь — основные теги.
Вопрос. Поле с required всё равно отправилось — я же не заполнял.
Ответ. Встроенная проверка срабатывает при отправке формы; кнопка type="button" или отправка через JS без reportValidity() обходят её. Скрытое поле display:none иногда всё ещё участвует в валидации — проверьте видимость и disabled. Подробнее здесь — основные теги.
Вопрос. Плейсхолдер в поле серый — пользователи думают, что это уже введённые данные.
Ответ. placeholder — подсказка, замена подписи поля им не служит. Свяжите видимый текст с полем через <label for="id"> и уникальный id на инпуте. Подробнее здесь — основные теги.
Вопрос. Сделал вёрстку на <div>, всё выглядит нормально — зачем тогда <header>, <main>, <nav>?
Ответ. Визуально совпадает, но скринридеры, поиск и сопровождение теряют ориентиры: "перейти к основному", оглавление страницы, смысл блоков. Семантика окупается на реальных проектах и в команде. Подробнее здесь — основы HTML, основные теги.
Вопрос. На странице три заголовка <h1> — поисковик "накажет"?
Ответ. Один явный <h1> на документ — привычка и ясная иерархия для людей и инструментов; несколько h1 редко ломают сайт мгновенно, но путают структуру и стили. Вложенные уровни h2–h6 должны отражать смысл, а не размер шрифта. Подробнее здесь — основные теги.
Вопрос. Вложил ссылку <a> внутрь другой ссылки — клики ведут себя странно.
Ответ. В HTML интерактивные элементы не вкладывают друг в друга (ссылка в ссылке, кнопка в кнопке). Оберните только текст или вынесите внешнюю ссылку на блок через CSS. Подробнее здесь — основные теги.
Вопрос. Таблицу использовал для шапки сайта — на телефоне горизонтальная прокрутка и "ломается" сетка.
Ответ. Таблицы — для табличных данных (<th>, подписи, scope). Макет страницы строят Flexbox/Grid в CSS; табличная вёрстка тяжела и плохо адаптируется. Подробнее здесь — основные теги, Flexbox и Grid.
Вопрос. <iframe> пустой или браузер пишет, что контент заблокирован.
Ответ. Сайт внутри фрейма может запрещать встраивание заголовком X-Frame-Options или CSP; проверьте src, HTTPS-смешение и атрибут sandbox для чужого контента. Подробнее здесь — основные теги.
Вопрос. Видео на iPhone не стартует, хотя на компьютере в Chrome всё играет.
Ответ. Safari на iOS часто требует кодек H.264 в контейнере MP4 и атрибуты playsinline / без автозвука по политике браузера. Добавьте несколько <source> и текстовый fallback внутри <video>. Подробнее здесь — основные теги, управление media из JS.
Вопрос. Подключил <script src="app.js"> в <head> — страница "пустая", ошибка в консоли про document.body.
Ответ. Скрипт выполнился до построения DOM. Перенесите тег в конец <body>, используйте defer (порядок сохраняется) или оборачивайте обращение к элементам в DOMContentLoaded. Подробнее здесь — основы HTML.
Вопрос. Два скрипта с async — второй падает, потому что "не видит" функцию из первого.
Ответ. async загружает и выполняет файлы как только готовы, порядок между ними гарантирован. Зависимые скрипты ставьте без async с defer в нужной последовательности или собирайте бандл. Подробнее здесь — основы HTML.
Вопрос. На телефоне сайт мелкий, приходится щипать — что забыли в HTML?
Ответ. В <head> добавьте viewport, например width=device-width, initial-scale=1 — без него мобильный браузер рисует "десктопную" ширину. Дальше масштаб и сетку настраивают в CSS. Подробнее здесь — основы HTML, адаптивный дизайн.
Вопрос. Дублировал id="menu" в шапке и в подвале — якорная ссылка и JS ведут себя непредсказуемо.
Ответ. id на странице должен быть уникальным; для повторяющихся блоков — class. Дубли ломают document.getElementById и связку label/for. Подробнее здесь — основные теги.
Вопрос. Вставил < и > в текст статьи — дальше вся разметка "поехала".
Ответ. Угловые скобки в тексте экранируют как < и > (или через шаблон/генератор). В атрибутах кавычки тоже кодируют, если они конфликтуют с границами атрибута. Подробнее здесь — справочник HTML.
Вопрос. HTML-комментарий <!-- попал на страницу как обычный текст.
Ответ. Комментарий не закрыт --> или символы -- внутри комментария обрывают его раньше времени. Проверьте валидатором и исходник в DevTools → Elements. Подробнее здесь — справочник HTML.
Вопрос. Скринридер читает меню дважды или в странном порядке.
Ответ. Частые причины — лишние role, дублирующиеся ссылки "скип к контенту", визуальный порядок через CSS, отличный от DOM. Сначала выровняйте семантику (<nav>, один <main>), ARIA добавляйте только при необходимости. Подробнее здесь — основы HTML.
Вопрос. Браузер переводит название бренда или фрагмент кода на другой язык.
Ответ. На фрагменте укажите translate="no" (и при необходимости lang на вложенном элементе). Для всей страницы задайте корректный lang на <html>. Подробнее здесь — основы HTML.
Вопрос. Включил loading="lazy" на всех картинках above the fold — первый экран загружается поздно.
Ответ. Ленивая загрузка уместна ниже первого экрана; для логотипа и hero-картинки оставьте обычную загрузку, при необходимости fetchpriority="high". Подробнее здесь — основные теги.
Вопрос. <datalist> не показывает подсказки в Safari / старом браузере.
Ответ. Подсказки <datalist> — прогрессивное улучшение; поле должно работать и без них. Для сложного автодополнения позже подключите JS. Подробнее здесь — шаблоны, output и datalist.
Вопрос. Хочу ускорить переходы по внутренним ссылкам — сразу включить prerender на весь сайт?
Ответ. Speculation Rules экономят время только на предсказуемых переходах; лишний prerender тратит трафик и может выполнить чужой JS на следующей странице. Начните с prefetch/prerender для 1–2 маршрутов и измерьте. Подробнее здесь — основы HTML.
Вопрос. Игра на Canvas чёрный экран — разметка есть, а персонажа нет.
Ответ. <canvas> сам по себе не рисует игру — нужен JavaScript (контекст, цикл отрисовки, обработка ввода). Проверьте консоль на ошибки и размеры canvas в CSS. Подробнее здесь — веб-игры на Canvas.
Вопрос. W3C Validator ругается на "закрывающий слэш" у <img/> — что писать в HTML5?
Ответ. В HTML5 void-элементы (img, br, input, meta) пишут без слэша: <img alt="…" src="…">. Слэш из XHTML допустим, но в учебных проектах придерживайтесь одного стиля. Подробнее здесь — справочник HTML.
Вопрос. Отправляю форму на свой PHP — приходит пустой $_POST.
Ответ. Для загрузки файлов нужен enctype="multipart/form-data"; имена полей должны совпадать с тем, что читает сервер. Метод GET кладёт данные в URL, POST — в тело запроса. Подробнее здесь — основные теги, PHP — о разделе.
Вопрос. Сайт должен работать при отключённом JavaScript — с чего начать в HTML?
Ответ. Формы отправляются на сервер, ссылки ведут на реальные URL, контент читаем без скриптов; JS добавляет удобство поверх. Навигация, текст и картинки с alt — база прогрессивного улучшения. Подробнее здесь — основы HTML, практическое задание.
Вопрос. Какой title поставить в HTML, чтобы страница нормально ранжировалась в Google?
Ответ. Тег <title> в <head> — заголовок вкладки и частый источник сниппета в выдаче. Пишите уникальный title на каждую страницу: тема + бренд, без спама ключевыми словами. Подробнее здесь — основные теги, метатеги, основы HTML.
Вопрос. Нужен ли meta description и сколько символов писать?
Ответ. <meta name="description" content="…"> — краткое описание страницы; поисковик может взять его для сниппета (не гарантия). Ориентир — одно-два предложения по сути, без копипаста с других URL. Подробнее здесь — основные теги.
Вопрос. Meta keywords в 2026 году ещё работают для SEO?
Ответ. Крупные поисковики давно не опираются на keywords для ранжирования; тег не вредит, но время лучше потратить на title, description, структуру и контент. Подробнее здесь — основные теги.
Вопрос. Сколько тегов h1 должно быть на странице для SEO?
Ответ. Обычно один главный <h1> на документ — ясная тема страницы; подзаголовки — h2–h6 по иерархии. Несколько h1 редко "банят", но путают структуру для робота и людей. Подробнее здесь — основные теги.
Вопрос. Зачем alt у изображений — это только для слепых или влияет на поиск картинок?
Ответ. alt нужен для доступности и даёт поиску текстовый контекст картинки (Google Images, контекст страницы). Декоративным изображениям достаточно alt="". Подробнее здесь — основные теги.
Вопрос. Семантические теги header nav main article — это про SEO или только про красоту кода?
Ответ. Семантика помогает роботу и скринридеру понять роли блоков (навигация, основной текст, статья). Это не волшебная кнопка в ТОП, но основа чистой структуры вместо "супа из div". Подробнее здесь — основы HTML, основные теги.
Вопрос. Что такое canonical URL и зачем link rel="canonical" в head?
Ответ. Канонический URL указывает поиску главную версию страницы при дублях (?utm=, www/без www, http/https). Подключают через <link rel="canonical" href="https://…">. Подробнее здесь — основные теги, head, справочник.
Вопрос. Как сделать, чтобы в ВКонтакте и Telegram красиво показывалась превьюшка ссылки?
Ответ. В <head> добавьте метатеги Open Graph (og:title, og:description, og:image, og:url). Соцсети читают их при шаринге; для Twitter — twitter:card. Подробнее здесь — веб-игры и публикация, мета для соцсетей, основные теги.
Вопрос. Атрибут lang на html — влияет ли на SEO многоязычного сайта?
Ответ. lang="ru" (или другой код BCP 47) сообщает браузеру и поиску язык документа — корректнее озвучка, сниппеты и подбор версии. На вложенных цитатах язык можно уточнить отдельно. Подробнее здесь — основы HTML.
Вопрос. Сайт на русском и английском — что такое hreflang в разметке?
Ответ. <link rel="alternate" hreflang="…" href="…"> связывает языковые/региональные версии одной темы, чтобы поиск не считал их дублями. Нужны взаимные ссылки между всеми версиями и x-default при необходимости. Подробнее здесь — основы HTML, основные теги.
Вопрос. Google пишет "страница не оптимизирована для мобильных" — что править в HTML в первую очередь?
Ответ. Проверьте <meta name="viewport" content="width=device-width, initial-scale=1">, читаемый текст без горизонтальной прокрутки, кликабельные ссылки и кнопки; адаптивную сетку настраивают в CSS. Подробнее здесь — основные теги, адаптивный дизайн, рекомендации по CSS.
Вопрос. Как закрыть страницу от индексации — noindex в HTML?
Ответ. Для отдельной страницы — <meta name="robots" content="noindex, nofollow"> (или только noindex). Для всего сайта чаще используют robots.txt на сервере. Не путайте с canonical: noindex убирает URL из индекса. Подробнее здесь — основные теги, как работают сайты.
Вопрос. Что такое микроразметка Schema.org — куда вставлять в HTML?
Ответ. Структурированные данные описывают сущности (статья, товар, FAQ) в формате JSON-LD в <script type="application/ld+json"> или атрибутах schema.org. Подробнее здесь — JSON Schema, OpenAPI и Schema.org, основные теги.
Вопрос. Внутренние ссылки — какой anchor text лучше для SEO?
Ответ. Текст ссылки должен описывать цель ("тарифы", "документация API"), а не "здесь" и "подробнее" на каждой кнопке. Используйте <a href="…"> с осмысленным содержимым и <nav> для меню. Подробнее здесь — основные теги.
Вопрос. Заголовки h2 h3 без h1 — вредит ли продвижению?
Ответ. Иерархия заголовков — карта документа: пропуск уровней и отсутствие главного заголовка ухудшают понимание темы. Сначала один h1, затем вложенные h2–h3 по смыслу, а не ради размера шрифта. Подробнее здесь — основные теги.
Вопрос. На всех страницах один и тот же title и description — почему падают позиции?
Ответ. Дубли метаданных делают сниппеты одинаковыми и слабо отражают уникальный контент каждого URL. Задавайте свой title/description под тему страницы (каталог, карточка, статья). Подробнее здесь — основные теги.
Вопрос. Lazy loading картинок loading="lazy" — помогает ли SEO и скорости?
Ответ. Отложенная загрузка снижает вес первого экрана (важно для Core Web Vitals), но не ставьте lazy на hero-изображение above the fold. Подробнее здесь — основные теги, рекомендации CSS.
Вопрос. picture и srcset — нужны ли для SEO или только для Retina?
Ответ. Адаптивные изображения отдают браузеру подходящий размер файла — быстрее LCP и меньше трафик на мобильных, что косвенно влияет на ранжирование. srcset/sizes и <picture> — в разметке, стили — в CSS. Подробнее здесь — основные теги.
Вопрос. Контент только в JavaScript — Google проиндексирует пустую страницу?
Ответ. Роботы умеют выполнять JS, но надёжнее иметь ключевой текст и ссылки в HTML (SSR или статическая оболочка). Критичные заголовки и абзацы не прячьте только в клиентский рендер. Подробнее здесь — основы HTML, JavaScript — о разделе.
Вопрос. Таблица ключевых слов внизу страницы мелким шрифтом — рабочий приём SEO?
Ответ. Спам ключевиками и скрытый текст нарушают правила поиска и могут привести к санкциям. Пишите для людей: нормальные абзацы, списки, заголовки. Подробнее здесь — основные теги, практические рекомендации CSS.
Вопрос. HTTPS и SEO — нужно ли что-то менять в HTML при переходе на SSL?
Ответ. На сервере включают редирект http→https; в разметке обновите абсолютные ссылки, canonical и og:url на https://, проверьте смешанный контент (картинки по http). Подробнее здесь — сеть и безопасность, как работают сайты.
Вопрос. Списки ul ol в статье блога — лучше для SEO, чем один сплошной текст?
Ответ. Структурированные списки и подзаголовки упрощают сканирование страницы людьми и машинами; иногда попадают в расширенные ответы при логичной разметке. Используйте <ul>/<ol> по смыслу, а не <br> вместо списка. Подробнее здесь — основные теги.
Вопрос. Тег article для поста в блоге — что даёт поисковику?
Ответ. <article> обозначает самостоятельный материал (пост, новость) с собственным заголовком и датой; внутри уместны header, time, ссылки. В паре с чистым URL и метаданными это помогает структуре сайта. Подробнее здесь — основные теги, основы HTML.
Вопрос. Долгий HTML с десятками script в head — влияет на SEO?
Ответ. Тяжёлый <head> задерживает отрисовку (LCP, INP). Скрипты без срочности — с defer/async или в конце body; стили и шрифты — без лишних блокировок. Подробнее здесь — основы HTML, подключение CSS.
Что запомнить
Основные категории элементов:
- Структурные (html, head, body);
- Блочные (div, header, section);
- Строчные (span, a, img);
- Формы и элементы управления;
- Мультимедиа (audio, video, img).
Структура документа:
- DOCTYPE;
- html;
- head (meta, title, link);
- body.
Семантическая разметка:
- header, footer;
- nav, aside;
- main, section, article;
- figure, figcaption.
Формы и элементы:
- form;
- input (различные типы);
- button;
- select, option;
- textarea.
Мультимедиа:
- img (атрибуты alt, srcset);
- audio, video;
- source;
- picture.
Ускорение навигации:
- Speculation Rules API (
<script type="speculationrules">); - prerender и prefetch для предсказуемых переходов по ссылкам.
Три основных правила написания HTML:
- Используйте семантические теги.
- Соблюдайте правильную вложенность.
- Добавляйте атрибуты доступности.
- Задавайте локализацию через
lang,dirиtranslateтам, где это нужно.
Три фундаментальных момента:
- HTML определяет структуру документа;
- Правильная семантическая разметка важна для SEO;
- Корректная вложенность элементов обеспечивает работоспособность.
HTML — это язык разметки гипертекста, лежащий в основе каждого веб-документа. Он не управляет внешним видом и не определяет поведение страницы, а описывает структуру содержимого — заголовки, абзацы, списки, таблицы, формы, изображения, ссылки и другие смысловые блоки. Эта структура становится основой для применения стилей (через CSS) и интерактивности (через JavaScript), а также для корректной индексации поисковыми системами и доступности для пользователей с ограниченными возможностями.
Современный HTML — это HTML5, стандартизированный WHATWG и W3C. Он включает семантические элементы (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>), которые делают документ понятным не только браузерам, но и скринридерам, парсерам и алгоритмам анализа контента. Семантика заменяет устаревшую практику построения макетов на <div> без смысла, повышая качество кода и его долгосрочную поддерживаемость.
HTML строится на принципе вложенных элементов, каждый из которых имеет тег, атрибуты и содержимое. Атрибуты задают дополнительные свойства — id и class для стилизации и скриптов, src и href для ссылок на ресурсы, alt для альтернативного текста изображений, lang для указания языка документа. Правильное использование этих атрибутов критически важно для доступности, SEO и безопасности.
Формы (<form>) — один из ключевых механизмов взаимодействия с пользователем. Современный HTML предоставляет богатый набор типов полей (email, tel, date, number, url, search), встроенные средства валидации (required, pattern, min, max), а также атрибуты для управления отправкой (method, action, enctype). Это снижает зависимость от JavaScript на начальном этапе и улучшает пользовательский опыт даже при отключённых скриптах.
HTML не является программным языком: он не содержит логики, циклов или условий. Его задача — точно и однозначно описать то, что есть на странице. Вся динамика добавляется сверху. Поэтому хороший HTML — это чистый, валидный, семантически корректный и доступный код, который работает даже в самых простых условиях: медленном интернете, старом браузере или без JavaScript.
Наконец, HTML — это фундамент всей клиентской экосистемы. Без правильной разметки невозможна адаптивность, недостижима доступность, неэффективна SEO-оптимизация, а сложность сопровождения растёт экспоненциально. Освоение HTML — это освоение языка, на котором говорит веб.
Куда идти дальше
| Тема | Раздел |
|---|---|
| "Веб-браузеры" | "Веб-браузеры" |
| "JavaScript — о разделе" | "JavaScript — о разделе" |
| "Веб-сайты и веб-приложения — о разделе" | "Веб-сайты и веб-приложения — о разделе" |
| "CSS — о разделе" | "CSS — о разделе" |
| HTML — целые страницы с разбором тегов | HTML-страницы целиком |
| Готовые макеты HTML+CSS | HTML + CSS — готовые макеты |
| CSS-анимации | CSS-анимации — готовые эффекты |
| Tailwind — готовые блоки | Tailwind — готовые блоки |
Проверьте себя: Чек-лист самопроверки.