Введение в HTML
HTML (Hyper Text Markup Language — язык разметки гипертекста) — это язык разметки, используемый для создания веб-страниц.
Рассмотрим, что означает каждое из слов, входящих в аббревиатуру HTML.
Гипертекст — это форматированный электронный текст, который содержит гиперссылки. Эти ссылки позволяют пользователям по одному нажатию на них переходить на другие электронные документы. Таким образом, гипертекст создаёт связи между различными электронными документами.
Разметка — это описание содержимого и структуры документа. Она позволяет определять, какая часть текста является абзацем, заголовком, списком, таблицей и т. д. Это делается с помощью языковых средств HTML.
Язык разметки подразумевает, что для описания структуры содержимого документа используется специальный язык с собственным синтаксисом, определяющим правила разметки. HTML позволяет задавать только структуру и не позволяет программировать алгоритмы, поэтому HTML является языком разметки, а не программирования.
Зачем нужен HTML?
Основное назначение HTML как языка разметки — создание структуры содержимого веб-страницы и его семантического описания (смыслового значения).
Без использования HTML веб-страница была бы просто сплошным потоком текста, без какого-либо форматирования: без отступов, заголовков, абзацев, списков и т. д. Чтобы стало понятнее, рассмотрим это на примере.
Допустим у нас есть обычный текстовой документ с таким содержимым (обычный текст):
Напитки в нашем кафе
Мультифрукт — 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктейль — 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.Если сохранить этот текст как HTML-документ и открыть его в браузере, он будет выглядеть как сплошной поток текста:
Результат
Напитки в нашем кафе Мультифрукт — 100р. Фруктовый напиток, содержащий апельсиновый и ананасовый соки. Молочный коктейль — 150р. Сливочное мороженое, перемешанное с мякотью фруктов.
Добавим HTML-разметку для структурирования контента (содержимого):
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Летнее меню</title>
</head>
<body>
<h1>Напитки в нашем кафе</h1>
<h3>Мультифрукт — 100р.</h3>
<p>Фруктовый напиток, содержащий апельсиновый и
ананасовый соки.</p>
<h3>Молочный коктейль — 150р.</h3>
<p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
</body>
</html>Теперь этот документ, открытый в браузере, будет отображаться как структурированная страница с заголовками и абзацами:
Результат
Напитки в нашем кафе
Мультифрукт — 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктейль — 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
Таким образом, HTML позволяет нам создавать структурированные, понятные и удобные для просмотра и чтения веб-страницы.