Как сделать ссылку на страницу сайта: HTML и проверка 404

Ссылку на страницу сайта создаёт элемент <a> с адресом в атрибуте href: <a href="about.html">О компании</a>. Для страницы своего сайта можно указать относительный путь, для чужого сайта нужен полный адрес с протоколом HTTPS, а переход к разделу дополняется якорем вида #contacts. Ниже вы соберёте рабочий пример и проверите, почему вместо страницы иногда появляется 404.

Что должно быть готово до ссылки

Нужны две вещи: страница, на которой стоит ссылка, и реальная цель перехода. В обычном статическом проекте это два HTML-файла или HTML-файл и раздел с атрибутом id. Имена файлов и папок должны совпадать с опубликованными именами, включая регистр букв. Если целевой файл существует только на компьютере, а на сервер не попал, правильная разметка всё равно приведёт к 404.

Элемент <a> без href не создаёт переход. Стандарт HTML требует, чтобы значение href было допустимым URL, а отсутствие этого атрибута превращает элемент в обычный текстовый контейнер. Это зафиксировано в HTML Living Standard. Если сам сайт ещё не собран, начните с инструкции по HTML-сайту, затем возвращайтесь к связям между страницами.

Правило выбора адреса в href

Сначала определите, где находится цель относительно текущей страницы. Это надёжнее, чем угадывать количество точек и слешей. Выберите один из четырёх вариантов:

• Страница в той же папке: имя файла, например about.html.
• Страница во вложенной папке: папка и файл, например catalog/item.html.
• Страница уровнем выше: ../about.html, где .. означает родительскую папку.
• Страница от корня сайта: /about/. Такой путь начинается с / и не зависит от глубины текущей страницы.
• Другой сайт: полный адрес, например https://example.com/about/.

По документации MDN о разрешении относительных адресов, ./ указывает на текущую папку, ../ поднимает на одну папку, а начальный / ведёт от корня сайта. Внешнюю страницу нельзя корректно указать как /page: браузер воспримет это как путь на вашем домене.

Считайте путь от URL текущей страницы, а не от того места, где файл виден в Finder или Проводнике. После публикации структура адресов сайта может не совпадать со структурой локальных папок.

Минимальный пример из трёх страниц

Представим проект с главной index.html, страницей about.html и папкой catalog, где лежит item.html. На главной ссылка на соседний файл выглядит так:

<a href="about.html">О компании</a>
<a href="catalog/item.html">Открыть товар</a>

На странице catalog/item.html путь к about.html должен сначала подняться на уровень выше:

<a href="../about.html">О компании</a>
<a href="/">На главную</a>

Корневой путь / удобен на опубликованном сайте, но при открытии файла двойным щелчком на компьютере он может вести не в папку проекта. Поэтому локальную проверку лучше делать через сервер предпросмотра, который использует те же URL, что и публикация.

По теме: Как сделать полный скрин сайта: 3 способа в 2026

Как сделать ссылку на раздел страницы

Якорь связывает ссылку с уникальным id элемента. Для перехода внутри текущей страницы поставьте id у заголовка и укажите это значение после #. Регистр и символы должны совпасть точно:

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

Чтобы открыть раздел на другой странице, соедините путь и фрагмент: <a href="about.html#team">Команда</a>. MDN подтверждает, что элемент с id создаёт фрагмент документа, а ссылка добавляет это значение после # в руководстве по HTML-ссылкам. Если нужен плавный переход и кнопка наверх, отдельные варианты есть в статье про прокрутку и якоря.

Якорь не загружает отдельный файл. Если адрес страницы работает, но прокрутки нет, ищите элемент с нужным id, дубликат этого id или расхождение в написании. Значение href="#" ведёт к верху страницы, но для понятной навигации лучше использовать осмысленное имя раздела.

Как оформить внешнюю ссылку

Для чужого сайта укажите полный URL с протоколом HTTPS. Без протокола браузер может принять адрес за локальную папку вашего сайта. Открывать ссылку в новой вкладке не обязательно. Если это действительно нужно, добавьте target="_blank" и rel="noopener noreferrer".

Текст ссылки должен объяснять назначение перехода без слов «нажмите здесь». Например, «официальная документация HTML» понятнее и человеку, и программе чтения с экрана. Если ссылка оформляется как кнопка, сохраняйте элемент <a> для перехода, а внешний вид задавайте CSS. Разница между ссылкой и кнопкой показана в статье о кликабельных элементах сайта.

По теме: Как сделать сайт для книги: структура и безопасный фрагмент

Почему появляется 404

Код 404 означает, что сервер не нашёл ресурс по полученному адресу. Это не доказывает, что файла нет вообще: чаще путь ведёт не в ту папку, имя отличается регистром или опубликованный URL устроен иначе. Проверяйте адрес, который получился после клика, а не только строку в исходном HTML.

1. Наведите указатель на ссылку и посмотрите итоговый адрес внизу браузера.
2. Откройте ссылку и сравните путь после домена с фактическим URL целевой страницы.
3. Проверьте имя файла, расширение .html, регистр букв и количество уровней ../.
4. Откройте инструменты разработчика, вкладку Network, повторите переход и найдите строку со статусом 404.
5. Исправьте href, заново опубликуйте изменённый файл и повторите переход из исходной страницы.

В справочнике Chrome DevTools указано, что колонка Status показывает HTTP-коды, включая 200 и 404. Статус 200 подтверждает получение страницы, но не гарантирует правильность её содержания. После него проверьте заголовок, нужный раздел и обратную ссылку.

Диагностика по симптому

• Клик ничего не делает: проверьте наличие href, закрывающий тег </a> и отсутствие прозрачного элемента поверх ссылки.
• Открывается не тот раздел: сравните фрагмент после # и значение id символ в символ.
• На главной работает, во вложенной странице нет: относительный путь считается от разных папок. Используйте правильный ../ или путь от корня.
• Локально работает, после публикации 404: проверьте загрузку файла, регистр имени и правила адресов хостинга.
• Открывается чужая страница вашего домена: во внешнем адресе пропущен https://.
• После переноса сайта сломались ссылки с доменом: замените внутренние полные URL на пути от корня, если архитектура это допускает.

Граничный случай: одностраничные приложения и конструкторы могут хранить маршрут без отдельного HTML-файла. Тогда ручной путь page.html не подходит. Используйте компонент ссылок фреймворка или настройку страницы в конструкторе, а проверку проводите на опубликованном предпросмотре. Для меню из нескольких переходов пригодится отдельная инструкция по меню сайта.

По теме: Как сделать сайт-сервис: MVP, данные и проверка в 2026

Финальный чек-лист

• У каждого элемента <a> есть непустой href.
• Внутренний путь проверен со страницы именно той глубины, где стоит ссылка.
• Внешний адрес начинается с https:// и ведёт на ожидаемый домен.
• Каждый якорь совпадает с уникальным id.
• Все целевые файлы или маршруты опубликованы.
• Переход проверен на компьютере и телефоне, а Network не показывает 404.
• У целевой страницы есть понятный заголовок и способ вернуться назад.

Частые вопросы

Что писать в href для соседней страницы?

Имя файла, например about.html. Если сервер публикует страницу как папку с index.html, используйте её публичный путь, например /about/.

Чем /about/ отличается от about.html?

Первый адрес считается от корня домена и обычно обозначает маршрут или папку. Второй считается от текущей папки и указывает на файл. Рабочий вариант зависит от структуры публикации.

Как открыть другую страницу сразу на нужном разделе?

Добавьте фрагмент после пути: about.html#team. На целевой странице должен существовать элемент id="team".

Почему ссылка работает на компьютере, но даёт 404 на сайте?

Локальная файловая система и сервер обрабатывают пути по-разному. Проверьте, загружен ли файл, совпадает ли регистр имени и какой публичный URL назначил хостинг.

Нужно ли открывать внешние ссылки в новой вкладке?

Нет. Используйте новую вкладку только когда читателю действительно важно сохранить текущую страницу, и заранее не ломайте ожидаемое поведение браузера.