HTML (HyperText Markup Language) или язык гипертекстовой разметки был изобретён в 1989 году Тимом Бернерсом-Ли. В основу языка легла идея специальными ключевыми словами обозначать, как браузеру следует отображать текст, в какое место вставить графику или мультимедиа.
Разметка — это правила поведения или указания к действию, представленные в виде специальных знаков.Проще и быстрее всего по каналам связи передавать текстовую информацию, так как она легко кодируется, мало весит и, соответственно, быстро скачивается. Поэтому все веб-странички — это простые текстовые документы, в них на самом деле нет ни одного рисунка или видеоролика. Нужно разметить документ, то есть специальными знаками указать, каким образом разбить текст на строки и абзацы, какой фрагмент текста должен быть выделен специальным цветом или шрифтом, в каком месте страницы нужно вставить рисунок или видео. Для того чтобы ключевые слова можно было отличить от основного текста, их записывают в угловых скобках "<" и ">".
Если в тексте необходимо оформить какой-то отдельный фрагмент, как в нашем примере, то применяются парные теги, их всегда два: открывающий или начальный тег указывает, где начинается соответствующее оформление, а закрывающий или конечный тег — где это оформление заканчивается. Причём конечный тег отличается от начального только тем, что перед его именем ставится знак / (слеш). В начальном теге также могут быть указаны некоторые атрибуты, в конечном теге атрибуты никогда не указываются. Есть также непарные теги, например, для указания места, в котором должна появиться картинка. Подробнее мы рассмотрим теги языка HTML чуть позже. Что такое HTML-документ? По сути это обычный текстовый документ, который несёт в себе информацию о том, как должна быть размечена веб-страничка. Для того чтобы браузер понял, что это не просто текст, а инструкция для него, такому файлу присваивают расширение .html. Каждый HTML-документ состоит из двух разделов: заголовка — содержимое элемента <head> и содержательной части — содержимое <body>. В голове находится служебная информация, которая необходима браузеру для правильного отображения содержимого страницы, и внешний заголовок, в нём обычно пишут краткое название страницы, и он отображается в заголовке окна браузера. А в теле размещается основной код, который определяет внешний вид страницы, отображаемой в браузере.
<!DOCTYPE html> — это объявление типа документа. Раньше типы документов
использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась «правильной».
<!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. Теги <html></html> определяют начало и конец HTML-документа. Всё, что находится за пределами этого элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Теги <head></head> ограничивают головную часть документа, которая содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введённая в этом
элементе информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.Необязательным элементом раздела <head> является элемент <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие
свойства метаданных. В нашем примере этот элемент устанавливает в качестве символьной кодировки для документа utf-8, который включает большинство символов из всех известных человечеству языков. Теперь страница сможет отобразить любой текстовый контент.
В теги <title></title> заключается внешний заголовок или название страницы, этот элемент является обязательным элементом раздела <head>. Текст, размещённый внутри элемента <title>, отображается в строке заголовка браузера. А вот всё, что мы видим в браузере, размещается в блоке, ограниченном тегами <body></body>. Он содержит весь контент, который браузер показывает посетителям страницы. Таким образом, чтобы веб-страница могла «жить» в сети Интернет, у неё должна быть голова (<head>),
в которой хранятся специальные «знания», тело (<body>), которое определяет внешний вид, ну и бейдж с именем (<title>), который сообщает всем, как эту страничку «зовут».