Вернуться ко всем урокам
html
Теги и атрибуты
HTML
Обновлено
18.08.2023
Просмотров
708
Время прочтения
20 мин.
Сложность
Для корректного распознавания браузером тегов и отделения тегов от содержимого используется специальный синтаксис. Как и в любом языке синтаксис имеет ключевую роль, поэтому html-документ с неправильно описанными тегами будет отображён с ошибками. Теги бывают двух видов: парные, у которых есть закрывающая часть, и одиночные, без закрывающей части:
<img src="/path/to/img" alt="beautiful mountains">
<span class="theme-text">А это просто текст, он закрывается тегом с обеих сторон, чтобы его содержимое не потерялось</span>
Первый тег <img> выводит изображение, и он никогда не имеет закрывающей части. Тег <span> позволяет нам выделить какую-то часть текста особенным образом и он должен всегда иметь закрывающую часть. В некоторых случаях, если вы не поставите закрывающую часть тега, браузер сделает это за вас, и ошибки не будет. Однако такой подход не приветствуется и среди разработчиков считается серьёзным промахом, поэтому следует всегда закрывать парные теги.
В парные теги можно и нужно вкладывать другие теги. Собственно, в этом и будет заключаться ваша работа как верстальщика — необходимо будет составить структуру тегов, чтобы при помощи неё корректно отобразить веб-страницу. Однако стоит учесть, что открытые и закрытые теги не должны пересекаться, т.е. тег не может закрываться позже своего родительского тега. Пример правильной и неправильной записей (ошибка обозначена красным):
// правильно
<p>Обыкновенный абзац с текстом, часть текста в котором <b>выделена жирным</b></p>
// неправильно
<p>Обыкновенный абзац с текстом, часть текста в котором <b>выделена жирным</p></b>
Здесь тег <p> закрывается раньше, чем лежащий внутри него (так сказать, дочерний) тег <b>. Если вы оставите эту запись без изменений, то поведение браузера будет непредсказуемым, но в любом случае он попытается исправить ошибку и поставить где-нибудь, а возможно и в нескольких местах закрывающий тег </b> . Разумеется, такое поведение нас не устраивает, поэтому при описании разметки следует быть внимательным и в первую очередь, если отображение веб-страницы сильно отличается от ожидаемого, следует искать ошибку в разметке.
Синтаксис тегов, атрибутов и текста
Как мы уже говорили, язык HTML обладает своим синтаксисом, нарушение которого приведёт к ошибкам в разметке и отображении веб-страницы, а также к ошибкам и предупреждениям при валидации и индексации поисковиками сайта. Уже по этим, возможно вам ещё не знакомым словам можно понять, что соблюдение синтаксиса необходимо.
Стоит запомнить некоторые важные особенности синтаксиса:
Теги можно писать как прописными, так и строчными символами. Это означает, что запись тега <BR> будет восприниматься идентично <br>. Браузер не выдаст ошибки и корректно отобразит разметку, однако стоит учесть, что кроме правил синтаксиса языка есть ещё негласные (а порой и прописанные) соглашения веб-разработчиков относительно стиля кода. И как раз эти правила решительно не рекомендуют использовать в тегах прописные символы, поэтому привыкайте сразу писать так, как принято во всём мире — строчными символами.
Также в HTML есть определённый спецификацией порядок тегов. Например, тег <html> не может быть вложен в другой тег, равно как и любой другой тег не должен находиться вне тега <html>. Некоторые теги, например <meta>, <title> могут быть вложены только в тег <head>. Есть множество различных правил, и более подробно вы с ними познакомитесь по ходу чтения учебника.
Значения атрибутов тегов необходимо помещать в кавычки. Атрибуты — это свойства тегов, несущие определённую информацию, и как правило их значения весьма сильно влияют на отображение веб страницы и на логику её работы. Атрибут описывается при помощи имени, знака равно и значения. Пример атрибутов для ссылки:
<a href="https://mail.ru" title="Информационно-новостной портал Mail.ru">
Ссылка на mail.ru
</a>
То, что находится внутри тега после его имени, является атрибутом. Атрибутов может быть множество, и в различных реальных сложных проектах у тега может быть 5, 10 и более атрибутов, каждый из которых жизненно необходим для корректной работы сайта\приложения. Имя и значение атрибута разделяет символ равно (=). Значение указывается в одинарных или двойных кавычках, хотя кавычки и не всегда обязательны. Кавычки можно не прописывать, если значение атрибута составляет одно слово. Однако так же как и в случае с прописными символами в именах тегов, некоторое соглашение среди разработчиков существует и в части указания кавычек для значений атрибутов: указывать их следует всегда. Вот простые примеры, благодаря которым всё станет ясно:
// правильно, значение атрибута alt в кавычках
<img src="/uploads/martin-scorsese.jpg" alt="MartinScorsese">
// неправильно, но работает: значение атрибута alt без кавычек, но составляет одно слово
<img src="/uploads/martin-scorsese.jpg" alt=MartinScorsese>
// неправильно, будет ошибка: значение атрибута alt без кавычек и составляет несколько слов
<img src="/uploads/martin-scorsese.jpg" alt=director Martin Scorsese >
Внутри тега вы можете ставить перенос строк, указывая атрибуты каждый на новой строке. Это не приведёт к ошибке в отображении:
<img
src="/uploads/images/martin-scorsese.jpg"
alt="MartinScorsese"
width="400" >
Это допустимо и, возможно, приводит к улучшению читаемости кода, однако я не часто замечаю такую практику. Такие переносы атрибутов есть смысл использовать, если этих атрибутов действительно много, например 8-10 и больше. Стоит также отметить, что порядок указания атрибутов совершенно неважен, то есть вы можете указывать для изображения сначала alt, потом src, потом class, а можете поменять их местами. Логика работы атрибутов не изменится.
Для некоторых атрибутов не обязательно указывать значение. Это так называемые «булевы» атрибуты, т.е. атрибуты, которые принимают смысловые значения «да»\»нет», или «включено»\»выключено», «активно»\»неактивно». Наличие таких атрибутов уже подразумевает то, что их значение равно «включено», поэтому указание значения излишне. Например, это атрибут disabled для тега <input>. Он делает элемент для ввода данных отключенным.
<input type="text" name="user_name" disabled >
Для текста, который находится внутри тегов и является содержимым веб-страницы, также существуют некоторые правила. Главное из них — это способ обработки текста страницы браузером: любое количество пробелов больше одного подряд в тексте игнорируется. Также игнорируются все переносы строки в тексте (созданные при помощи нажатия клавиши enter). Текст в веб-страницах переносится, если это необходимо, при помощи специального тега <br>, а если необходимо оставить текст без форматирования (сохранить количество пробелов и переносы на новую строку, какие присутствуют непосредственно в html-файле), то можно воспользоваться предназначенным для того тегом <pre>. Ниже представлен пример кода и результат его обработки браузером:
<p>
Это обыкновенный текстовый абзац, в который
добавлено
случайное количество
пробелов и переносов текста
</p
