Электронный учебник "Основы HTML" дисциплина "Разработка, внедрение адаптация программного обеспечения отраслевой направленности"

                                HTML (от  англ.       HyperText Markup Language  — «язык гипертекстовой  разметки»)

                                —      стандартизированный язык разметки      документов во      Всемирной паутине

 . Большинство       веб-страниц содержат описание разметки на языке HTML (или  XHTML ). Язык HTML интерпретируется браузерами      ; полученный в результате интерпретации    форматированный текст отображается на экране монитора компьютера или мобильного устройства.  

Язык HTML является приложением SGML  (стандартного обобщённого языка разметки) и   соответствует международному стандарту ISO 8879.   

Язык XHTML  является более строгим вариантом HTML, он следует всем ограничениям   XML и, фактически, XHTML можно воспринимать как приложение языка XML к области   разметки гипертекста.  

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

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

Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста . Мультимедийные возможности были добавлены позже.   

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег < table> предназначен дл я создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.  

В середине 1990- х годов основные производители браузеров — компании  Netscape   и Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась  путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных      программ на языке  JavaScript      . Вебмастерам        приходилось  создавать несколько вариантов страниц или прибегать к другим ухищрениям. На какое-то время проблема потеряла актуальность по двум причинам:  

●      Из-за вытеснения браузером Internet Explorer  всех остальных браузеров.  Соответственно, проблема веб-мастеров становилась проблемой пользователей альтернативных браузеров.  

●      Благодаря усилиям производителей других браузеров, которые либо следовали стандартам W3C  (как  Mozilla  и  Opera ), либо пытались создать максимальную совместимость с Internet Explorer.  

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox  и другие браузеры на движке        Gecko ; Safari , Google       Chrome, Opera       и другие браузеры на движке   WebKit ).

Доля Internet Explorer на январь 2016 года составляет менее 15%^[16] .  

В современной практике существует возможность упростить разработку кросс-браузерных программ на языке JavaScript с помощью различных библиотек и фреймворков. Например, таких как jQuery , sIFR  и др.   

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение  .htm l или  .htm ), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие  приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс  для запроса  веб-страниц , их просмотра  (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день  браузерами являются Google Chrome , Mozilla Firefox , Opera , Internet Explorer  и  Safari   (см.:  Браузер#Рыночные доли).  

●      HTML 0.9;  

●      RFC 1866 — HTML 2.0, одобренный как стандарт  22 сентября 1995  года;  

●      HTML 3.2^[6]  — 14 января 1997  года;  

●      HTML 4.0^[7]  — 18 декабря 1997 года;   

●      HTML 4.01^[8]  (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999      года;  

●      ISO/IEC 15445:2000^[9]  (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000  года;  

●      HTML5^[10]  — 28 октября 2014  года;  

●      HTML 5.1 начал разрабатываться 17 декабря 2012 года^{[11] [12]} . Рекомендован к применению с 1 ноября 2016 года^[13] .  

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.  

Версия 3 была предложена Консорциумом Всемирной паутины  (W3C) в марте 1995 года и  обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул , поддержка  gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация   его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator  и  Mosaic .  

В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и не рекомендованные (англ.  deprecated ). В частности, тег

<font>, используемый для изменения свойств  шрифта , был помечен как устаревши й (вместо него рекомендуется использовать таблицы стилей CSS   ).  

В 1998  году Консорциум Всемирной паутины      начал работу над новым языком разметки,     основанным на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML       . Первая версия XHTML 1.0 одобрена в качестве Рекомендации  консорциума Всемирной паутины 26 января 2000  года.  

Планируемая версия XHTML 2.0  должна была разорвать совместимость со старыми   версиями HTML и XHTML, но 2 июля 2009  года Консорциум Всемирной паутины  объявил,      что полномочия рабочей группы XHTML2 истекают в конце 2009       года. Таким образом,  была приостановлена вся дальнейшая разработка стандарта XHTML

2.0^[14] .  

Основы HTML содержат основные правила языка HTML, описание структуры     HTML-страницы, отношения в структуре HTML-документа между элементами.  

.htm       l

HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с  подсветкой кода (Notepad++). HTML-документ имеет расширение .  

Язык HTML — язык тегов.       Теги  описывают структуру HTMLдокумента. Теги  оформляются угловыми скобками < имя тега>, между которыми прописываетс я имя тега.  

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

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

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

Практически все теги имеют атрибуты (глобальные, применяемые для всех  

HTML-элементов, и собственные), указываемые в формате атрибут="значение" .  

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

Атрибуты class      и  id применимы ко всем HTML-элементам, за исключение  м элементов, содержащих техническую информацию — < html>,  < head>, <meta>,  < title>, < style> и < script>. Каждому элементу можно присвоить   несколько значений clas s и только одно значение     id . Множественные значени   я classзаписываются через пробел,  < div class="nav top">. Значения  class  и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.  

Большинство тегов — парные, они состоят из начального       и  закрывающего  тегов. Начальный тег  показывает, где начинается элемент, закрывающийся —  где заканчивается. Закрывающий тег  образуется путем добавления слэша / перед именем тега: < имя тега>… < /имя тега>. Между начальным и  закрывающим тегами находится содержимое тега — контент.  

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег < input type="button" value="Кнопка"> создаст кнопку с текстом  Кнопка      внутри      .  

< p><i>Текст</p></i>

Теги могут вкладываться друг в друга, например, < p><i>Текст</i></p>. Пр  и вложении следует соблюдать порядок их закрытия (принцип «матрёшки»),  например, следующая запись будет неверной: .  

HTML-документ состоит из двух разделов — заголовка — между тегами  

<head>… < /head> и содержательной части — между тегами < body>… < /body>.  

Введение в HTML  

Быстрый старт Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность создания веб-страницы без последовательного изучения правил HTML. По крайней мере, вы сумеете убедиться, что создание веб-страниц достаточно простая штука. В примере 1.1 приведен несложный пример такого кода.  

Пример 1.1. Первая веб-страница HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6  

Чтобы посмотреть результат примера в действии, проделайте следующие шаги. 1. В  Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот). 2. Наберите или скопируйте код в Блокноте (рис. 1.1).  

Рис. 1.1. Вид HTML-кода в программе Блокнот  

3.            Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.  

Рис. 1.2. Параметры сохранения файла в Блокноте  

4.            Запустите браузер Internet Explorer (Пуск > Выполнить > набрать «iexplore» или

Пуск > Программы > Internet Explorer). 5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу. 6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.3.  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  

"http://www.w3.org/TR/html4/strict.dtd"> <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Моя первая веб-страница</title> </head>  

<body>  <h1>Заголовок страницы</h1>  <p>Основной текст.</p> </body> </html>

Рис. 1.3. Вид веб-страницы в окне браузера  

В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно примеру 1.1, расширение файла (должно быть html) и путь к документу.  

  

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения»  между элементами.      Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.  

Предок — элемент, который заключает в себе другие элементы. На рисунке 1   предком для всех элементов является < html>. В то же время элемент  <body>является предком для всех содержащихся в нем тегов:   < h1>,  < p>, <span>,  < nav> и т.д.   

< html>

< html>

Потомок — элемент, расположенный внутри одного или более типов  элементов. Например, < body> является потомком  , а элемент  < p> является потомком одновременно для < body> и  .  

Родительский элемент — элемент, связанный с другими элементами более   низкого уровня, и находящийся на дереве выше их. На рисунке 1 < html> является родительским только для < head> и  < body>. Тег  < p> является   родительским только для < span>.  

Дочерний элемент — элемент, непосредственно подчиненный другому  элементу более высокого уровня. На рисунке 1 только элементы < h1>,  < h2>, <p> и  < nav>являются дочерними по отношению к    < body>.  

Сестринский элемент — элемент, имеющий общий родительский элемент с   рассматриваемым, так называемые элементы одного уровня. На рисунке 1

<head>			и	< body>
h1>	,	<h2>		и	< p>

 — элементы одного уровня, так же как и элементы  < являются между собой сестринскими.      

Элемент <html> 

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов < html>...</html>. Все, что находится за пределами   тегов, не воспринимается браузером как код HTML и никак им не

manifest

и

xmlns

обрабатывается. Для элемента доступны атрибуты , а также  глобальные атрибуты .  

 Элемент <head> 

Раздел < head>...</head> содержит техническую информацию о странице:   заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.  

Для элемента доступны глобальные атрибуты .  

 Элемент <title> 

Обязательным тегом раздела < head> является тег       < title>. Текст, размещенный      внутри этого тега, отображается в строке заголовка веббраузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.  

Для элемента доступны глобальные атрибуты .  

 Элемент <meta> 

Необязательным тегом раздела < head> является одинарный тег  < meta>. С его  помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент < head> может содержать несколько элементов     < meta>, потому что в    зависимости от используемых атрибутов они несут различную информацию.  

<meta name="description" content="Описание содержимого страницы">

<meta name="keywords" content="Ключевые слова через запятую">  

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:  

<meta name="description" lang="ru" content="Описание содержимого страницы">  

<meta name="description" lang="en" content="Description"> <meta name="keywords" lang="ru" content="Ключевые слова через запятую">  

<meta name="keywords" lang="en" content="Keywords">  

С помощью тега < meta> можно запретить или разрешить индексацию  веб-страницы поисковыми машинами:  

Индексация и переход по ссылкам разрешены:  

<meta name="robots" content="index, follow">  

Индексация разрешена, переход по ссылкам запрещен:  

<meta name="robots" content="index, nofollow">  Индексация и переход по ссылкам запрещены:  

<meta name="robots" content="noindex, nofollow">  

refresh

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением :  

<meta http-equiv="refresh" content="30">  

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url :  

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">  

charset

Для элемента < meta> доступны атрибуты  ,  content ,  httpequiv ,  name , а также глобальные атрибуты .  

Атрибут	Описание, принимаемое значение
charset	Указывает кодировку символов для текущего HTML-документа:   <meta charset="UTF-8">
content	http-equiv Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом  или  name , в зависимости  от их значения.
http-equiv	Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:   content default-style указывает предпочтительный стиль для   использования на странице. Атрибут  должен содержать  идентификатор элемента <link>, который ссылается на таблицу         стилей CSS, или идентификатор элемента <style>, содержащего  таблицу стилей.   refresh указывает время в секундах до перезагрузки страницы          или время до перенаправления на другую страницу, если в

	content атрибуте                 после указания времени идет строка      "url=адрес_страницы".   Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:   <meta http-equiv="refresh" content="30">   Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:   <meta http-equiv="refresh" content="0; url=http://mail.ru/">
name	Ассоциируется со значением, содержащемся в атрибуте content charset . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv ,   или itemprop .   application-name указывает название веб-приложения,  используемого на странице. author указывает имя автора документа в свободном формате.    description определяет краткое описание к содержимому       страницы, например:   <meta name="description" content="Описание содержимого страницы">   generator указывает один из пакетов программного обеспечения,          используемого для создания документа, например:   <meta name="generator" content="WordPress 4.0"> .   keywords содержит список ключевых слов, разделенных       запятыми, соответствующих содержимому страницы, например:
	<meta name="keywords" content="Ключевые слова через запятую">.   Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не  было официально принято.

 Элемент <style> 

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

media

,

scoped

Для элемента доступны атрибуты ,  type , а также  глобальные  атрибуты.  

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

<style type="text/css">  .paper { width: 200px; height: 300px; backgroundcolor: #ef4444; color:

#666666; }  

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class( или id ) присвоить элементу соответствующее название:  

<div class="paper">  

...  

</div>  

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:   

<p style="color: #666666; background-color: #ef4444; padding: 20px;">  

Атрибут	Описание, принимаемое значение
media	Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type	Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">.

 Элемент <link> 

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например,

style.css

. Подключить файл со стилями к веб-странице можно двумя

@import url

способами: через директиву   

<!DOCTYPE html>  

<html>  

<head>  

<style>  

@import url(style.css);  

</style>  

<meta>  

<title> </title>  </head>  

с использованием элемента < link>. Элемент не требует закрывающего тега.   Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:  

<link rel="stylesheet" rel="nofollow ugc" target="_blank" href="style.css" type="text/css">  

media

Для элемента доступны атрибуты href ,  hreflang ,  ,  rel ,  type , а также  глобальные атрибуты .  

Атрибут	Описание, принимаемое значение
crossorigin	Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.   anonymous — в кросс-доменный запрос браузер автоматически          добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORSзаголовком   Access-Control-Allow-Origin: * (или имя домена вместо звёздочки),          то загрузка изображения будет заблокирована.   use-credentials — если сервер не предоставляет учётные данные Access-Control-Allow-Credentials: true   с помощью , то загрузка  изображения будет заблокирована.
href	Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang	Определяет язык текста в документе, на который идет ссылка.
media	Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.

rel

Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.   alternate — ссылка на тот же документ, но в другом формате  (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),   <link rel="alternate stylesheet" type="text/css" title="small_font" rel="nofollow ugc" target="_blank" href="small-font.css">.   <link rel="alternate" type="application/rss+xml" title="my_RSS" rel="nofollow ugc" target="_blank" href="index.xml">   <link rel="alternate" type="application/atom+xml" title="News" rel="nofollow ugc" target="_blank" href="/atom.xml?type=news">   archives — указывает на то, что документ по ссылке представляет          исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.   author ссылка на страницу об авторе документа или на страницу          с контактными данными автора.   bookmark ссылка на ближайшего предка статьи, являющегося          связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.   external используется для указания того, что страница на       которую ведет ссылка не являются частью данного сайта.   first указывает ссылку, ведущую на первый документ из  последовательности документов. help ссылка на документ со справкой.    icon определяет путь к иконке, которая будет использована для          текущего документа.

14

last указывает ссылку, ведущую на последний документ в      последовательности документов. license ссылка на сведения об авторских правах для документа.    next указывает, что этот документ является частью серии, и что          ссылка ведет на следующий документ в этой серии.   <link rel="next" rel="nofollow ugc" target="_blank" href="/next.html" type="text/html" title="Следующая страница">   nofollow указывает на то, что ссылка не одобрена автором      страницы или что ссылка носит коммерческий характер.   noreferrer указывает на то, что заголовок запроса клиента,  содержащий url источника запроса, не должен передаваться при          переходе по ссылке.   pingback указывает адрес пингбэк-сервера, что дает  возможность для блога автоматически оповещать сайты, ссылающиеся на него.   prefetch указывает, что следует заранее кэшировать файл, на  который ведет ссылка.   prev указывает, что этот документ является частью серии, и что          ссылка ведет на предыдущий документ в этой серии.   <link rel="prev" rel="nofollow ugc" target="_blank" href="/next.html" type="text/html" title="Предыдущая страница">   search указывает, что ссылаемый документ содержит интерфейс          поиска и связанных с ним ресурсов.   sidebar указывает, что ссылаемый документ, если это возможно,          будет показан в дополнительном контексте браузера, и

	некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.   stylesheet ссылка на внешний файл, который будет      использоваться в качестве таблицы стилей для данного документа.   tag указывает на то, что метка, на которую ведет гиперссылка,          относится к данному документу.   up указывает, что страница является частью иерархической  структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes	rel="icon" Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с  , и может        принимать следующий значения:   ширинахвысота — определяет список размеров, разделенных  пробелами, каждый размер должен быть в формате — ширинах высота (размеры иконки задаются в пикселях),  например:   <link rel="icon" rel="nofollow ugc" target="_blank" href="favicon.png" sizes="16x16 32х32" type="image/png">; any — иконка может масштабироваться до любого размера.
title	Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type	"text/css" Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение .

 Элемент <script> 

Элемент < script> позволяет присоединять к документу различные сценарии.   Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов  

charset

,

defer

элемента. Для элемента доступны атрибуты async ,  ,  src ,  type , а также глобальные атрибуты .  

Атрибут	Описание, принимаемое значение
async	Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset	Определяет кодировку символов
crossorigin	Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).   anonymous — перед загрузкой скрипта в кросс-доменный запрос          браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-AllowOrigin:  имя домена, скрипт не будет загружен.    use-credentials — перед загрузкой скрипта в кросс-доменный  запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.
defer	Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce	Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting).   Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src	Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type	Используются для объявления языка сценария, использованного при составлении содержимого тега.

   Элемент <body> 

В этом разделе располагается все содержимое документа. Для элемента доступны глобальные атрибуты .  

Полный список тегов HTML  

Тег	Описание
<!—…—>	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега   <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.

<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега  <table>.

<cite>	Используется для указания источника цитирования.   Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>.   Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег   <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.

<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
<h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких  как<title>,  <meta>, <script>,  <link>,  <style>.

<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных htmlэлементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого        изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.

<keygen>	Генерирует пару ключей — закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью   элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом.   Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа.   На одной странице должно быть не более одного элемента   <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов      <meta>, так как в  зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.

<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег   <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся  списке <select>,  <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.

<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится        уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные  сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.

<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в   <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиа ресурсов для элементов <video> и  <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с          закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.

<table>

Тег для создания таблицы.

<tbody>

Определяет тело таблицы.

<td>

Создает ячейку таблицы.

<textarea>

Создает большие поля для ввода текста.

<tfoot>

Определяет нижний колонтитул таблицы.

<th>

Создает заголовок ячейки таблицы.

<thead>

Определяет заголовок таблицы.

<time>

Определяет дату/время.

<title>

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

<tr>

Создает строку таблицы.

<track>

Добавляет субтитры для элементов <audio> и <video>.

<u>

Выделяет отрывок текста подчёркиванием, без дополнительного акцента.

<ul>

Создает маркированный список.

<var>

Выделяет переменные из программ, отображая их курсивом.

<video>

Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.

<wbr>

Указывает браузеру возможное место разрыва длинной строки.

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

Значение атрибута заключается в кавычки "" . Названия и значения атрибутов   не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.  

Глобальные атрибуты  

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

Атрибут	Описание, принимаемое значение
accesskey	Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам:   <a>,  <area>, <button>,  <input>, <label>,  <legend>,  <textarea>.   Принимаемые значения: перечень названий клавиш.
class	Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса.

contentedita ble	Определяет, может ли пользователь редактировать содержимое   (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент.   Принимаемые значения: true/false.
contextmenu	Добавляет к элементу контекстное меню, заданное тегом  <menu>.   Принимаемые значения: значение атрибута id элемента <menu>.
dir	Определяет направление текста контента в элементах <bdo> и <bdi>.   Принимаемые значения: ltr/rtl/auto.
draggable	Определяет, может ли пользователь перетащить элемент.   Принимаемые значения: true/false/auto.
dropzone	Определяет область для приема перемещаемых элементов, сообщая браузеру пользователя, какие действия совершить при перемещении.   Принимаемые значения:   copy — содержимое перемещаемого элемента будет скопировано          в область.   move — содержимое перемещаемого элемента будет перемещено          в новую область.   link — при перемещении будет создана ссылка на первоначальные          данные элемента.

hidden	Указывает на то, что элемент должен быть скрыт.   Принимаемые значения: hidden.
id	Определяет уникальный идентификатор элемента.   Принимаемые значения: id — идентификатор элемента.
lang	Определяет код языка содержимого (контента) в элементе.   Принимаемые значения: код языка.
spellcheck	Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики.   Принимаемые значения: true/false.
style	Указывает на код CSS, применяемую для оформления элемента.   Принимаемые значения: код CSS.
tabindex	Определяет порядок перехода к элементу при помощи клавиши TAB.   Принимаемые значения: порядковый номер.
title	Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы.   Принимаемые значения: текст.
translate	Разрешает или запрещает перевод текста внутри элемента.
	Принимаемые значения: yes/no.