Создание страниц сайта с помощью языка разметки HTML

4 May

HTML - язык разметки веб страниц

HTML - стандартный язык разметки для веб страниц. С помощью HTML Вы можете создать свой собственный сайт. Эта статья соответствует последнему стандарту HTML5. HTML можно легко выучить - Вам должно понравится! Вот простейший код в качестве примера:

<!DOCTYPE html>
<html>
<head>

<title>Название Страницы</title>
</head>
<body>
<h1>Это Заголовок</h1>
<p>Это Параграф.</p>
</body>
</html>

Что же такое язык HTML?

1. HTML расшифровывается как Гипертекстовый Язык Разметки

2. HTML - это код, который описывает структуру веб страниц с помощью разметки

3. HTML - элементы- это своего рода строительные блоки для страниц HTML

4. HTML - элементы представляют собой теги

5. HTML - теги содержат, "Заголовок", "Параграф", "Таблицы" и т.д.

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

А что представляет собой HTML элемент?

HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:

<tagname>Здесь находится контент</tagname>

HTML элемент это все от начального тега до конечного тега:

<h1>Мой главный заголовок</h1>

<p>Мой простой параграф.</p>

HTML Редактор

Для изучения HTML все, что вам нужно - это простой текстовый редактор,например, им может служить и Блокнот, но всё же лучше использовать Notepad++ (для PC) или TextEdit (для Mac).

Итак, откройте Notepad++, напишите в нём или скопируйте и вставьте в него код:

<!DOCTYPE html>
<html>
<body>

<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>

У Вас должно получиться следующее:

Теперь нужно правильно сохранить: нажмите Файл>Сохранить как при этом у Вас откроется окошко:

Выберите место для сохранения, введите в "Имя файла" его имя, например - index, а в поле "Тип файла" - выберите из открывающегося списка Hyper Text Markup Language file (html) и нажмите "сохранить".

Что сделать, чтобы просмотреть HTML страницу в вашем браузере

Откройте сохраненный Вами HTML файл в Вашем любимом браузере (для этого надо сделать двойной клик на файл, или щелкнуть правой кнопкой мыши и выбрать "Открыть с помощью" и выбрать браузер). У Вас откроется в браузере примерно такая страничка:

Основные элементы в HTML

Рассмотрим основные элементы html:

Документ в HTML

Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается с <html> и заканчивается </html>.

Видимая часть HTML документа находится между <body> и </body>. Это парные теги (начало-конец), а есть и непарные.

Декларация <!DOCTYPE>

Декларация <!DOCTYPE> представляет собой тип документа и нужна чтобы помочь браузерам корректно отображать веб страницы.

Она должна появиться только один раз, в самой верхней части страницы (перед HTML тегами).

Декларация <!DOCTYPE> не чувствительна к регистру.

Декларация <!DOCTYPE> для HTML5:

<!DOCTYPE html>6

Заголовки в HTML

HTML заголовки определены тегами от <h1> до <h6>. Тег <h1> определяет наиболее важный заголовок. Тег <h6> определяет наименее важный заголовок:

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>

Ощутите разницу наглядно:

Параграфы в HTML

HTML параграфы определяются тегом <p>:

Например: <p>Это простой параграф.</p>
<p>Это еще один параграф.</p>

Ссылки в HTML

Ссылки в HTML определяются при помощи тега <a>:

Пример: <a href="https://ramazansabir72.ru">Это ссылка на мой сайт</a>

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

Изображения в HTML

Изображения в HTML определяются при помощи тега <img>.

Исходный файл src, альтернативный текст alt, ширина и высота указана в качестве атрибутов width и height:

Например: <img src="Иконка-2.png" alt="ramazansabir72.ru" width="104" height="142">

Как можно просмотреть исходный код в HTML?

Приходилось ли Вам когда-нибудь завидовать кому-либо, рассматривая их страницу сайта? Возникало ли желание узнать как выглядит код страницы? Это не сложно:

Как просмотреть исходный код HTML:

Щелкните правой кнопкой мыши (ПКМ) на понравившейся HTML странице и выберите "Просмотр источника страницы" (в Chrome) или "Просмотр код страницы" (в Yandexe), или аналогично в других браузерах. Откроется окно, содержащее исходный HTML код страницы.

Как проверить HTML элемента:

Щелкните правой кнопкой мыши (ПКМ) на элементе (или пустой области) и выберите "Проверить" или "Проверьте элемент", чтобы увидеть, из чего состоят элементы (вы увидите как HTML, так и CSS). Вы также при этом легко можете редактировать коды HTML или CSS очень легко в открывшейся панели.

Элементы в HTML

HTML элемент определяется при помощи начального тега, непосредственно содержимого и конечного тега:

<tagname>Здесь находится непосредственно контент</tagname>

HTML элемент - это все от начального тега до конечного тега.

<h1> Мой главный заголовок</h1>

<p>Мой простой параграф.</p>

Следует учитывать: Некоторые HTML элементы не несут в себе содержимого (например, элемент <br>). Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега.

Вложенные элементы в HTML

Элементы в HTML могут быть вложенными (то есть, одни элементы могут содержать другие элементы). Все документы в HTML состоят из вложенных элементов в HTML.

В этом примере документы HTML состоит из четырех элементов HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>

Элемент <html> определяет весь документ. Он содержит начальный тег <html> и конечный тег </html>.

Элемент <body> определяет тело документа. Он содержит начальный тег <body> и конечный тег </body>.

Элемент <h1> определяет заголовок. Он содержит начальный тег <h1> и конечный тег </h1>. Элемент содержит: Мой главный заголовок.

Элемент <p> определяет параграф. Он имеет начальный тег <p> и конечный тег </p>. Элемент содержит: Мой простой параграф.

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

Пустые элементы в HTML

Элементы в HTML, которые не имеют содержимого, называются пустыми элементами. Например, тег <br> определяет разрыв строки и является пустым элементом без закрывающего тега.

HTML не чувствителен к регистру символов

HTML теги не чувствительны к регистру символов: Например, <P> означает то же самое, что и <p>. Однако, рекомендую Вам писать строчные буквы в HTML.

HTML Теги по категории

Основные теги HTML

<!DOCTYPE> Задаёт собой тип документа

<html> Задаёт собой документ в HTML

<head> Задаёт собой информацию о документе (обычно это - шапка сайта)

<title> Задаёт собой название для документа

<body> Задаёт собой тело документа (обычно это - тело сайта)

<h1> до <h6> Задаёт собой заголовки от h1 до h6

<p> Задаёт собой параграф (то есть - основной текст)

<br> Задаёт разрыв строки

<hr> Задаёт тематическое изменение в содержании

<!--...--> Задаёт комментарий

Форматирование

<acronym> Не поддерживается в HTML5. Лучше используйте <abbr>. Задаёт акроним (аббревиатуру)

<abbr> Задаёт аббревиатуру или акроним

<address> Задаёт контактную информацию для автора или владельца из документа либо статьи

<b> Задаёт полужирный текст

<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами

<bdo> Переопределяет текущее направление текста

<big> Не поддерживается в HTML5. Лучше используйте CSS. Задаёт большой текст

<blockquote> Задаёт раздел, заключенный в кавычки из другого источника

<center> Не поддерживается в HTML5. Лучше используйте CSS. Задаёт центрированный текст

<cite> Задаёт название из работы

<code> Задаёт часть из компьютерного кода

<del> Задаёт текст, который был удален из документа

<dfn> Представляет определяющий экземпляр термина

<em> Задаёт подчеркнутый текст

<font> Не поддерживается в HTML5. Лучше используйте CSS. Задаёт шрифт, цвет и размер текста

<i> Задаёт часть текста альтернативным голосом или настроением

<ins> Задаёт текст, вставленный в документ

<kbd> Задаёт ввод с клавиатуры

<mark> Задаёт выделенный текст

<meter> Задаёт скалярное измерение в известном диапазоне (датчик)

<pre> Задаёт форматированный текст

<progress> Задаёт ход выполнения задачи

<q> Задаёт короткую цитату

<rp> Задаёт, что показывать в браузерах, которые не поддерживают аннотации ruby

<rt> Задаёт объяснение/произношение символов (для Восточно-Азиатской типографии)

<ruby> Задаёт аннотацию ruby (для Восточно-Азиатской типографии)

<s> Задаёт текст, который больше не является правильным

<samp> Задаёт пример вывода из компьютерной программы

<small> Задаёт меньший текст

<strike> Не поддерживается в HTML5. Лучше используйте <del> или <s>. Задаёт зачеркнутый текст

<strong> Задаёт строгий текст

<sub> Задаёт подстрочный текст

<sup> Задаёт надстрочный текст

<template> Задаёт шаблон

<time> Задаёт дату/время

<tt> Не поддерживается в HTML5. Лучше используйте CSS. Задаёт текст телетайпа

<u> Задаёт текст, который должен стилистически отличаться от обычного текста

<var> Задаёт переменную

<wbr> Задаёт возможный разрыв строки

Формы и ввод

<form> Задаёт форму HTML для пользовательского ввода

<input> Задаёт ввод управления

<textarea> Задаёт многострочный ввод (текстовое поле)

<button> Задаёт кликабельную кнопку

<select> Задаёт раскрывающийся список

<optgroup> Задаёт группу связанных параметров в раскрывающемся списке

<option> Задаёт параметр в раскрывающемся списке

<label> Задаёт метку для элемента <input>

<fieldset> Группирует связанные элементы в форме

<legend> Задаёт заголовок для элемента <fieldset>

<datalist> Задает список предопределенных параметров для элементов управления вводом

<output> Задаёт результат вычисления

Фреймы

<frame> Не поддерживается в HTML5. Задаёт окно (фрейм) в наборе кадров

<frameset> Не поддерживается в HTML5. Задаёт набор фреймов

<noframes> Не поддерживается в HTML5. Задаёт альтернативное содержимое для пользователей, не поддерживающих фреймы

<iframe> Задаёт встроенный фрейм

Изображения

<img> Задаёт изображение

<map> Задаёт клиентскую карту изображений

<area> Задаёт область внутри изображения карты

<canvas> Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript )

<figcaption> Задаёт заголовок для элемента <figure>

<figure> Задает автономное содержимое

<picture> Задаёт контейнер для нескольких ресурсов изображений

<svg> Задаёт контейнер для графики SVG

Аудио / Видео

<audio> Задаёт звук контента

<source> Задаёт несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>)

<track> Задаёт текстовые дорожки для элементов медиа (<video> и <audio>)

<video> Задаёт видео или фильм

Ссылки

<a> Задаёт навигацию ссылок гиперссылку

<link> Задаёт связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей)

<nav> Задаёт навигацию ссылок

Списки

<ul> Задаёт неупорядоченный список

<ol> Задаёт упорядоченный список

<li> Задаёт элемент списка

<dir> Не поддерживается в HTML5. Лучше используйте <ul>. Задаёт каталог списка

<dl> Задаёт описание списка

<dt> Задаёт термин/имя в списке описания

<dd> Задаёт описание термина/имени в списке описания

<menu> Задаёт список/меню команд

<menuitem> Задаёт команду/меню, которые пользователь может вызвать из всплывающего меню

Таблицы

<table> Задаёт таблицу

<caption> Задаёт заголовок в таблицы

<th> Задаёт заголовок ячейки в таблице

<tr> Задаёт строку в таблице

<td> Задаёт ячейку в таблице

<thead> Группирует содержимое заголовка в таблице

<tbody> Группирует содержимое тела в таблице

<tfoot> Группирует содержание нижнего колонтитула в таблице

<col> Задает свойства столбца для каждого столбца в элементе <colgroup>

<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования

Стили и семантика

<style> Задает информацию о стиле документа

<div> Задает контейнер в документе

<span> Задает промежуток в документе

<header> Задает заголовок документа или раздела

<footer> Задает нижний колонтитул для документа или раздела

<main> Задает основное содержание документа

<section> Задает раздел в документе

<article> Задает статьи

<aside> Задает содержимое из содержимого страницы

<details> Задает дополнительные сведения, которые пользователь может просмотреть или скрыть

<dialog> Задает диалоговое окно или окно

<summary> Задает видимый заголовок элемента <details>

<data> Связывает данный контент с машиночитаемым переводом

Информация Мета

<head> Задает информацию о документе

<meta> Задает метаданные о документе HTML

<base> Задает базовый URL/цель для всех относительных URL адресов в документе

<basefont> Не поддерживается в HTML5. Лучше используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе

Программирование

<script> Задает клиентский сценарий

<noscript> Задает альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии

<applet> Не поддерживается в HTML5. Лучше используйте <embed> или <object>. Задает встроенный апплет

<embed> Задает контейнер для внешнего (не-HTML) приложения

<object> Задает внедренный объект

<param> Задает параметр для объекта

HTML Атрибуты

accept <input> Указывает типы файлов, которые принимает сервер (только для type="file")

accept-charset <form> Указывает кодировки символов, которые будут использоваться для отправки формы

accesskey Глобальные атрибуты Указывает сочетание клавиш для активации / фокусировки элемента

action <form> Указывает, куда отправлять данные формы при отправке формы

align Не поддерживается в HTML 5. Задает выравнивание в соответствии с окружающими элементами. Используйте CSS

alt <area>, <img>, <input> Задает альтернативный текст, если исходный элемент не отображается

async <script> Указывает, что сценарий выполняется асинхронно (только для внешних сценариев)

autocomplete <form>, <input> Указывает, будет ли в элементе <form> или <input>, должен иметь автозаполнения enabled

autofocus <button>, <input>, <select>, <textarea> Указывает, что элемент должен автоматически получать фокус при загрузке страницы

autoplay <audio>, <video> Указывает, что воспроизведение аудио/видео начнется, как только оно будет готово

bgcolor Не поддерживается в HTML 5. Задает цвет фона элемента. Используйте CSS

border Не поддерживается в HTML 5. Задает ширину границы элемента. Используйте CSS

charset <meta>, <script> Указывает кодировку символов

checked <input> Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio")

cite <blockquote>, <del>, <ins>, <q> Задает URL, который объясняет цитату / удаленный / вставленный текст

class Глобальные атрибуты Задает одно или несколько имен классов для элемента (ссылается на класс в таблице стилей)

color Не поддерживается в HTML 5. Задает цвет текста элемента. Используйте CSS

cols <textarea> Задает видимую ширину текстовой области

colspan <td>, <th> Указывает количество столбцов, которое должна охватывать ячейка таблицы

content <meta> Дает значение, связанное с http-equiv или атрибутом name

contenteditable Глобальные атрибуты Указывает, является ли содержимое элемента редактируемым или нет

contextmenu Глобальные атрибуты Задает контекстное меню для элемента. Контекстное меню появляется, когда пользователь щелкает правой кнопкой мыши на элементе

controls <audio>, <video> Указывает, что должны отображаться элементы управления аудио/видео (например, кнопка воспроизведения / паузы и т. д)

coords <area> Задает координаты области

data <object> Задает URL ресурса, используемого объектом

data-* Глобальные атрибуты Используется для хранения личных данных пользователя на странице или в приложении

datetime <del>, <ins>, <time> Указывает дату и время

default <track> Указывает, что трек должен быть включен, если предпочтения пользователя не указывают, что другой трек будет более подходящим

defer <script> Указывает, что сценарий выполняется после завершения синтаксического анализа страницы (только для внешних сценариев)

dir Глобальные атрибуты Задает направление текста для содержимого элемента

dirname <input>, <textarea> Указывает, что направление текста будет отправлено

disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Указывает, что указанный элементы элемент/группа должны быть отключены

download <a>, <area> Указывает, что целевой объект будет загружен при нажатии пользователем гиперссылки

draggable Глобальные атрибуты Указывает, является ли элемент перетаскиваемым или нет

dropzone Глобальные атрибуты Указывает, копируются, перемещаются или связываются перетаскиваемые данные

enctype <form> Указывает, как данные формы должны быть закодированы при отправке на сервер (только для method="post")

for <label>, <output> Определяет форму элемента(ов) метки/расчет обязан

form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> Задает имя формы элемент принадлежит

formaction <button>, <input> Указывает, куда отправлять данные формы при отправке. Только для type="submit"

headers <td>, <th> Задает одну или несколько ячеек заголовков, с которыми связана ячейка

height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Задает высоту элемента

hidden Глобальные атрибуты Указывает, что элемент еще не релевантен или больше не имеет значения

high <meter> Задает диапазон, который считается высоким значением

href <a>, <area>, <base>, <link> Указывает URL страницы, на которую переходит ссылка

hreflang <a>, <area>, <link> Указывает язык связанного документа

http-equiv <meta> Предоставляет заголовок HTTP для информации / значения атрибута содержания

id Глобальные атрибуты Задает уникальный идентификатор элемента

ismap <img> Задает изображение в качестве серверной карты изображений

kind <track> Указывает тип текстовой дорожки

label <track>, <option>, <optgroup> Задает заголовок текстовой дорожки

lang Глобальные атрибуты Задает язык содержимого элемента

list <input> Относится к элементу <datalist>, который содержит предопределенные параметры для элемента <input>

loop <audio>, <video> Указывает, что аудио / видео будет начинаться снова, каждый раз, когда он будет завершено

low <meter> Определяет диапазон, который считается низким значением

manifest <html> Указывает расположение манифеста кэша документа

max <input>, <meter>, <progress> Задает максимальное значение

maxlength <input>, <textarea> Задает максимальное количество символов, разрешенных в элементе

media <a>, <area>, <link>, <source>, <style> Указывает, для какого носителя / устройства оптимизирован связанный документ

method <form> Задает метод HTTP, используемый при отправке данных формы

min <input>, <meter> Задает минимальное значение

multiple <input>, <select> Указывает, что пользователь может ввести несколько значений

muted <video>, <audio> Указывает, что аудиовыход видео должен быть отключен

name <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> Задает имя элемента

novalidate <form> Указывает, что форма не должна проверяться при отправке

onabort <audio>, <embed>, <img>, <object>, <video> Сценарий для запуска при прерывании

onafterprint <body> Сценарий, запускаемый после печати документа

onbeforeprint <body> Сценарий, выполняемый перед печатью документа

onbeforeunload <body> Скрипт будет выполняться, когда документ будет выгружен

onblur Все видимые элементы. Сценарий для запуска, когда элемент теряет фокус

oncanplay <audio>, <embed>, <object>, <video> Сценарий для запуска, когда файл готов к запуску воспроизведения (когда он достаточно буферизован, чтобы начать)

oncanplaythrough <audio>, <video> Скрипт должен быть запущен, когда файл может быть воспроизведен до конца без паузы для буферизации

onchange Все видимые элементы. Скрипт, запускаемый при изменении значения элемента

onclick Все видимые элементы. Скрипт, запускаемый при щелчке по элементу

oncontextmenu Все видимые элементы. Скрипт, запускаемый при вызове контекстного меню

oncopy Все видимые элементы. Скрипт, запускаемый при копировании содержимого элемента

oncuechange <track> Сценарий, который будет выполняться при изменении ключа в элементе <track>

oncut Все видимые элементы. Скрипт, запускаемый при вырезании содержимого элемента

ondblclick Все видимые элементы. Скрипт, запускаемый при двойном щелчке по элементу

ondrag Все видимые элементы. Скрипт, запускаемый при перетаскивании элемента

ondragend Все видимые элементы. Скрипт, запускаемый в конце операции перетаскивания

ondragenter Все видимые элементы. Скрипт, запускаемый при перетаскивании элемента в допустимый целевой объект

ondragleave Все видимые элементы. Сценарий для запуска, когда элемент оставляет допустимый целевой объект отбрасывания

ondragover Все видимые элементы. Скрипт, запускаемый при перетаскивании элемента по допустимому целевому объекту

ondragstart Все видимые элементы. Сценарий для запуска в начале операции перетаскивания

ondrop Все видимые элементы. Скрипт, запускаемый при перетаскивании элемента

ondurationchange <audio>, <video> Сценарий для запуска при изменении длины носителя

onemptied <audio>, <video> Сценарий, который нужно запустить когда что-то плохое случается и архив внезапно недоступен (как непредвиденно разъединения)

onended <audio>, <video> Скрипт должен быть запущен, когда аудио или видео уже дойдет до конца (полезное мероприятие для сообщения "спасибо за прослушивание")

onerror <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> Сценарий для запуска при возникновении ошибки

onfocus Все видимые элементы. Сценарий для запуска, когда элемент получает фокус

onhashchange <body> Скрипт, запускаемый при изменении привязки URL

oninput Все видимые элементы. Сценарий для запуска, когда элемент получает пользовательский ввод

oninvalid Все видимые элементы. Сценарий для запуска при недопустимом элементе

onkeydown Все видимые элементы. Скрипт, запускаемый при нажатии пользователем клавиши

onkeypress Все видимые элементы. Скрипт, запускаемый при нажатии пользователем клавиши

onkeyup Все видимые элементы. Скрипт, запускаемый при нажатии пользователем клавиши

onload <body>, <iframe>, <img>, <input>, <link>, <script>, <style> Скрипт, запускаемый после завершения загрузки элемента

onloadeddata <audio>, <video> Сценарий для запуска при загрузке данных мультимедиа

onloadedmetadata <audio>, <video> Скрипт, запускаемый при загрузке метаданных (например, измерений и длительности)

onloadstart <audio>, <video> Скрипт должен быть запущен и файл начинает загружаться до загружаемого

onmousedown Все видимые элементы. Скрипт, запускаемый при нажатии кнопки мыши на элементе

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

onmouseout Все видимые элементы. Скрипт, запускаемый при перемещении указателя мыши из элемента

onmouseover Все видимые элементы. Скрипт, запускаемый при наведении указателя мыши на элемент

onmouseup Все видимые элементы. Скрипт, запускаемый при отпускании кнопки мыши над элементом

onmousewheel Все видимые элементы. Скрипт, запускаемый при прокрутке колесика мыши по элементу

onoffline <body> Скрипт, запускаемый при запуске браузера в автономном режиме

ononline <body> Скрипт, запускаемый при запуске браузера в оперативном режиме

onpagehide <body> Скрипт, запускаемый при переходе пользователя со страницы

onpageshow <body> Сценарий, выполняемый при переходе пользователя на страницу

onpaste Все видимые элементы. Сценарий, выполняемый при вставке пользователем некоторого содержимого в элемент

onpause <audio>, <video> Сценарий, запускаемый при приостановке носителя пользователем или программным способом

onplay <audio>, <video> Скрипт должен быть запущен, когда аудио или видео готовы начать играть

onplaying <audio>, <video> Сценарий для запуска, когда носитель фактически начал играть.

onpopstate <body> Скрипт, запускаемый при изменении истории окна.

onprogress <audio>, <video> Сценарий для запуска, когда браузер находится в процессе получения данных мультимедиа

onratechange <audio>, <video> Сценарий для запуска при каждом изменении скорости воспроизведения (например, когда пользователь переключается в режим замедленной или быстрой перемотки вперед).

onreset <form> Сценарий для запуска при нажатии кнопки сброса в форме.

onresize <body> Скрипт, запускаемый при изменении размера окна браузера.

onscroll Все видимые элементы. Скрипт, запускаемый при прокрутке полосы прокрутки элемента

onsearch <input> Сценарий, выполняемый при записи пользователем чего-либо в поле поиска (для <input="search">)

onseeked <audio>, <video> Сценарий, который будет выполняться, когда атрибут поиска имеет значение false, указывающее, что поиск закончился

onseeking <audio>, <video> Сценарий, который будет выполняться, если атрибут поиска имеет значение true, указывающее, что поиск активен

onselect Все видимые элементы. Скрипт, запускаемый при выборе элемента

onshow <menu> Скрипт, запускаемый при отображении элемента <menu> в виде контекстного меню

onstalled <audio>, <video> Скрипт должен быть запущен, когда браузер не может получить данные по какой-либо причине

onstorage <body> Сценарий для запуска при обновлении области веб-хранилища

onsubmit <form> Сценарий для запуска при отправке формы

onsuspend <audio>, <video> Сценарий, который будет выполняться при извлечении данных мультимедиа останавливается перед полной загрузкой по какой-либо причине

ontimeupdate <audio>, <video> Скрипт для запуска при изменении игровой позиции (например, когда пользователь быстро переходит к другой точке в аудио или видео)

ontoggle <details> Сценарий, запускаемый при открытии или закрытии пользователем элемента <details>

onunload <body> Скрипт, запускаемый при выгрузке страницы (или закрытии окна браузера)

onvolumechange <audio>, <video> Сценарий, который будет выполняться каждый раз, когда видео / аудио громкость была изменена

onwaiting <audio>, <video> Скрипт должен быть запущен, когда СМИ приостановлена, но возобновится (например, когда СМИ останавливается для буферизации данных)

onwheel Все видимые элементы. Скрипт, запускаемый при накатывании колесика мыши вверх или вниз по элементу

open <details> Указывает, что сведения должны быть видны (открыты) пользователю

optimum <meter> Указывает, какое значение является оптимальным для датчика

pattern <input> Задает регулярное выражение, по которому проверяется значение элемента <input>

placeholder <input>, <textarea> Задает короткую подсказку, описывающую ожидаемое значение элемента

poster <video> Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения

preload <audio>, <video> Указывает, если автор считает, что аудио / видео должно быть загружено при загрузке страницы

readonly <input>, <textarea> Указывает, что элемент доступен только для чтения

rel <a>, <area>, <link> Задает связь между текущим документом и связанным документом

required <input>, <select>, <textarea> Указывает, что элемент должен быть заполнен перед отправкой формы

reversed <ol> Указывает, что порядок списка должен быть по убыванию (9,8,7...)

rows <textarea> Указывает видимое количество строк в текстовой области

rowspan <td>, <th> Задает количество строк, которое должна занимать ячейка таблицы

sandbox <iframe> Включает дополнительный набор ограничений для содержимого в <iframe>

scope <th> Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк

scoped <style> Указывает, что стили применяются только к родительскому элементу этого элемента и дочерним элементам этого элемента

selected <option> Указывает, что параметр должен быть предварительно выбран при загрузке страницы

shape <area> Определяет форму области

size <input>, <select> Задает ширину в символах (для <input>) или указывает количество видимых параметров (для <select>)

sizes <img>, <link>, <source> Задает размер связанного ресурса

span <col>, <colgroup> Задает количество столбцов для интервала

spellcheck Глобальные атрибуты Указывает, следует ли проверять орфографию и грамматику элемента

src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> Задает URL файла мультимедиа

srcdoc <iframe> Задает содержимое HTML страницы для отображения в <iframe>

srclang <track> Задает язык текстовых данных дорожки (требуется, если kind="subtitles")

srcset <img>, <source> Задает URL изображения для использования в различных ситуациях

start <ol> Задает начальное значение упорядоченного списка

step <input> Задает допустимые интервалы номеров для поля ввода

style Глобальные атрибуты Задает встроенный стиль CSS для элемента

tabindex Глобальные атрибуты Задает порядок табуляции элемента

target <a>, <area>, <base>, <form> Указывает целевой объект для открытия связанного документа или отправки формы

title Глобальные атрибуты Задает дополнительные сведения об элементе

translate Глобальные атрибуты Указывает, следует ли переводить содержимое элемента

type <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> Указывает тип элемента

usemap <img>, <object> Задает изображение в качестве клиентской карты изображений

value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Задает значение элемента

width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Задает ширину элемента

wrap <textarea> Указывает, как текст в текстовой области должен быть обернут при отправке в форме

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

accesskey Указывает сочетание клавиш для активации / фокусировки элемента

class Задает одно или несколько имен классов для элемента (ссылается на класс в таблице стилей)

contenteditable Указывает, является ли содержимое элемента редактируемым или нет

contextmenu Задает контекстное меню для элемента. Контекстное меню появляется, когда пользователь щелкает правой кнопкой мыши на элементе

data-* Используется для хранения личных данных пользователя на странице или в приложении

dir Задает направление текста для содержимого элемента

draggable Указывает, является ли элемент перетаскиваемым или нет

dropzone Указывает, копируются, перемещаются или связываются перетаскиваемые данные

hidden Указывает, что элемент еще не релевантен или больше не имеет значения

id Задает уникальный идентификатор элемента

lang Задает язык содержимого элемента

spellcheck Указывает, следует ли проверять орфографию и грамматику элемента

style Задает встроенный стиль CSS для элемента

tabindex Задает порядок табуляции элемента

title Задает дополнительные сведения об элементе

translate Указывает, следует ли переводить содержимое элемента

Более подробно о языке HTML - в следующей статье!!!