HTML Introduction
HTML расшифровывается как HyperText Markup Language. Это язык разметки, используемый для создания веб-страниц и приложений, которые могут отображаться в интернете. Разработанный в 1990-х годах, он объединяет гипертекст (который определяет ссылки между веб-страницами) и разметку (которая определяет структуру контента).
Теги HTML используются для определения элементов HTML. Элемент HTML обычно состоит из начального (открывающего) тега и конечного (закрывающего) тега, между которыми вставляется контент. Теги HTML применяются для создания документов HTML и отображения их содержимого в веб-браузерах. Некоторые из базовых тегов HTML включают <html>, <head>, <title>, <body>, <h1>–<h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> и многие другие.
Версии HTML
HTML был впервые разработан британским физиком Тимом Бернерсом-Ли в 1990 году. С тех пор появилось множество версий HTML.
| Версия | Год |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
Основные концепции HTML
Элементы, теги и атрибуты являются базовыми концепциями в HTML.
Элемент HTML — это основная структурная единица веб-страницы. Теги HTML используются для определения элементов HTML, а атрибуты предоставляют дополнительную информацию об этих элементах.
Теги HTML
Теги HTML используются для структурирования контента веб-сайта (текст, гиперссылки, изображения, медиа и т. д.). Теги не отображаются в браузерах, они лишь «указывают» браузерам, как показывать содержимое веб-страницы.
В HTML более 100 тегов, и вы можете найти их в нашем руководстве по HTML.
Теги HTML записываются в угловых скобках (например <html>).
Большинство тегов HTML идут парами, например теги <p> и </p>. Первый тег в паре называется начальным (открывающим) тегом, а второй — конечным (закрывающим) тегом. Информация записывается между открывающим и закрывающим тегами.
Однако существуют непарные, или пустые теги, которые имеют только открывающий тег (например, <img>).
Рассмотрим пример.
Если вам нужно определить абзац (который является элементом), вы должны использовать тег <p>. Содержимое абзаца следует записывать между открывающим (<p>) и закрывающим (</p>) тегами.
Пример
Это абзац между открывающим <p> и закрывающим </p> тегами.
Атрибуты HTML
Атрибуты HTML добавляются к элементу HTML для предоставления дополнительной информации о нём. Например, если вы определяете изображение с помощью тега <img>, вы можете использовать атрибуты src, height и width для указания его источника, высоты и ширины соответственно.
Структура документа HTML
Объявление <!DOCTYPE html> указывает версию HTML, используемую в документе. Каждый документ HTML должен начинаться с этого объявления, чтобы браузеры могли отображать страницу в соответствии со стандартами HTML.
Существует несколько типов <!DOCTYPE>, определённых для каждой версии HTML.
Весь контент на веб-странице записывается между тегами <html> и </html>. Элемент <html> используется для передачи информации браузерам о том, что это документ HTML.
Элемент <head> содержит метаданные (информацию о документе HTML), кодировку, заголовок документа, стили и т. д. Эти данные не отображаются для пользователей.
Элемент <title> отображает заголовок веб-сайта во вкладке браузера при загрузке страницы. Заголовок записывается между тегами <title> и </title>.
Элемент <body> содержит контент веб-страницы (текст, изображения, видео и т. д.). Контент записывается между тегами <body> и </body>.
Элементы заголовков содержат различные типы заголовков. Существует шесть уровней заголовков — <h1>–<h6>, где <h1> является самым важным, а <h6> — наименее важным тегом.
Элемент <p> содержит абзацы текста. Содержимое записывается между тегами <p> и </p>.
Пример
Введение в HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Результат
Чтобы начать писать код HTML для вашего веб-сайта, вам понадобится редактор. В следующей главе мы поговорим о редакторах HTML.
Практика
Что такое HTML и для чего он используется согласно данной веб-странице?