Общие понятия

HTML (от англ. HyperText Markup Language — язык гипертекстовой разметки) использует систему разметки, позволяющую вставлять элементы описывающие содержимое и его и тип. Разметка означает, что HTML объявляет, что представлено, но не как представлено. Визуальное представление определяются каскадными таблицами стилей (CSS) и реализуются браузерами.

Все еще существующие элементы, которые позволяют описать вид, например, font, полностью устарели и не должны использоваться.

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

Версия Спецификация Дата
1.0 нет 01.01.1994
2.0 RFC 1866 24.11.1995
3.2 W3C: HTML 3.2 Спецификация 14.01.1997
4.0 W3C: HTML 4.0 Спецификация 24.04.1998
4.01 W3C: HTML 4.01Спецификация 24.12.1999
5 W3C: HTML 5.0 Спецификация 28.10.2014
5.1 W3C: HTML 5.1 Спецификация 01.11.2016
5.1-1 W3C: HTML 5.1 2nd Edition 03.11.2017

Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом. Сам же текст между тегами — содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.
Таким образом, элемент обычно элемент имеет вид:

 <tag> ... содержание ... </tag>

Нужно различать элементы и теги.
Элементы: video, audio, table, footer.
Теги: <video>, <audio>, <table>, <footer>, </html>, </body>.

Тег (от англ. tag — именованная метка). В HTML — это специальное зарезервированное слово, заключённое в угловые скобки (например, <div>). Внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <BODY>, а <body>.Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.

Обычно используются парные теги — открывающий, или начальный, и закрывающий, или конечный. Возможно также применение одиночного тега. Например, тег отступа абзаца может оформлять абзац между тегами <p> и </p>, а может в одиночной форме до следующего первого попавшегося тега <p>.
Бывают и непарные (одиночные) теги. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то предопределенную функцию. Например, тег <br> устанавливает перенос текста на следующую строку.

Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи. Элементы должны быть строго вложенными друг в друга, «перехлёст» элементов недопустим:

  • неправильно: <i><b>Text</i></b>
  • правильно: <b><i>Text</i></b>

Распространённое заблуждение, что HTML разрешают «перехлёст» элементов, основано на нарушающем стандарты поведении браузеров, пытавшихся «исправлять» ошибки разметки по собственным алгоритмам.
Однако HTML допускают применение ряда сокращенных синтаксических конструкций, в том числе необязательные закрывающие и даже открывающие теги (автоматически достраиваемые при разборе документа на основе указанной схемы документа и текущего контекста). В XML, напротив, все теги должны быть открыты и закрыты явным образом, что значительно упрощает алгоритм его разбора и снижает требования к аппаратному обеспечению для него.

У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности и позволяющие более гибко управлять содержимым. Они записываются в виде сочетания: имя атрибута-значения, причём текстовые значения заключаются в кавычки. Так тег <img> добавляет на веб-страницу рисунок, а его атрибут src указывает адрес изображения, а атрибут width задает ширину изображения в пикселах:

<img src="../img/pic.png" width="100px">

Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, например атрибут disabled.

Для создания простой HTML-страницы подойдет любой текстовый редактор. Важно сохранить страницу с расширением .html или .htm. Например:

<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="UTF-8">
   <title>Привет!</title>
 </head>
 <body>
   <h1>Hello World!</h1>
   <p>Это простой абзац.</p>
 </body>
</html>

В этом примере используются теги:

Тег Описание
<!DOCTYPE> Определяет версию HTML, используемую в документе. В данном случае это HTML5. Дополнительную информацию см. В разделе «Doctypes».
<html> Разметка страницы начинается с этого тега. После тега закрытия (</html>) не должно быть ничего. Атрибут lang объявляет основной язык страницы с использованием кодов языка ISO (ru для русского). Дополнительную информацию см. В разделе «Язык контента».
<head> Открывает раздел заголовка, который не отображается в главном окне браузера, но содержит информация о документе HTML, называемую метаданными. Этот раздел также может содержать импорт из внешних стилей и скриптов. Закрывающий тег </head>.
<meta> Предоставляет браузеру некоторые метаданные о документе. Атрибут charset объявляет кодировку символов. Современные HTML-документы всегда должны использовать UTF-8, хотя это не является обязательным требованием. В HTML тег <meta> не требует закрывающего тега.
<title> Название страницы. Текст, заключенный между начальным и конечным тегом <title>, будет отображаться на вкладке страницы или в строке заголовка браузера
<body> Открывает часть документа, отображаемую для пользователей, т.е. весь видимый или слышимый контент страницы. После закрытия тега </body> содержимое не должно добавляться.
<h1> Заголовок 1 уровня . Дополнительную информацию см. В разделе «Заголовки».
<p> Описывает обычный абзац