Содержание
Два термина, которые вы услышите в веб-дизайне, это HTML-тег и HTML-элемент.
HTML-тег — это указание веб-браузеру о том, как должна отображаться веб-страница, но HTML-элемент является отдельным компонентом HTML. Элементы HTML создаются с использованием тегов HTML.
Хотя эти два термина похожи по смыслу, на самом деле они не являются синонимами. Так в чем же сходство с этими двумя терминами? Короткий ответ: теги и элементы относятся к разметке, используемой для написания HTML. Например, вы можете сказать, что вы используете
тег для определения абзаца или элемента для создания ссылок.
Многие люди используют термины тег и элемент взаимозаменяемо, и любой веб-дизайнер или разработчик, с которым вы разговариваете, поймет, что вы имели в виду, но реальность такова, что между этими двумя терминами есть небольшая разница.
HTML-теги
HTML является языком разметки, что означает, что он написан с помощью кодов, которые могут быть прочитаны человеком, без необходимости его предварительной компиляции. Другими словами, текст на веб-странице «помечен» этими кодами, чтобы дать веб-браузеру инструкции о том, как отображать текст. Эти теги разметки сами являются тегами HTML.
Когда вы пишете HTML, вы пишете теги HTML. Все HTML-теги состоят из нескольких отдельных частей, в том числе:
- Знак меньше чем <
- Слово или символ, который определяет, какой тег пишется
- Любое количество необязательных атрибутов HTML в форме пары имя = «значение»
- И, наконец, знак больше, чем>
Например, вот некоторые теги HTML:
Это все открывающие теги HTML, без каких-либо дополнительных атрибутов. Эти теги представляют:
- определяет абзац
- определяет страницу как HTML
- определяет деление
Ниже приведены также теги HTML:
Все эти примеры включают атрибуты, которые были добавлены к открывающим тегам HTML.
- неупорядоченный список, включающий атрибут ID
- У подразделения есть атрибут класса
- Элемент привязки или ссылки содержит атрибут «href»
- Тег изображения с атрибутом «src»
Для тегов привязки и изображения атрибуты на самом деле не являются обязательными, они необходимы для правильного отображения этих тегов. Вы должны указать ссылку, куда идти (что делает «href») и изображение, которое нужно показать (что обеспечивает атрибут «src»).
Что такое элементы HTML?
Согласно спецификации W3C HTML, элемент является базовым строительным блоком HTML и обычно состоит из двух тегов: открывающего и закрывающего. До сих пор мы рассматривали только открывающие теги, которые запускают элементы. Чтобы завершить этот элемент, вы пишете соответствующие закрывающие теги.
Например, для элемента абзаца вы пишете это:
Это состоит из открывающего тега, который мы видели недавно, а также закрывающего тега —
. Закрывающие теги — это на самом деле просто повторяющийся открывающий тег, но с прямой косой чертой, добавляемой сразу после символа «меньше».
Почти все элементы HTML имеют открывающий тег и закрывающий тег. Эти теги окружают текст, который будет отображаться на веб-странице. Например, чтобы написать абзац текста, вы пишете текст для отображения на странице, а затем окружаете его следующими тегами:
Здесь вы можете написать текст абзаца, который вы хотели бы отобразить на веб-странице.
Некоторые элементы HTML не имеют закрывающего тега. Они называются «пустыми элементами». Иногда их также называют «одиночными» или «пустыми» элементами. Пустые элементы просты в использовании, потому что вам нужно всего лишь добавить один тег на веб-страницу, и браузер будет знать, что делать. Например, чтобы добавить один разрыв строки на страницу, вы должны использовать
тег.
Другим распространенным элементом, который включает только открывающий тег, является элемент «изображение». Например:
Мы видели этот пример ранее, но для этого элемента изображения нет закрывающего тега. Браузер просто заменит этот код изображением, на которое ссылается атрибут «href». В этом случае это будет «logo.png.»
В общем, когда мы ссылаемся на элемент или тег HTML, мы будем использовать термин «элемент», чтобы указать, что мы ссылаемся на все части элемента (как открывающий, так и закрывающий теги). Мы используем только «тег», когда ссылаемся только на один или другой. Это правильное использование этих двух терминов, и мы призываем вас использовать их правильно, но просто знайте, что если вы немного поскальзываетесь и обмениваетесь ими, вас все равно поймут ваши новые коллеги по веб-разработке!
