Основные теги HTML, структура html страницы

HTML(HyperText Markup Language) – это язык разметки гипертекста. Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag — именованная метка.

Гипертекст – это документ, разметка которого выполнена с помощью языка HTML. Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».

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

Рассмотрим структуру простого HTML документа

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

Строка <html> называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:

Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов: <html></html>
Непарные — теги, которые не закрываются. Пример: <br>

Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!

Считается хорошим тоном знать и уметь оперировать большим количеством тегов. Этого не нужно пугаться, всё запомнится и уложится в голове, как только вы начнёте применять свои знания на практике. С основными тегами мы познакомимся в ходе нашего дальнейшего обучения. А вообще, в интернете сейчас доступно огромное количество справочников по HTML, где вы сможете найти актуальную информацию, ведь прогресс не стоит на месте, а языки программирования стремительными тепами развиваются и практически каждые пол года выходят обновления. Также, минимум тегов, которые будут необходимы нам в ходе обучения вы найдете в нашей шпаргалке

Рассмотрим структуру HTML документа:

<!DOCTYPE html> — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5.
<HTML></HTML> — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
<head></head> -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
<body></body> — все что отображается на странице, пишется в теге body.

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

 <meta charset="UTF-8">

1	<meta charset="UTF-8">

charset="UTF-8" — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.

Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.

Вопросы для самоконтроля

Что такое гипертекст?
В чем состоит необходимость использования HTML?
Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
Какие виды атрибутов вам известны?
Что такое теги? Чем они отличаются от атрибутов?
Какие теги обязательно должна содержать HTML страница?

Текст урока разработан совместно с Каменщик М.