Введение в HTML | Учебник W3Docs

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). Это стандартный язык разметки, используемый для создания веб-страниц и приложений, отображаемых в браузере. Разработанный в начале 1990-х годов, он объединяет гипертекст (определяющий ссылки между веб-страницами) и разметку (описывающую структуру контента с помощью тегов).

HTML — это не язык программирования: в нём нет логики или вычислений. Вместо этого он описывает структуру: какие части страницы являются заголовками, абзацами, списками, ссылками или изображениями. На типичной веб-странице совместно работают три технологии:

HTML обеспечивает структуру и контент (эта глава).
CSS управляет представлением — цветами, макетом, шрифтами.
JavaScript добавляет поведение и интерактивность.

Теги HTML используются для определения элементов HTML. Элемент HTML обычно состоит из открывающего и закрывающего тегов, между которыми размещается содержимое. Браузеры читают теги, создают документы HTML и отображают их содержимое на экране. К основным тегам HTML относятся <html>, <head>, <title>, <body>, <h1> — <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> и многие другие.

Ваш первый HTML-документ

Вот полная минимальная HTML-страница. Введите её в любом текстовом редакторе HTML, сохраните файл с расширением .html и откройте в любом браузере — вы увидите заголовок и абзац.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Когда вы открываете этот файл, браузер разбирает разметку (читает теги и строит дерево элементов), а затем отрисовывает её (выводит результат на экран). Тег <h1> становится крупным заголовком, а <p> — обычным абзацем — угловые скобки сами по себе не видны, видны только их результаты. Позже добавьте CSS и JavaScript для стилизации и анимации того же контента.

Версии 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	2014

Несколько пояснений к таблице. HTML 4.01 (1999) оставался доминирующей версией около десяти лет, и большая часть веба была построена на нём. XHTML 1.0 (2000) переформулировал HTML с использованием более строгих правил XML — например, все теги должны были быть закрыты и написаны строчными буквами — однако его строгость так и не прижилась в повседневной разработке. HTML5 был опубликован как стабильная рекомендация W3C в 2014 году (более ранняя веха 2012 года была лишь черновым снимком) и является той версией, которую вы используете сегодня.

Начиная с 2014 года HTML больше не выпускается в виде отдельных пронумерованных версий. Вместо этого он поддерживается как HTML Living Standard организации WHATWG — единая спецификация, которая непрерывно обновляется по мере принятия новых возможностей. На практике именно это и называют «HTML» сегодня: никакого «HTML6» не предвидится, только развивающийся стандарт. Когда люди сейчас говорят «HTML5», они обычно имеют в виду эту современную, живую версию языка.

Основные понятия: элементы, теги и атрибуты

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

Теги HTML

Теги HTML используются для структурирования содержимого веб-сайта (текста, гиперссылок, изображений, медиафайлов и т. д.). Теги не отображаются в браузерах — они лишь «указывают» браузерам, как показывать содержимое веб-страницы.

В HTML насчитывается более 100 тегов, и вы можете найти их в нашем учебнике по HTML.

Теги HTML записываются в угловых скобках (например, <html>).

Большинство тегов HTML идут парами, например теги <p> </p>. Первый тег в паре называется открывающим тегом, второй — закрывающим. Информация записывается между открывающим и закрывающим тегами.

Однако существуют непарные, или пустые теги, у которых есть только открывающий тег (например, <img>).

Рассмотрим пример.

Если нужно определить абзац (который является элементом), следует использовать тег <p>. Содержимое абзаца записывается между открывающим (<p>) и закрывающим (</p>) тегами.

Пример

Приведённая ниже разметка помещает один абзац внутрь минимальной страницы:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Paragraph example</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

Браузер скрывает сами теги <p> и </p> и отображает только текст между ними — «This is a paragraph.» — как блок основного текста.

Атрибуты HTML

Атрибуты HTML добавляются к элементу для предоставления дополнительной информации о нём. Атрибуты записываются внутри открывающего тега и имеют синтаксис name="value": имя указывает, что задаётся, а значение (в кавычках) — чему это равно.

Например, тег <img> использует атрибут src для указания пути к файлу изображения, width и height — для задания его размеров, а alt — для предоставления альтернативного текста для программ чтения с экрана и на случай, если изображение не загрузится:

<img src="logo.png" width="200" height="100" alt="Company logo">

Здесь для одного элемента задано четыре атрибута. Один элемент может содержать столько атрибутов, сколько нужно, разделённых пробелами. Подробнее можно узнать в главе Атрибуты HTML.

Структура HTML-документа

Объявление <!DOCTYPE html> указывает версию HTML, используемую в документе. Каждый HTML-документ должен начинаться с этого объявления, чтобы браузеры могли отображать страницу в соответствии со стандартами HTML.

Для каждой версии HTML существует несколько типов <!DOCTYPE>.

Всё содержимое веб-страницы записывается между тегами <html> </html>. Элемент <html> сообщает браузерам, что это HTML-документ.

Элемент <head> содержит метаданные (данные о HTML-документе): кодировку символов, заголовок документа, стили и т. д. Эти данные не отображаются для посетителей.

Внутри <head> наиболее часто копируемым тегом является мета-тег viewport. Добавление <meta name="viewport" content="width=device-width, initial-scale=1"> сообщает мобильным браузерам, что ширина страницы должна соответствовать ширине устройства, а не масштабироваться с уменьшением макета для настольных компьютеров — без него страница будет выглядеть миниатюрной на телефонах.

Элемент <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 и какова его основная роль согласно этой главе?

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