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

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

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

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

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

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


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

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

Понятие тэга HTML-страницы

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

Рассмотрим пример оформления заголовка первого уровня. Текст, захваченный тегом <h1>, в браузере выведется большим и жирным шрифтом.

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

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

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

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

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

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

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

Понятие элемента HTML-страницы

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

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

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