Тегу часто мало просто пометить кусок текста - браузеру нужны дополнительные детали: куда ведёт ссылка, на каком языке текст. Эти детали пишутся внутри открывающего тега и называются атрибутами. А когда теги вкладываются друг в друга, закрывать их нужно строго в обратном порядке - иначе разметка сломается.
В этом уроке
Попробуй поменять адрес внутри `href` или сам текст ссылки - результат обновится сам.
Что такое атрибут и как его писать
Атрибут - это дополнительная информация внутри открывающего тега, в формате имя="значение". Сам тег <a> только говорит браузеру (здесь ссылка) а вот куда именно она ведёт - определяет атрибут href внутри этого тега.
<a href="https://www.htmlicss.com">Ссылка</a> - атрибут написан внутри открывающего тега, значение в кавычках.
<a>Ссылка</a> href="https://www.htmlicss.com" - атрибут вынесен за пределы тега; браузер не поймёт, что это ссылка и просто покажет лишний текст на странице.
<a> с самого начала было два режима, а не один. Атрибут href превращает текст в ссылку, а атрибут name - превращает место в тексте в цель, куда можно перейти (сегодня для этого чаще используют id, например переход на #section). Обе возможности заложили в тег одновременно ещё в первых спецификациях - поэтому у одного и того же тега как будто два разных назначения: (перейти по ссылке) и (перейти к месту в тексте).
Несколько атрибутов у одного тега
У одного тега может быть сразу несколько атрибутов - они пишутся через пробел и порядок между ними не важен. Например, target="_blank" у ссылки заставляет браузер открыть её в новой вкладке, не закрывая текущую страницу.
<a href="https://www.htmlicss.com" target="_blank">Ссылка</a> - оба атрибута разделены пробелом.
<a href="https://www.htmlicss.com"target="_blank">Ссылка</a> - атрибуты слиплись без пробела; браузер может не распознать второй атрибут как отдельный.
Вложенность тегов и порядок закрытия
Теги можно вкладывать друг в друга, но закрывать их нужно строго в обратном порядке относительно того, как они открывались. Если открыл теги в порядке <p> → <strong>, закрывать нужно сначала </strong>, потом </p>.
<p><strong>текст</strong></p> - закрыто в обратном порядке, всё аккуратно.
<p><strong>текст</p></strong> - теги закрыты не в том порядке. Многие браузеры постараются как-то отрисовать и такой вариант но полагаться на это не стоит: разметка становится невалидной и в разных браузерах результат может отличаться.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забыть кавычки у значения атрибута, если в нём есть пробел | Значение обрывается на первом пробеле, атрибут срабатывает не так, как задумано | Всегда брать значения атрибутов в кавычки |
| Написать атрибут после закрывающего тега | Атрибут не привязан к тегу и теряет смысл - браузер покажет его как обычный текст | Писать все атрибуты только внутри открывающего тега |
| Закрыть вложенные теги не в том порядке | Разметка становится невалидной, в разных браузерах может отрисоваться по-разному | Закрывать теги строго в обратном порядке относительно открытия |
| Слепить два атрибута без пробела между ними | Браузер может не распознать второй атрибут как отдельный | Разделять атрибуты одним пробелом |
Шпаргалка
| Термин | Значение |
|---|---|
| Атрибут | Дополнительная информация внутри открывающего тега: имя="значение" |
href | Атрибут ссылки <a> - куда она ведёт |
target="_blank" | Открывает ссылку в новой вкладке |
| Вложенность | Один тег внутри другого; закрывать нужно в обратном порядке открытию |
| Порядок атрибутов | Не важен - тег работает одинаково при любом порядке атрибутов |
Коротко: отвечаем на вопросы
Обязательно ли всегда закрывать теги, если браузер и так покажет страницу?
По стандарту HTML5 у нескольких тегов закрывающая пара формально необязательна - например, у <p> перед некоторыми другими тегами. Но список таких исключений короткий, и его легко перепутать: незакрытый тег там, где закрытие как раз важно, ломает вложенность. Поэтому проще и надёжнее закрывать все парные теги без исключений.
Можно ли писать значения атрибутов без кавычек?
Технически браузеры это допускают, если в значении нет пробелов и специальных символов. Но одна забытая деталь - и соседний текст случайно попадёт в значение атрибута, поэтому значения принято брать в кавычки всегда, без исключений.
Важен ли порядок атрибутов внутри тега?
Нет - порядок атрибутов никак не влияет на то, как элемент отобразится на странице. <img src="foto.jpg" width="200"> и <img width="200" src="foto.jpg"> работают одинаково.
