Теги HTML
Как мы уже писали в статье, посвященной общим вопросам HTML, теги необходимы для того, чтобы браузер “понимал”, что отображать нужно не простой текст, а текст с элементами форматирования. Обратите внимание на синтаксис написания тегов:
|
<тег атрибут1="значение" атрибут2="значение"> |
Как вы заметили, теги бывают двух видов: одиночные (первый пример) и парные (второй пример). Парные теги могут содержать внутри себя дополнительные теги или текст. Рассмотрим этот вопрос детальнее.
Парные теги в HTML
Парные теги также имеют второе название — контейнеры. Они состоят из открывающего и закрывающего тега. Открывающий выглядит также, как и одиночный — <тег>, тогда как в закрывающийся добавляется слэш — </тег>.
Как применяются теги
Важно понимать, что для тегов того или иного типа работают определенные правила. Некоторые из них являются обязательными, другие же — просто рекомендации:
- Атрибуты тегов и кавычки. Как известно, значения атрибутов тегов заключаются в двойные (“”) или одинарные кавычка (‘’). Если вы не поставите кавычки, браузер корректно обработают код, однако не в том случае, если речь идет о тексте с пробелами. Например:
|
<p><img src="images/image.png" alt="Первый заголовок" width="300" height="91"></p> |
Первая строка написана верно, с применением всех кавычек, чего не скажешь о второй строке (атрибут alt). Таким образом в качестве значения alt браузер выберет первое слово, тогда как второе будет “распознано” как ошибочное.
- Прописные и строчные символы в тегах. Теги можно писать как прописными, так и строчными буквами. Ошибки не будет если вы будете использовать <BR>,<Br> или <br>. Тем не менее рекомендуется остановится на одной форме записи на всех страницах веб-портала.
- Перенос строк. Между атрибутами внутри тега можно использовать перенос строк. Рассмотрим на примере. Строка без переноса:
|
<p><img src="images/image.png" alt="Первый заголовок" width="300" height="91"></p> |
Та же строка с переносом:
|
<p><img src="images/image.png" alt="Первый заголовок" width="300" height="91"></p> |
- Неизвестные теги. Если тег или же атрибут тега прописаны с ошибкой, браузер проигнорирует его и выведет текст так, будто тег отсутствует.
- Порядок тегов. Не стоит забывать своеобразной иерархии вложенности тегов. Так, <title> должен “лежать” в контейнере <head>. Обязательно проследите за тем, чтобы теги находились в правильном месте. В случае с тегами, равнозначными в иерархии связи, последовательность не так важна. К примеру, если поменять местами <meta> и <title> ничего критичного не произойдет.
- Закрытие тега. У закрывающегося тега есть три состояния:
- Обязательное закрытие тега.
- Закрытие тега не требуется.
- Закрытие тега не обязательно.
Несмотря на это, рекомендуется закрывать подобные теги.
Атрибуты тегов
Атрибуты нужны для того, чтобы расширить возможности тех или иных тегов, а также обеспечит более гибкое управление контейнерами. Если для тега не добавлен допустимый атрибут, браузер использует значение по умолчанию.
Что касается формата атрибутов, то каждый из них относится к определенному типу (текст, путь к файлу, число и т.д.), который непременно стоит учитывать в ходе написания атрибута. Например:
|
<p><img src="images/image.png" alt="Первый заголовок" width="300" height="91"></p> |
В этой строке тег <img> “ответственен” за добавление изображения на сайт, а атрибуты width и height задают ширину и высоту изображения.
