HTML (HyperText Markup Language) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в виде набора абзацев, списка маркированных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам базовое представление о HTML и его функциях.
Итак, что такое HTML?
HTML — это язык разметки, который определяет структуру вашего контента. HTML состоит из серии элементов, которые вы используете для вложения различных частей контента, чтобы придать ему определенный вид или действие определенным образом. Прилагаемые теги могут создавать гиперссылку на слово или изображение в другом месте, выделять слова курсивом, увеличивать или уменьшать шрифт и так далее. Для примера возьмем https://soft-4-free.ru/web-razrabotka/63-html-kod-prostejshego-mini-chata.html следующую строку контента:
Мой кот очень сварливый
Если бы мы хотели, чтобы строка выделялась сама по себе, мы могли бы указать, что это абзац, заключив его в теги paragraph:
<p>My cat is very grumpy</p>
Анатомия HTML-элемента
Давайте рассмотрим этот элемент paragraph немного подробнее.
Основными частями нашего элемента являются следующие:
- Открывающий тег: он состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие угловые скобки. Здесь указывается, где начинается элемент или начинает вступать в силу — в данном случае, где начинается абзац.
- Закрывающий тег: это то же самое, что и открывающий тег, за исключением того, что он включает косую черту перед именем элемента. Здесь указывается, где заканчивается элемент — в данном случае, где заканчивается абзац. Неспособность добавить закрывающий тег является одной из стандартных ошибок начинающих и может привести к странным результатам.
- Содержимое: Это содержимое элемента, которое в данном случае является просто текстом.
- Элемент: Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят следующим образом:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите отображать в реальном содержимом. Здесь class имя атрибута и editor-note значение атрибута. class Атрибут позволяет присвоить элементу неуникальный идентификатор, который можно использовать для таргетинга на него (и любые другие элементы с тем же class значением), с информацией о стиле и другими параметрами. Некоторые атрибуты не имеют значения, например required.
Атрибуты, задающие значение, всегда имеют:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- За именем атрибута следует знак равенства.
- Значение атрибута заключено в открывающие и закрывающие кавычки.
Примечание: Простые значения атрибутов, которые не содержат пробелов ASCII (или каких-либо символов " ' ` = < >), могут оставаться без кавычек, но рекомендуется заключать в кавычки все значения атрибутов, поскольку это делает код более последовательным и понятным.
Элементы вложенности
Вы также можете помещать элементы внутри других элементов — это называется вложенностью. Если бы мы хотели заявить, что наш кот очень сварливый, мы могли бы заключить слово «very» в <strong> элемент, что означает, что это слово должно быть сильно подчеркнуто:
<p>My cat is <strong>very</strong> grumpy.</p>
Однако вам необходимо убедиться, что ваши элементы правильно вложены. В приведенном выше примере мы сначала открыли <p> элемент, затем <strong> элемент; следовательно, мы должны сначала закрыть <strong> элемент, затем <p> элемент. Следующее неверно:
<p>My cat is <strong>very grumpy.</p></strong>
Элементы должны открываться и закрываться правильно, чтобы они четко находились внутри или снаружи друг друга. Если они пересекаются, как показано выше, то ваш веб-браузер попытается наилучшим образом угадать, что вы пытались сказать, что может привести к неожиданным результатам. Так что не делайте этого!