Основы HTML-разметки страниц. В чем различия понятий тэг и элемент?

основы html-разметки страниц. в чем различия понятий тэг и элемент?

Основы разметки документа

В своей жизни вы не раз сталкивались со структурированными документами. Не просто сталкивались с ними, но и создавали. Вспомните, писали ли вы когда-нибудь заявление на отпуск, заключали договор с банком, работали над дипломом? Все из перечисленных документов имеют свою специфичную структуру, реквизиты или, выражаясь ближе к нашему предмету изучения, основы разметки. В заявлении на отпуск сначала должны быть указаны реквизиты компании, кому оно направлено и только затем заголовок и содержание. Такое составление документов обусловлено правилами делопроизводства.

Основы HTML-разметки — это правила составления документов, аналогичные делопроизводству, но применительно к веб-страницам. Они обязуют нас использовать специальный синтаксис. Он включает в себя элементы, теги и ряд других понятий, которые мы будем изучать далее.

Необходимость использования основного синтаксиса HTML-разметки обусловлена средой существования веб-страницы. Если вы составляете заявление от руки, то заголовок напишете большими прописными буквами, и человек, принявший его, сразу поймет, что это заголовок. Как быть с браузером? Он не человек и не поймет, как отобразить тот или иной элемент. Вы должны явным образом сообщить ему, как это сделать с помощью HTML.


Рис1. Разметка заявления на отпуск с помощью HTML

Из рисунка видно, что мы взяли заявление стандартной формы и обернули некоторые его части в HTML-теги. Важно понимать, что документы или веб-страницы бывают очень сложными. Они могут содержать разнообразные элементы дизайна.

Заметка
Указанные на рисунке теги мы будем разбирать подробно, далее в учебном курсе. Если вы не понимаете для чего нужен какой-либо из них и как вообще это работает, не расстраивайтесь. Все еще впереди.

Что такое тэг HTML-страницы?

Тег — это структурная единица разметки. Он описывает одну сущность, которую обрамляет. HTML-тег начинается с символа «<» за которым идет его имя и заканчивается символом «>».

Давайте рассмотрим пример с оформлением заголовка первого уровня. Текст, обрамленный данным HTML-тегом, в браузере выведется большим и жирным шрифтом.

<h1>Заголовок первого уровня</h1>

Мы видим, что тег имеет открывающую часть <H1> и закрывающую </H1>. Закрывающая часть отличается лишь тем, что сразу за символом «<» стоит символ косой черты «/». Закрывающий HTML-тег нужен, чтобы явным образом сообщить браузеру, где находится конец описываемой сущности. Если не указать закрывающий тег там, где это требуется, браузер может исковеркать отображение страницы.

Существуют теги, описывающие сами себя, они ничего не обрамляют и их не нужно закрывать. Примером является <hr>, который выведет горизонтальную черту вместо себя.

<p>Обычный абзац под которым выводится сплошная черта</p>
<hr>

Теги могут быть вложенными друг в друга. Например, <em> внутри <h1>. <em> заставит вывести обрамленный текст курсивом. Используя вложенные друг в друга теги, вы суммируете их эффекты. Пример, приведенный ниже, сделает текст крупным, жирным и курсивным.

<h1><em>Курсивный заголовок первого уровня</em></h1>

Важно понимать, что тег должен быть закрыт на том же уровне вложенности, на котором и открыт. HTML-разметка «<h1><em>Текст</h1></em>» не правильна и скорее всего, приведет к тому, что браузер исковеркает отображение данного элемента.

Что такое элемент HTML-страницы?

Элемент — это сущность, описываемая тегом. Тэг является своего рода знаком препинания в предложении, а HTML-элемент его смысловой нагрузкой. Элементы имеют свои свойства, атрибуты и значения.

Многие часто путают определения тэгов и элементов. Как правило, говоря «заголовок первого уровня» или «горизонтальная строка», вы имеете в виду не сами открывающие и закрывающие теги, а что-то более существенное, т. е элемент HTML-документа.

Последние публикации