HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. HTML не является языком программирования — это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. В интернете HTML-страницы передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Текстовые документы, содержащие разметку на языке HTML имеют расширение .html или .htm

Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Язык HTML не сложный и его можно выучит всего за пару дней. В процессе продвижения сайтов, зачастую SEO-специалистам часто приходится редактировать HTML код страниц.

Список основных тегов языка HTML

Основные теги
<html></html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин таких как: <title>, <meta>, <script>, <link>, <style>
<body></body> Представляет тело документа (содержимое, не относящееся к метаданным документа).

Теги оглавления
<title></title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Правильное написание тега title существенно влияет на продвижение сайта в поиске.
<description></description> Содержит общее описание HTML-документа отдельной страницы. Написанный текст в мета теге Description отображается в результатах поиска поисковых машин.

Атрибуты тела документа
<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в стандарте RGB – пример: FFFF00 – желтый цвет.
<body text=?> Устанавливает цвет текста документа, используя значение цвета в стандарте RGB – пример: 00ff00 – зеленый цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в стандарте RGB – пример: 00FF00 – зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок, на которыхх вы уже побывали, используя значение цвета в виде стандарте RGB – пример: 333333 – темно-серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста
<pre></pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<h1></h1> Создает самый большой заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<i></i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<tt></tt> Создает текст – имитирующий стиль печатной машинки.
<cite></cite> Используется для указания источника цитирования. Отображается курсивом.
<em></em> Выделяет важные фрагменты текста, отображая их курсивом.
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки
<a href=”URL”>ТЕКСТ</a> Создает гиперссылку на другие документы или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ – текст ссылки.
<a href=”URL”>
< img src=”imgURL” > </a>		 Создает гиперссылку на рисунок, находящийся по адресу imgURL.
“URL” = “links/main.htm” Адрес документа main.htm, находящегося в локальной папке links данного компьютера.
“URL” =
“http://www.rambler.ru”		 Ссылка на ресурс, находящийся на удаленном компьютере. В адресе присутствуют: программа связи с удаленным компьютером http (HyperText Transfer Protocol, разделители :// и интернет (IP) адрес искомого ресурса (в данном случае поискового сервера Rambler).
<a href=”mailto:EMAIL”>
</a>		 Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.
<a name=”NAME”></a> Отмечает часть текста как место перехода по гипперссылке в документе.
<a href=”#NAME”></a> Создает гиперссылку на помечанную часть текущего документа.

Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
<br> Вставляет перевод
строки.
<blockquote>
</blockquote>		 Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.

Штанга <dt>

Основной снаряд в тяжелой атлетике. Состоит из стального грифа (стержня) со втулками на концах и свободно надевающихся металлических дисков. <dd>
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Тег, используемый для форматирования больших блоков текста HTML документа. Часто используется в таблицах стилей

Использование кодов символов и специальных знаков в документе HTML
Код в документе HTML Выводится браузером на экран
&#32;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#60;
&#61;
&#62;
&#169;
&#171;
&#177;
&#185;
&#187;
&#197;
&nbsp;
&lt;
&gt;
&quot;		 пробел
!
”
#
$
%
&
<
=
>
©
«
±
¹
»
Å
Неразрывный пробел
<
>
“

Графические элементы
<img src=”name”> Добавляет изображение в HTML документ
<img src=”name” align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src=”name” border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселях или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.

Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. (здесь right)
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

Фреймы
<frameset></frameset> Предваряет тег <body> в документе, содержащем фреймы;
<frameset rows=”value,value”> Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов.
<frameset cols=”value,value”> Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<frame> Определяет единичный фрейм или область в таблице фреймов.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает фреймы.

Атрибуты фреймов
<frame src=”URL”> Определяет какой из HTML документов будет показан во фрейме.
<frame name=”name”> Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм, или область из других фреймов.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки во фрейме; значение value может быть “yes,” “no,” или “auto”. Значение по умолчанию для обычных документов – auto.
<frame noresize> Препятствует изменению размеров фрейма.

Формы
Важно заметить, что для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML создает только внешний интерфейс формы.
<form></form> Создает формы
<select multiple name=”NAME” size=?></select> Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name=”NAME”></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню
<textarea name=”NAME” cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type=”checkbox” name=”NAME”> Создает checkbox. За тегом следует текст.
<input type=”radio” name=”NAME” value=”x”> Создает radio кнопку. За тегом следует текст.
<input type=text name=”foo” size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type=”submit” value=”NAME”> Создает кнопку “Принять”
<input type=”image” border=0 name=”NAME” src=”name.gif”> Создает кнопку “Принять” – для этого используется изображение
<input type=”reset”> Создает кнопку “Отмена”