Html метка: Якоря | htmlbook.ru

22.11.2018 alexxlab

Содержание

Якоря | htmlbook.ru

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Пример 9.1. Создание якоря

<!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>
  <p><a name="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
 </body>
</html>

Между тегами <a name=»top»> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки (пример 9.2).

Пример 9.2. Ссылка на закладку из другой веб-страницы

<!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>
  <p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
  </body>
</html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

HTML якоря — грамотное использование

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

Назначение якорей HTML

Приветствую Вас на страницах моего сайта inetmkt.ru. Итак, что же это такое? HTML якоря это элементы навигации по странице сайта. Их используют для перемещения в пределах одной страницы. Если страница слишком большого объема, тогда, для удобства пользователей, у вебдизайнера есть возможность обеспечить навигацию по странице путем простановки специальных меток – HTML якорей.

Вы такие страницы часто встречаете. Обычная структура таких документов содержит в начале содержание страницы. а в теле страницы – описание элементов содержания.

Содержание
    Раздел1
    Раздел2
    Раздел3

А в теле страницы – описание элементов содержания.

Раздел1
текст
…………
Раздел2
текст
…………

Будет логично для создания меток использовать заголовки и подзаголовки на странице, хотя это и не обязательно.

Как поставить HTML якоря?

Создать метку можно двумя способами. В первом случай для создания метки используют тег <a> с атрибутом name. Запись в HTML-коде будет выглядеть следующим образом

<a name=”Razdel1”> Раздел1</a>

Текст между открывающим и закрывающим тегами не обязателен, но, на мой взгляд, желателен. Имя метки должно быть уникальным на странице и может содержать латинские буквы и цифры.

Во втором случае поступают еще проще. Любому html-тегу добавляют атрибут ID, например:

<h4 id=”Razdel2”> Раздел2 </h4>

Можно использовать любой из описанных выше способов.

Как сослаться на HTML якоря?

Для того, чтобы перейти в нужное место, помеченное якорем, организовывается ссылка. Она является частным случаем обычной гиперссылки, но имеет некоторые нюансы. Например:

<a href=”#Razdel4”> Раздел4 </a>

Как Вы уже поняли к имени метки, заданной в атрибутах name или ID, добавляется знак решетки — #.

Переход на метку якоря HTML на другой странице

<a href=”page1#Razdel4> Якоря. Раздел4 </a>

Если Вы задаете ссылку в таком виде

<a href=”#”> В начало </a>

то переход произойдет к началу вебстраницы.

Использование HTML якорей в WordPress

Процесс простановки якорей в CMS WordPress не автоматизирован. Но, при желании, их легко можно проставить, воспользовавшись HTML редактором. Синтаксис написания ничем не отличается от описанных выше способов.

<a name=”Yakor1”> Якорь1 </a>

А вот организовать ссылку можно средствами WordPress традиционным способом. И будет она выглядеть тоже традиционно.

<a href=»#Yakor1″> Якорь1 </a>

Вот собственно и все, что я хотел Вам донести об HTML якорях. Всем желаю всего хорошего и побольше.

Полезные Материалы:

Якоря | Учебные курсы | WebReference

Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id (пример 1). В имени допустимо писать русские, латинские буквы и символы, нельзя только пробел. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.

Пример 1. Создание якоря

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Быстрый переход внутри документа</title>
 </head>
 <body>
  <p></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
 </body>
</html>

Имя ссылки на якорь начинается с решётки (#), после чего идёт имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов id и href совпадали (символ решётки не в счёт).

При щелчке по такой ссылке произойдёт переход к элементу в окне браузера.

Ссылку также можно сделать на якорь на другой веб-странице и даже на другом сайте. Для этого в атрибуте href элемента <a> надо указать полный адрес документа и в конце добавить символ решётки и имя якоря (пример 2).

Пример 2. Быстрый переход по Википедии

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Якорь в другом документе</title> </head> <body> <p><a href=»https://ru.wikipedia.org/wiki/HTML5#Разметка»>Разметка HTML 5</a></p> </body> </html>

В данном примере показано создание ссылки на страницу Википедии, при открытии ссылки происходит переход к разделу с якорем HTML_5.1.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет. По этой причине решётку часто используют для пустых ссылок, когда ссылка нужна, но адрес пока не известен (пример 3) или нажатие обрабатывается программой на JavaScript.

Пример 3. Пустые ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>#</title>
 </head>
 <body>
  <p><a href="#">О нас</a>
   <a href="#">Проекты</a>
   <a href="#">Вакансии</a></p>
 </body>
</html>

Такого рода ссылки по своему виду ничем не отличаются от обычных ссылок — по ним можно щёлкать и они становятся при этом посещаемыми. Естественно, перехода на другую страницу при этом нет, но происходит переход к верхней части страницы, что особенно заметно при длинном тексте.

Якорь в HTML | Закладка на веб-странице

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

Пример использования якоря
Действие якоря
Показания к применению якоря
Как создать и установить якорь на веб-странице
Имя якоря
Код якоря
1. Код классического якоря (тег <а>)
2. Код правильного якоря
3. «невидимый» и «видимый» якоря
4. Код самого простого якоря
5. Якорь в заголовке, в списке, в таблице.
  Якорь в любом открывающем теге элемента HTML…
Ссылка на якорь
1. Код ссылки на якорь, в пределах одной страницы
2. Код ссылки на якорь, расположенный на другой странице
3. Код ссылки на якорь, расположенный на другом домене (блоге, сайте)
4. Абсолютная ссылка

(продолжение статьи – Зачем на сайте якоря)

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

Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен. Более подробно можно почитать в статье «Зачем на сайте якоря»

Якорь в гипертекстовой разметке HTML применяется, когда необходимо направить пользователя непосредственно в требуемое место страницы, минуя утомительное листание всего текста. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, такое как в статье про якоря.

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

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

На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).

Но! Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать. Например, у меня на всех страницах блога стоит якорь «zaglavie» и отлично работает на каждой странице.

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

Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id

Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор)
задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,
вставляемый в документ HTML будет иметь вид
<a name=»razdel»></a> или <a></a>
где, слово «razdel» – это произвольное уникальное имя якоря
в пределах страницы его местонахождения.

Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть. Лично я такими якорями никогда не пользуюсь, поэтому упомянул про них исключительно ради объективности своего обзора.

Код невидимого якоря:
<a name=»razdel»></a> или <a></a>
Код видимого якоря:
<a name=»razdel»>ТЕКСТ</a> или <a> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.

И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба ???

Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name=»razdel«></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.

Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a></a>

Всё понятно. Атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>. И, если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно всунуть якорь только в тег <a>…

Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!

Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a></a>

Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name=»razdel»></a> или <a></a>?

Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id=»razdel», который можно установить почти в любой открывающий тег HTML и XHTML!

Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td…), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id=»razdel», где, естественно, слово «razdel» – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.

Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML…

(к оглавлению)

Таким образом, учитывая что код самого простого якоря имеет вид id=»razdel», то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:

для заголовка (h2, h3, h4, h5, h5, h6): <h2>Текст заголовка…
для списка (ul, ol, dl) и его элементов (li, dt, dd): <ul>тело списка…
<li>тело элемента списка…
для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr): <table>тело таблицы или её элемента…
… и так далее, и тому подобные конструкции, вида:
<div> или <p>
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)

Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id=»razdel» можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.

Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря. Как и все остальные ссылки на свете, ссылки на якорь могут быть локальными и абсолютными. Локальные – это ссылки на якорь в пределах одного сайта (домена), абсолютные – это ссылки с указанием полного веб-пути к веб-странице и якорю на ней. Как правило, абсолютные ссылки используют для якорей расположенных на других сайтах (доменах). Количество ссылок на один якорь и место расположения этих ссылок ни чем не лимитировано и ни как не ограничено. На один и тот же якорь может быть сколько угодно ссылок, расположенным по всем страницам всех сайтов Интернета.

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

1 группа – Локальные ссылки на якорь, расположенный в пределах одной страницы: Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href=»#razdel»>ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.
Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.
2 группа – Локальные ссылки на якорь, расположенный в пределах одного домена (сайта, блога): Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href=»/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.
Если якорь и ссылка на него находятся в пределах одного домена (сайта, блога), то имя домена в ссылке указывать не обязательно. Браузер сам отсчитает путь к документу и найдёт якорь на странице
3 группа – Абсолютные ссылки на якорь, расположенный на другом домене (блоге, сайте): Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href=»http://tehnopost.info/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, http://tehnopost.info/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.

Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Якорь в HTML | Закладка на веб-странице на tehnopost.info
(продолжение статьи – Зачем на сайте якоря)

Зачем на сайте якоря
Теория якорного дела
Якорь в HTML – как это работает
Якоря и SEO (поисковая оптимизация)
Ограничения на количество якорей
Код якоря и ссылки на него,
способы установки якорей …

Исходный код:

<a href=»#razdel»>ТЕКСТ ССЫЛКИ</a>

<p><span>Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. <br>Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>

<div>

<span>
204
</span>
Не работает. <br>
Может быть это специфика <br>
сконвертированного<br>
из doc html-файла?<br>
Буду благодарна за помощь<br>
</div>

Пример работы:

204 ТЕКСТ ССЫЛКИ

Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе.
Вот почему прогресс определяется действиями неразумных людей.

Бернард Шоу

204 Не работает.
Может быть это специфика
сконвертированного
из doc html-файла?
Буду благодарна за помощь

Буду благодарна за помощь

теги — полный список, таблица тегов по разделам

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

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

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

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

Таблица 1. 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>`	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
`<data>`	Элемент используется для связывания значения атрибута `value`, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
`<datalist>`	Элемент-контейнер для выпадающего списка элемента `<input>`. Варианты значений помещаются в элементы `<option>`.
`<dd>`	Используется для описания термина из тега `<dt>`.
`<del>`	Помечает текст как удаленный, перечёркивая его.
`<details>`	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег `<summary>`.
`<dfn>`	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
`<dialog>`	Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута `open` не виден для пользователя.
`<div>`	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
`<dl>`	Тег-контейнер, внутри которого находятся термин и его описание.
`<dt>`	Используется для задания термина.
`<em>`	Выделяет важные фрагменты текста, отображая их курсивом.
`<embed>`	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
`<fieldset>`	Группирует связанные элементы в форме, рисуя рамку вокруг них.
`<figcaption>`	Заголовок/подпись для элемента `<figure>`.
`<figure>`	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
`<footer>`	Определяет завершающую область (нижний колонтитул) документа или раздела.
`<form>`	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута `action`.
`<h2-h6>`	Создают заголовки шести уровней для связанных с ними разделов.
`<head>`	Элемент-контейнер для метаданных HTML-документа, таких как`<title>`, `<meta>`, `<script>`, `<link>`, `<style>`.
`<header>`	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
`<hr>`	Горизонтальная линия для тематического разделения параграфов.
`<html>`	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
`<i>`	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
`<iframe>`	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
`<img>`	Встраивает изображения в HTML-документ с помощью атрибута `src`, значением которого является адрес встраиваемого изображения.
`<input>`	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
`<ins>`	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
`<kbd>`	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
`<meta>`	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке `<head>` может быть несколько тегов `<meta>`, так как в зависимости от используемых атрибутов они несут разную информацию.
`<meter>`	Индикатор измерения в заданном диапазоне.
`<nav>`	Раздел документа, содержащий навигационные ссылки по сайту.
`<noscript>`	Определяет секцию, не поддерживающую сценарий (скрипт).
`<object>`	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег `<param>`.
`<ol>`	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
`<optgroup>`	Контейнер с заголовком для группы элементов `<option>`.
`<option>`	Определяет вариант/опцию для выбора в раскрывающемся списке `<select>`, `<optgroup>` или `<datalist>`.
`<output>`	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
`<p>`	Параграфы в тексте.
`<param>`	Определяет параметры для плагинов, встраиваемых с помощью элемента `<object>`.
`<picture>`	Элемент-контейнер, содержащий один элемент `<img>` и ноль или несколько элементов `<source>`. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
`<pre>`	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
`<progress>`	Индикатор выполнения задачи любого рода.
`<q>`	Определяет краткую цитату.
`<ruby>`	Контейнер для Восточно-Азиатских символов и их расшифровки.
`<rb>`	Определяет вложенный в него текст как базовый компонент аннотации.
`<rt>`	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе `<ruby>`, выводится уменьшенным шрифтом.
`<rtc>`	Отмечает вложенный в него текст как дополнительную аннотацию.
`<rp>`	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
`<s>`	Отображает текст, не являющийся актуальным, перечеркнутым.
`<samp>`	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
`<script>`	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута `src`.
`<section>`	Определяет логическую область (раздел) страницы, обычно с заголовком.
`<select>`	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в `<option>`.
`<small>`	Отображает текст шрифтом меньшего размера.
`<source>`	Указывает местоположение и тип альтернативных медиаресурсов для элементов `<picture>`, `<video>`, `<audio>`.
`<span>`	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
`<strong>`	Расставляет акценты в тексте, выделяя полужирным.
`<style>`	Подключает встраиваемые таблицы стилей.
`<sub>`	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
`<summary>`	Создаёт видимый заголовок для тега `<details>`. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
`<sup>`	Задает надстрочное написание символов.
`<table>`	Тег для создания таблицы.
`<tbody>`	Определяет тело таблицы.
`<td>`	Создает ячейку таблицы.
`<template>`	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
`<textarea>`	Создает большие поля для ввода текста.
`<tfoot>`	Определяет нижний колонтитул таблицы.
`<th>`	Создает заголовок ячейки таблицы.
`<thead>`	Определяет заголовок таблицы.
`<time>`	Определяет дату/время.
`<title>`	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
`<tr>`	Создает строку таблицы.
`<track>`	Добавляет субтитры для элементов `<audio>` и `<video>`.
`<u>`	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
`<ul>`	Создает маркированный список.
`<var>`	Выделяет переменные из программ, отображая их курсивом.
`<video>`	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
`<wbr>`	Указывает браузеру возможное место разрыва длинной строки.

HTML | htmlbook.ru

23.09.2019

Влад Мержевич

Сделал новое мобильное приложение под Андроид, чтобы практиковаться с кодом HTML. По разным темам выводятся небольшие задания, которые надо решать прямо в текстовом редакторе. Проверка заданий автоматическая, так что сразу будете знать, выполнено оно или нет.

Установить приложение

04.04.2018

Влад Мержевич

Выпустил новую версию самоучителя HTML в виде мобильного приложения под Android. Кроме самой теории с примерами есть куча вопросов для самопроверки. Установить можно через Google.Play.

Добавились новые разделы про формы, аудио и видео, фреймы и семантику. Старые тексты тоже обновлены, чтобы они лучше соответствовали современным стандартам.

Приложение пока находится в бета-режиме, так что если есть замечания и предложения по улучшению, пишите письма и отзывы.

16.11.2017

Влад Мержевич

Переделал мобильное приложение под Андроид Основы HTML, тексты для которого написал Джереми Томас с сайта marksheet.io.

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

Установить приложение

Если ещё не ставили приложение, то самое время это сделать и начать учить HTML. Если ставили, то можно проверить свои знания и обновить их. Так что включать всем!

02.05.2017

Влад Мержевич

На сайте webref.ru стал доступен самоучитель HTML. Более 50 вопросов для проверки, несколько десятков интерактивных упражнений на закрепление материала, почти два десятка практических заданий по редактированию кода.

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

23.09.2010

Влад Мержевич

Быстрый старт

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

В примере 1.1 приведен несложный пример такого кода.

Пример 1.1. Первая веб-страница

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Ссылка — один из самых важных элементов веб-страницы, при помощи ссылок посетители могут перемещаться по сайтам, ссылки мы используем, чтобы делиться информацией, найденной в интернете с другими людьми. В общем, если бы в HTML не было ссылок, то их обязательно придумали, иначе сейчас мы бы не пользовались сетью Интернет.

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

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

Применение ссылок в HTML

Содержание статьи:

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

При помощи HTML ссылок поисковые системы «ходят» по вашему сайту и оценивают его, но важнее то, что при помощи ссылок посетители вашего сайта могут переходить по различным страницам. Самое важное правило использования ссылок в HTML заключается в том, что для создания ссылки путь к файлу должен быть доступен или иначе: если вы можете ввести какой-то URL или путь к файлу в строке браузера, то, соответственно, для такого файла вы можете создать HTML ссылку.

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

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

Виды ссылок в HTML

Вне зависимости от того, к какому виду относится HTML ссылка, она формируется при помощи специального HTML тэга <a>. Данный тэг является парным HTML тэгом с обязательным закрывающим тэгом. Элемент ссылки является строчным HTML элементом. Общий синтаксис создания HTML ссылок можно записать следующим образом:

<a href=»url/uri»>ссылка</a>

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

Но HTML ссылки можно разделить еще и на абсолютные и относительные. Абсолютные ссылки содержат абсолютные URL (такие URL не зависят от своего физического расположения и работают везде), например URL главной страницы моего сайта ZametkiNaPolyah.ru является абсолютным и доступен с любого компьютера, подключенного к сети Интернет, по HTTP протоколу. Относительные адреса HTML ссылок строятся относительно какой-нибудь физической области на жестком диске, например, относительно корня сайта или относительно корня диска C, можно даже относительно какой-нибудь отдельной папки.

SEO оптимизаторы делят еще ссылки на внутренние и внешние. Внутренняя HTML ссылка ведет на другую одного и того же сайта. А внешняя HTML ссылка ведет на страницу другого сайта.

Подведем промежуточный итог о видах HTML ссылок. HTML ссылки в HTML делятся на внутренние и внешние, если смотреть на них с позиции SEO. Ссылки делятся на постраничные и межстраничные. А также HTML ссылки можно разделить по значению атрибута href на относительные и абсолютные.

Атрибуты HTML ссылок

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

Атрибут accesskey. Позволяет активировать HTML ссылку при помощи определенных комбинаций клавиш, которые указываются в данном атрибуте.
Атрибут coords. Позволяет установить координаты активной области HTML ссылки внутри тэга <object>.
Атрибут download. Позволяет сказать браузеру, что данная ссылка является ссылкой на скачивание.
Атрибут href. При помощи этого атрибуты мы можем указать путь, по которому ведет HTML ссылка.
Атрибут hreflang. Этот атрибут определяет язык документа, на который ведет HTML ссылка.
Атрибут name. При помощи данного атрибута мы указываем имя HTML якоря.
Атрибут rel. При помощи атрибут rel мы указываем в каком отношение находится ссылаемая HTML страница, с текущей (на которой находится пользователь).
Атрибут rev. Данный атрибут позволяет задать отношение между текущим документом и тем документом, на который ведет HTML ссылка.
Атрибутs shape Изображения в HTML могут быть ссылками, данный атрибут поможет вам задать область HTML изображения, которая является ссылкой.
Атрибут tabindex. Не у всех ваших посетителей есть мышка, поэтому можно задать порядок получения фокуса HTML ссылки при помощи данного атрибута, чтобы посетителю было удобнее пользоваться вашим сайтом.
Атрибут target. Данный атрибут позволяет указать имя окна или фрейма, куда браузер будет загружать документ, указанный по ссылке.
Атрибут title Полезный атрибут, который позволяет создать подсказку при наведении курсора мыши на HTML ссылку.
Атрибут type Этот атрибут служит для указания MIME-типа документа, на который ведет ссылка.

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

Внешние ссылки в HTML. Межстраничная навигация по сайту

Начнем с самого простого – с внешних HTML ссылок или с ссылок, которые ведут на другие страница сайта. Обычно такие ссылки используются для создания меню на сайте или для организации внутренней перелинковки сайта. Мы уже упоминали, что любая ссылка имеет атрибут href, который служит для указания пути к документу. Давайте создадим простой пример HTML ссылки:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

Данная ссылка будет вести на главную страницу моего сайта, текст ссылки или ее анкор: «Создание сайтов», а при наведении курсора мыши на текст ссылки браузер покажет подсказку: «Сайт о создании сайтов». Если вы хотите проявить заботу о тех посетителях вашего сайта, которые пользуются ноутбуком или нетбуком без мышки, то используйте атрибут tabindex, который позволяет задать порядок переключения между HTML ссылками при помощи клавиши Tab:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” tab=”1” >Создание сайтов</a> <a href=”//zametkinapolyah.ru/zametki-o-mysql/sqlite” title=”Уроки по SQL и базам данных SQLite” tab=”2” >Библиотека SQLite</a> <a href=”//zametkinapolyah.ru/verstka-sajtov/html” title=”Самоучитель по языку HTML” tab=”3” >HTML</a>

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” tab=”1” >Создание сайтов</a>

<a href=”//zametkinapolyah.ru/zametki-o-mysql/sqlite” title=”Уроки по SQL и базам данных SQLite” tab=”2” >Библиотека SQLite</a>

Теперь при нажатии клавиши Tab, фокус сперва получит ссылка с анкором «Создание сайтов», если еще раз нажать Tab, браузер переключится на ссылку «Библиотека SQLite», третье нажатие клавиши позволит переключиться на ссылку с текстом «HTML».

Как открывать ссылку или использование атрибута target

Мы можем сказать браузеру, как открывать HTML ссылку. У нас есть четыре вариант того, как открывать HTML ссылку:

Открывать страницу в новом окне/вкладке браузера: target=”_blanc”.
Открывать страницу в текущем окне браузера: target=”_self”.
Открывать страницу в родительском фрейме: target=”_parent”.
Отменить все фреймы и открыть страницу в полном окне: target=”_top”.

Отметим, что последних два варианта используются не так часто, и мы их рассмотрим, когда поговорим про HTML фреймы, так же стоит сказать, что если на странице нет фреймов эти значения работают, как target=”_self”. По умолчанию браузер использует значение target=”_self”, поэтому обычно все ссылки открываются в текущей вкладке. Стоит заметить, что XHTML документы запрещают использование атрибуты target.

Давайте рассмотрим несколько примеров. Первый пример мы уже видели:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a> <a target=”_self” href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

<a target=”_self” href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

Обе ссылки будут открыты в текущей вкладке браузер, следовательно, мы можем не указывать атрибут target со значением _self, если хотим, чтобы документ по ссылке открывался в текущей вкладке браузера. Пример открытия ссылки в новой вкладке/окне:

<a href=”//zametkinapolyah.ru/” title=”Ссылка будет открыта в новой вкладке благодаря значению _blanc” >Создание сайтов</a>

Ссылка из примера выше будет открыта в новой вкладке, так как для нее мы указали атрибут target=”_blanc”. Обращу ваше внимание на то, что не все посетители вашего сайта, мягко говоря, любят, когда ссылки на сайте открываются в новой вкладке автоматически (сам автор, мягко говоря, не очень любит сайты, на которых открытие в новой вкладке происходит автоматически), поэтому смею вам посоветовать использовать атрибут title с аналогичной подсказкой, в которой вы сообщите посетителю, что ссылка будет открыта в новой вкладке.

Якорь в HTML или внутренние HTML ссылки. Постраничная навигация в HTML

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

Мы уже знаем, что для создания HTML якоря используется специальный атрибут name, который позволяет задать имя якорю (имя метки, на которую будет вести ссылка). Общий синтаксис якоря будет выглядеть примерно следующим образом:

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

<a href=”#my_position”>Браузер осуществит переход к тому месту, где расположен якорь my_position</a>

Путь ссылки в атрибуте href из примера сверху начинается с символа «#» или хэш. Этот символ используется для того, чтобы сказать браузере о том, что данная ссылка является внутри страничной, то есть ведет не на другую страницу, а к какому-то определенному месту текущего документа. Конструкция my_position указывает к какому конкретно месту ведет данная ссылка. Как вы, наверное, поняли, чтобы постраничная навигация в HTML документе работала, нужно чтобы имя HTML якоря в атрибуте name совпадало с адресом ссылки в атрибуте href, которая ведет к данному якорю.

Стоит обратить внимание на то, как браузер работает с якорями. Когда вы переходите к HTML якорю и затем нажимаете кнопу «Назад», то браузер будет возвращать вас не на предыдущую открытую страницу, а к тому месту в HTML документе, где расположена ссылка на якорь.

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

<a href=”//zametkinapolyah.ru/zametki-o-mysql/chast-12-8-poluchit-znachenie-iz-bazy-dannyx-v-diapazone-between-i-select-v-sql-i-bazax-dannyx-sqlite.html#_BETWEEN_SELECT_SQL__SQLite ”>Переход будет осуществлен к разделу HTML документа, а не к его началу </a>

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

Минусом использования HTML якоря является то, что браузеру приходится создавать лишний пустой HTML элемент на странице, а нам приходится писать немного больше HTML кода, поэтому стандарт разрешает использовать HTML идентификаторы для того, чтобы делать постраничную навигацию в HTML документе. Напомним, что для создания HTML идентификатора используется атрибут id. Такой подход очень удобен, если вы разделяете документ при помощи HTML заголовков на разделы. Давайте посмотрим пример создания постраничной навигации в HTML при помощи идентификаторов. Сперва нам нужно задать идентификаторы для тех элементов страницы, к которым будут вести ссылки, например:

<h4 id=”head1”>Первый заголовок</h4> <h4 id=”head2”>Второй заголовок</h4> <h4 id=”head3”>Третий заголовок</h4>

<h4 id=”head1”>Первый заголовок</h4>

<h4 id=”head2”>Второй заголовок</h4>

<h4 id=”head3”>Третий заголовок</h4>

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

<ul> <li><a href=”#head1”>Ссылка на раздел первого заголовка</a></li> <li><a href=”#head3”>Ссылка на раздел второго заголовка</a></li> <li><a href=”#head3”>Ссылка на раздел третьего заголовка</a></li> </ul>

<ul>

<li><a href=”#head1”>Ссылка на раздел первого заголовка</a></li>

<li><a href=”#head3”>Ссылка на раздел второго заголовка</a></li>

<li><a href=”#head3”>Ссылка на раздел третьего заголовка</a></li>

</ul>

Для создания постраничной навигации мы использовали HTML списки и ссылки, каждая ссылка будет вести не на другой HTML документ, а к определенному разделу страницы. Соответствие между ссылкой и разделом страницы устанавливается при помощи атрибутов id и href: их значения должны совпадать. А путь, который указывается в атрибуте href должен начинаться с символа «#».

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

Путь ссылки в HTML: абсолютные и относительные ссылки

Мы уже упоминали, что у HTML ссылок есть путь, путь бывает относительным и абсолютным, например, пути: //zametkinapolyah.ru/ и //zametkinapolyah.ru/verstka-sajtov, являются абсолютными, так как такие ссылки будут однозначно идентифицировать ресурс, по которому находится документ из любой точки. При этом неважно, где такая ссылка проставлена: на сайте в Австралии или же в презентации PowerPoint на вашем компьютере. Собственно, мы уже ранее подробно рассмотрели использование абсолютных HTML ссылок.

Давайте лучше поговорим про относительные HTML ссылки. Особенностью таких ссылок является то, что путь для них указывается относительно какого-то объекта файловой системы компьютера, на котором расположен ваш документ или сайт. Такие ссылки будут работать только внутри этой файловой системы или сайта. Например, ссылка:

Будет вести к разделу HTML на моем блоге, если такую ссылку поставить на кулинарном сайте, то она никогда не будет работать, так как на кулинарном блоге вы навряд ли найдете раздел HTML. Эта ссылка относительная и она относительна структуре моего блога, можно ставить относительные HTML ссылки, которые будут относительны файловой системы, то есть путь к HTML документу будет указан относительно какого-то файла или корня жесткого диска, например:

<a href=”C:\Users\Aspire\Desktop\HTML\Lesson 5\space.html”>Пример пробелов в HTML</a>

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

Цвета HTML ссылок. Учимся менять цвет ссылки при помощи HTML атрибутов

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

Если можно так сказать, то у ссылок в HTML есть три состояния:

Обычная ссылка, по которой еще не переходил пользователь.
Ссылка, по которой пользователь осуществлял переход.
Ссылка на текущий документ (документ открытый в данный момент).

Каждое из этих состояний отмечается специальным цветом в HTML: не посещённые ссылки по умолчанию отображаются браузером синим цветом, ссылки, которые пользователь уже посетил пурпурные, а текущие ссылки браузеры обычно выделяют красным цветом.

Но что делать, если цвета HTML ссылок по умолчанию не вписываются в дизайн вашего ресурса? Вопрос хороший и ответ на него не столь очевиден, как хотелось бы. Да, мы можем менять цвет ссылок и при помощи средств CSS, и при помощи HTML, но многие пользователи привыкли к стандартной цветовой схеме ссылок настолько, что не всегда смогут понять, что текст, выделенный другим цветом – это ссылка. Поэтому рекомендую вам менять цвет HTML ссылок осторожно.

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

У <body> для изменения цвета ссылок есть три атрибута:

Атрибут link. Используется для изменения цвета ссылок, которые пользователь еще не посетил.
Атрибут vlink. Позволяет изменить цвет ссылок, которые пользователь уже посетил.
Атрибут alink. Изменяет цвет активной HTML ссылки.

Такой подход лучше не использовать, так как содержимое лучше отделять от его оформления.

Примеры использования HTML ссылок

Теперь давайте создадим HTML документ, в котором попрактикуемся в создании HTML ссылок. Для этого нам потребуется редактор, можно даже Блокнот (хотя есть множество прекрасных и многофункциональных альтернатив: IDE NetBeans, Brackets, Notepad++, Sublime Text 3), и браузер. Создадим простой HTML документ:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Ссылки в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Примеры работы с ссылками в HTML</h2><a name=»top_document»></a> <h4>Навигация по странице</h4> <ul> <li><a href=»#head1″>Абсолютный путь</a></li> <li><a href=»#head2″>Относительный путь</a></li> <li><a href=»#head3″>Атрибут target со значением _blanc</a></li> <li><a href=»#head4″>Межстраничная навишация</a></li> <li><a href=»#head5″>Якорь в HTML</a></li> </ul> <h3>Примеры с использованием абсолютного пути</h3> <p>Для HTML ссылок можно задавать абсолютный путь, в этом случае документ, к которому ведет ссылка может быть открыт из любого места земного шара и на любом устройстве, например <a href=»//zametkinapolyah.ru/»>Блог о создании сайтов</a></p> <h3>Примеры с использованием относительного пути</h3> <p>Нужно понимать, что относительный путь получил свое название от того, что он строится относительно какой-то физической точки, например, папки на вашем компютере или корня вашего сайта. Приведем простой пример ссылки с относительным путем: <a href=»..\Lesson 5\pre.html»>пример авторского форматирования</a>. В данном случае мы создали ссылку с относительным путем. Относительный он потому, что такая ссылка будет работать только на локальном компюьтере с определенной файловой системой.</p> <h3>Пример открытия HTML ссылки в новом окне</h3> <p>Атрибут target позволяет сказать браузеру о том, как открывать ссылку, давайте сделаем так, чтобы ссылка открывлась в новом окне: <a href=»//zametkinapolyah.ru/» target=»_blanc» title=»Ссылка откроется в новом окне»> Блог о создании сайтов</a>. Не злоупотребляйте использованием данного атрибута.</p> <h3>Пример межстраничной навигации</h3> <p>Любое меню на сайте в 99 случаях из 100 — это комбинация HTML ссылок и HTML списков:</p> <ul> <li><a href=»//zametkinapolyah.ru/verstka-sajtov»>Верстка сайтов</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/css»>CSS</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/html»>HTML</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/less»>LESS</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/sass»>SASS</a></li> </ul> <p> Мы создали простое меню на сайте или другими словами: мы создали межстраничную навигацию для сайта. Меню довольно простое и никак не оформлена, но в скором времени мы исправим данную ситуацию, когда начнем изучать CSS. </p> <h3>Пример ссылки на скачивание</h3> <p> Атрибут download один из тех редких атрибутов, который не имеет значений, а назначение его — говорить браузеру о том, что данная ссылка является ссылкой на скачивание: <a href=»..\Lesson 5\pre.html» download> Скачать файл</a>. </p> <p> Вам нужно понимать, как работают ссылки с относительным путем, чтобы успешно создавать ссылки на скачивание в своих HTML документах. </p> <h3>Создание HTML якоря</h3> <p> И в завершении примера рассмотрим HTML якорь, мы создали якорь рядом с заголвком h2, а теперь сделаем ссылку на якорь: <a href=»#top_document»>наверх</a> </p> </body> </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<!DOCTYPE html>

<head>

<title>Ссылки в HTML</title>

</head>

<body>

<h2>Примеры работы с ссылками в HTML</h2><a name=»top_document»></a>

<h4>Навигация по странице</h4>

<ul>

<li><a href=»#head1″>Абсолютный путь</a></li>

<li><a href=»#head2″>Относительный путь</a></li>

<li><a href=»#head3″>Атрибут target со значением _blanc</a></li>

<li><a href=»#head4″>Межстраничная навишация</a></li>

<li><a href=»#head5″>Якорь в HTML</a></li>

</ul>

<h3>Примеры с использованием абсолютного пути</h3>

<p>Для HTML ссылок можно задавать абсолютный путь, в этом случае

документ, к которому ведет ссылка может быть открыт из любого места

земного шара и на любом устройстве, например

<a href=»//zametkinapolyah.ru/»>Блог о создании сайтов</a></p>

<h3>Примеры с использованием относительного пути</h3>

<p>Нужно понимать, что относительный путь получил свое название от того, что

он строится относительно какой-то физической точки, например, папки на

вашем компютере или корня вашего сайта. Приведем простой пример ссылки с относительным

путем: <a href=»..\Lesson 5\pre.html»>пример авторского форматирования</a>. В данном

случае мы создали ссылку с относительным путем. Относительный он потому,

что такая ссылка будет работать только на локальном компюьтере с определенной

файловой системой.</p>

<h3>Пример открытия HTML ссылки в новом окне</h3>

<p>Атрибут target позволяет сказать браузеру о том, как открывать ссылку, давайте

сделаем так, чтобы ссылка открывлась в новом окне:

Блог о создании сайтов</a>. Не злоупотребляйте использованием данного атрибута.</p>

<h3>Пример межстраничной навигации</h3>

<p>Любое меню на сайте в 99 случаях из 100 — это комбинация HTML ссылок и HTML списков:</p>

<ul>

<li><a href=»//zametkinapolyah.ru/verstka-sajtov»>Верстка сайтов</a></li>

</ul>

<p>

Мы создали простое меню на сайте или другими словами: мы создали межстраничную навигацию для сайта.

Меню довольно простое и никак не оформлена, но в скором времени мы исправим данную ситуацию,

когда начнем изучать CSS.

</p>

<h3>Пример ссылки на скачивание</h3>

<p>

Атрибут download один из тех редких атрибутов, который не имеет значений,

а назначение его — говорить браузеру о том, что данная ссылка является ссылкой

на скачивание:

Скачать файл</a>.

</p>

<p>

Вам нужно понимать, как работают ссылки с относительным путем, чтобы успешно создавать

ссылки на скачивание в своих HTML документах.

</p>

<h3>Создание HTML якоря</h3>

<p>

И в завершении примера рассмотрим HTML якорь, мы создали якорь рядом с

заголвком h2, а теперь сделаем ссылку на якорь: <a href=»#top_document»>наверх</a>

</p>

</body>

</html>

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

Ссылка на элемент HTML — по категории

Tag	Описание
	Определяет вид документа
	Определяет HTML-документ
	Содержит метаданные / информацию для документа
</td><td> Определяет заголовок для документа</td></tr><tr><td><body></td><td> Определяет тело документа</td></tr><tr><td><div> до<h6></td><td> Определяет заголовки HTML</td></tr><tr><td><p></td><td> Определяет абзац</td></tr><tr><td> <br></td><td> Вставляет один разрыв строки</td></tr><tr><td> <900><td> Определяет тематическое изменение содержания</td></tr><tr><td> <! -...--></td><td> Определяет комментарий</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <аббревиатура></td><td> Не поддерживается в HTML5. Используйте вместо этого <abbr>. <br/> Определяет аббревиатуру</td></tr><tr><td> <abbr></td><td> Определяет аббревиатуру или аббревиатуру</td></tr><tr><td> <адрес></td><td> Определяет контактную информацию автора / владельца документа / статьи</td></tr><tr><td> <900><td> Определяет жирный текст</td></tr><tr><td> <bdi></td><td> Изолирует часть текста, которая может быть отформатирована в другом направлении. из другого текста за его пределами</td></tr><tr><td> <bdo></td><td> Переопределяет текущее направление текста</td></tr><tr><td> <большой></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет большой текст</td></tr><tr><td><blockquote></td><td> Определяет раздел, который цитируется из другого источника</td></tr><tr><td> <центр></td><td> Не поддерживается в HTML5. Вместо этого используйте CSS. <br/> Определяет центрированный текст</td></tr><tr><td><td> Определяет название произведения</td></tr><tr><td> <code></td><td> Определяет кусок компьютерного кода</td></tr><tr><td> <del></td><td> Определяет текст, который был удален из документа</td></tr><tr><td> <dfn></td><td> Определяет термин, который будет определен в контенте</td></tr><tr><td> <em></td><td> Определяет выделенный текст</td></tr><tr><td> <font></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет шрифт, цвет и размер текста</td></tr><tr><td> <я></td><td> Определяет часть текста альтернативным голосом или настроением</td></tr><tr><td> <ins></td><td> Определяет текст, который был вставлен в документ</td></tr><tr><td> <кбд></td><td> Определяет ввод с клавиатуры</td></tr><tr><td> <отметка></td><td> Определяет помеченный / выделенный текст</td></tr><tr><td> <метр></td><td> Определяет скалярное измерение в известном диапазоне (датчик)</td></tr><tr><td> <pre></td><td> Определяет предварительно отформатированный текст</td></tr><tr><td> <прогресс></td><td> Представляет ход выполнения задачи</td>.</tr><tr><td> <q></td><td> Определяет короткую цитату</td></tr><tr><td> <rp></td><td> Определяет, что отображать в браузерах, которые не поддерживают рубиновые аннотации</td></tr><tr><td><td> Определяет объяснение / произношение символов (для восточноазиатских типография)</td></tr><tr><td> <ruby></td><td> Определяет рубиновую аннотацию (для восточноазиатской типографии)</td></tr><tr><td> <s></td><td> Определяет текст, который больше не является правильным</td></tr><tr><td> <образец></td><td> Определяет пример вывода из компьютерной программы</td></tr><tr><td> <маленький></td><td> Определяет меньший текст</td></tr><tr><td> <забастовка></td><td> Не поддерживается в HTML5.Вместо этого используйте <del> или <s>. <br/> Определяет зачеркнутый текст</td></tr><tr><td> <strong></td><td> Определяет важный текст</td></tr><tr><td> <sub></td><td> Определяет подписанный текст</td></tr><tr><td> <sup></td><td> Определяет надстрочный текст</td></tr><tr><td> <шаблон></td><td> Определяет контейнер для контента, который должен быть скрыт при загрузке страницы</td></tr><tr><td> <время></td><td> Определяет определенное время (или дату / время)</td></tr><tr><td> <tt></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет телетайпный текст</td></tr><tr><td> <u></td><td> Определяет некоторый текст, который не выделен и оформлен иначе, чем обычный текст</td></tr><tr><td> <var></td><td> Определяет переменную</td></tr><tr><td> <wbr></td><td> Определяет возможный разрыв строки</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <форма></td><td> Определяет форму HTML для пользовательского ввода</td></tr><tr><td> <вход></td><td> Определяет элемент управления вводом</td></tr><tr><td> <textarea></td><td> Определяет управление многострочным вводом (текстовая область)</td></tr><tr><td> <кнопка></td><td> Определяет нажимаемую кнопку</td></tr><tr><td> <выбрать></td><td> Определяет раскрывающийся список</td></tr><tr><td><optgroup></td><td> Определяет группу связанных параметров в раскрывающемся списке</td></tr><tr><td> <опция></td><td> Определяет параметр в раскрывающемся списке</td></tr><tr><td> <ярлык></td><td> Определяет метку для элемента <input></td></tr><tr><td><fieldset></td><td> Группирует связанные элементы в форме</td></tr><tr><td> <легенда></td><td> Определяет заголовок для элемента<fieldset></td></tr><tr><td> <datalist></td><td> Указывает список предопределенных параметров для элементов управления вводом</td>.</tr><tr><td> <вывод></td><td> Определяет результат расчета</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <img></td><td> Определяет изображение</td></tr><tr><td> <карта></td><td> Определяет клиентскую карту изображения</td></tr><tr><td> <область></td><td> Определяет область внутри карты изображения</td></tr><tr><td> <холст></td><td> Используется для рисования графики на лету с помощью сценариев (обычно JavaScript)</td></tr><tr><td><figcaption></td><td> Определяет заголовок для элемента<figure></td></tr><tr><td> <цифра></td><td> Указывает автономный контент</td></tr><tr><td> <изображение></td><td> Определяет контейнер для нескольких ресурсов изображений</td></tr><tr><td> <svg></td><td> Определяет контейнер для графики SVG</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td><ul></td><td> Определяет неупорядоченный список</td></tr><tr><td><ol></td><td> Определяет упорядоченный список</td></tr><tr><td><li></td><td> Определяет элемент списка</td></tr><tr><td><dir></td><td> Не поддерживается в HTML5.Используйте вместо этого<ul>. <br/> Определяет список каталогов</td></tr><tr><td> <900><td> Определяет список описания</td></tr><tr><td><dt></td><td> Определяет термин / имя в списке описания</td></tr><tr><td> <дд></td><td> Определяет описание термина / имени в списке описания</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <стол></td><td> Определяет таблицу</td></tr><tr><td> <подпись></td><td> Определяет заголовок таблицы</td></tr><tr><td> th</td><td> Определяет ячейку заголовка в таблице</td></tr><tr><td><tr></td><td> Определяет строку в таблице</td></tr><tr><td> <тд></td><td> Определяет ячейку в таблице</td></tr><tr><td><thead></td><td> Группирует содержимое заголовка в таблице</td></tr><tr><td><tbody></td><td> Группирует содержание тела в таблице</td></tr><tr><td><tfoot></td><td> Группирует нижний колонтитул в таблице</td></tr><tr><td><col></td><td> Задает свойства столбца для каждого столбца в элементе<colgroup></td>.</tr><tr><td><colgroup></td><td> Указывает группу из одного или нескольких столбцов в таблице для форматирования</td>.</tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <стиль></td><td> Определяет информацию о стиле для документа</td></tr><tr><td><div></td><td> Определяет раздел в документе</td></tr><tr><td> <span></td><td> Определяет раздел в документе</td></tr><tr><td><header></td><td> Определяет заголовок для документа или раздела</td></tr><tr><td> <нижний колонтитул></td><td> Определяет нижний колонтитул для документа или раздела</td></tr><tr><td> <основной></td><td> Указывает основное содержание документа</td>.</tr><tr><td> <раздел></td><td> Определяет раздел в документе</td></tr><tr><td> <артикул></td><td> Определяет артикул</td></tr><tr><td> <в сторону></td><td> Определяет содержимое помимо содержимого страницы</td></tr><tr><td> <подробно></td><td> Определяет дополнительные детали, которые пользователь может просматривать или скрывать</td></tr><tr><td> <диалог></td><td> Определяет диалоговое окно или окно</td></tr><tr><td> <резюме></td><td> Определяет видимый заголовок для элемента <details></td></tr><tr><td> <данные></td><td> Добавляет машиночитаемый перевод данного контента</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td><head></td><td> Определяет информацию о документе</td></tr><tr><td> <мета></td><td> Определяет метаданные о документе HTML</td></tr><tr><td> <база></td><td> Определяет базовый URL / цель для всех относительных URL в документе</td></tr><tr><td><basefont></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Указывает цвет, размер и шрифт по умолчанию для всего текста в документе</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <скрипт></td><td> Определяет клиентский скрипт</td></tr><tr><td> <noscript></td><td> Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты</td></tr><tr><td> <апплет></td><td> Не поддерживается в HTML5.Вместо этого используйте <embed> или <object>. <br/> Определяет встроенный апплет</td></tr><tr><td> <embed></td><td> Определяет контейнер для внешнего (не HTML) приложения.</td></tr><tr><td> <объект></td><td> Определяет внедренный объект</td></tr><tr><td><param></td><td> Определяет параметр для объекта</td></tr></table>.<table class="table table-hover"><div> HTML-атрибуты</h2><tr> Атрибут<th></th><th> Принадлежит к</th><th> Описание</th></tr><tr><td> принять</td><td> <input></td><td> Указывает типы файлов, которые принимает сервер (только для type = "file")</td></tr><tr><td> принять кодировку</td><td> <форма></td><td> Указывает кодировки символов, которые должны использоваться для формы представление</td></tr><tr><td> accesskey</td><td> Глобальные атрибуты</td><td> Указывает сочетание клавиш для активации / фокусировки элемента</td>.</tr><tr><td> экшн</td><td> <форма></td><td> Указывает, куда отправлять данные формы при отправке формы.</td></tr><tr><td> выравнивают</td><td> Не поддерживается в HTML 5.</td><td> Определяет выравнивание в соответствии с окружающими элементами. Используйте CSS вместо</td></tr><tr><td> альт</td><td><area>, <img>, <input></td><td> Указывает альтернативный текст, когда исходный элемент не отображается</td></tr><tr><td> асинхронный</td><td> <script></td><td>Указывает,что скрипт выполняется асинхронно(только для внешних сценарии)</td></tr><tr><td>автозаполнение</td><td><форма>,<вход></td><td>Указывает,должен ли элемент<form>или<input>иметь автозаполнение включен</td></tr><tr><td>автофокус</td><td><кнопка>,<вход>,<выбор>,<текстовое поле></td><td>Указывает,что элемент должен автоматически получать фокус,когда страница грузы</td></tr><tr><td>Autoplay</td><td><аудио>,<видео></td><td>Указывает,что аудио/видео начнет воспроизводиться,как только будет готово.</td></tr><tr><td>bgcolor</td><td>Не поддерживается в HTML 5.</td><td>Определяет цвет фона элемента.Используйте CSS вместо</td></tr><tr><td>границы</td><td>Не поддерживается в HTML 5.</td><td>Определяет ширину границы элемента.Используйте CSS вместо</td></tr><tr><td>кодировки</td><td><meta>,<script></td><td>Определяет кодировку символов</td></tr><tr><td>проверено</td><td><input></td><td>Указывает,что элемент<input>должен быть предварительно выбран при загрузке страницы.(для type="checkbox"или type="radio")</td></tr><tr><td>процитировать</td><td><blockquote>,<del>,<ins>,<q></td><td>Указывает URL,который объясняет цитату/удаленный/вставленный текст</td></tr><tr><td>класс</td><td>Глобальные атрибуты</td><td>Указывает одно или несколько имен классов для элемента(относится к классу в таблица стилей)</td></tr><tr><td>цвет</td><td>Не поддерживается в HTML 5.</td><td>Определяет цвет текста элемента.Используйте CSS вместо</td></tr><tr><td>кол</td><td><textarea></td><td>Определяет видимую ширину текстовой области</td></tr><tr><td>colspan</td><td><td>,<th></td><td>Указывает количество столбцов,которое ячейка таблицы должна охватывать</td>.</tr><tr><td>содержание</td><td><мета></td><td>Дает значение,связанное с http-эквивалент или атрибутом имени</td></tr><tr><td>Contenteditable</td><td>Глобальные атрибуты</td><td>Указывает,является ли содержимое элемента доступным для редактирования или нет</td></tr><tr><td>контролирует</td><td><аудио>,<видео></td><td>Указывает,что должны отображаться элементы управления аудио/видео(например,кнопка воспроизведения/паузы и т.д.)</td></tr><tr><td>координат</td><td><область></td><td>Указывает координаты области</td></tr><tr><td>данных</td><td><объект></td><td>Определяет URL ресурса,который будет использоваться объектом</td></tr><tr><td>data-</td><td>Глобальные атрибуты</td><td>Используется для хранения пользовательских данных,приватных для страницы или приложения.</td></tr><tr><td>дата-время</td><td><del>,<ins>,<time></td><td>Указывает дату и время</td></tr><tr><td>по умолчанию</td><td><дорожка></td><td>Указывает,что дорожка должна быть включена,если настройки пользователя не указать,что другой трек будет более подходящим</td></tr><tr><td>отсрочка</td><td><script></td><td>Указывает,что сценарий выполняется после завершения анализа страницы (только для внешних скриптов)</td></tr><tr><td>dir</td><td>Глобальные атрибуты</td><td>Указывает направление текста для содержимого в элементе</td></tr><tr><td>dirname</td><td><input>,<textarea></td><td>Указывает,что направление текста будет отправлено</td></tr><tr><td>инвалидов</td><td><кнопка>,<fieldset>,<input>,<optgroup>,<option>,<select>,<textarea></td><td>Указывает,что указанный элемент/группа элементов должны быть отключены.</td></tr><tr><td>скачать</td><td><a>,<area></td><td>Указывает,что цель будет загружена,когда пользователь нажимает на гиперссылка</td></tr><tr><td>перетаскиваемый</td><td>Глобальные атрибуты</td><td>Указывает,является ли элемент перетаскиваемым или нет.</td></tr><tr><td>энктип</td><td><форма></td><td>Указывает,как данные формы должны быть закодированы при отправке в сервер(только для method="post")</td></tr><tr><td>за</td><td><label>,<output></td><td>Указывает,к какому элементу(ам)формы метка/расчет привязана к</td></tr><tr><td>форма</td><td><кнопка>,<fieldset>,<input>,<label>,<meter>,<object>,<output>,<select>,<textarea></td><td>Указывает имя формы,которой принадлежит элемент</td>.</tr><tr><td>Формирование</td><td><кнопка>,<вход></td><td>Указывает,куда отправлять данные формы при отправке формы.Только для type="submit"</td></tr><tr><td>заголовков</td><td><td>,<th></td><td>Указывает одну или несколько ячеек заголовков,с которыми связана ячейка</td></tr><tr><td>высота</td><td><canvas>,<embed>,<iframe>,<img>,<input>,<object>,<video></td><td>Указывает высоту элемента</td></tr><tr><td>скрыто</td><td>Глобальные атрибуты</td><td>Указывает,что элемент еще не является или более не имеет значения</td></tr><tr><td>высотой</td><td><метр></td><td>Указывает диапазон,который считается высоким значением</td></tr><tr><td>HREF</td><td><a>,<area>,<base>,<link></td><td>Указывает URL-адрес страницы,на которую ведет ссылка</td></tr><tr><td>hreflang</td><td><a>,<area>,<link></td><td>Указывает язык связанного документа</td></tr><tr><td>http-эквивалент</td><td><мета></td><td>Предоставляет заголовок HTTP для информации/значения атрибута содержимого</td></tr><tr><td>ID</td><td>Глобальные атрибуты</td><td>Указывает уникальный идентификатор для элемента</td></tr><tr><td>ismap</td><td><img></td><td>Определяет изображение как карту изображения на стороне сервера</td></tr><tr><td>вид</td><td><дорожка></td><td>Указывает вид текстовой дорожки</td></tr><tr><td>ярлык</td><td><track>,<option>,<optgroup></td><td>Указывает заголовок текстовой дорожки</td>.</tr><tr><td>lang</td><td>Глобальные атрибуты</td><td>Указывает язык содержимого элемента</td></tr><tr><td>список</td><td><input></td><td>Относится к элементу<datalist>,который содержит предопределенные параметры для<input>элемент</td></tr><tr><td>петля</td><td><аудио>,<видео></td><td>Указывает,что аудио/видео будет начинаться заново каждый раз,когда закончил</td></tr><tr><td>низкий</td><td><метр></td><td>Указывает диапазон,который считается низким значением</td></tr><tr><td>макс</td><td><input>,<meter>,<progress></td><td>Указывает максимальное значение</td></tr><tr><td>максимальная длина</td><td><input>,<textarea></td><td>Задает максимально допустимое количество символов в элементе</td>.</tr><tr><td>медиа</td><td><a>,<area>,<link>,<source>,<style></td><td>Указывает,на каком носителе/устройстве связанный документ оптимизирован для</td>.</tr><tr><td>метод</td><td><форма></td><td>Указывает метод HTTP,используемый при отправке данных формы</td></tr><tr><td>мин.</td><td><вход>,<метр></td><td>Указывает минимальное значение</td></tr><tr><td>кратный</td><td><input>,<select></td><td>Указывает,что пользователь может ввести более одного значения</td></tr><tr><td>приглушенный</td><td><видео>,<аудио></td><td>Указывает,что аудиовыход видео должен быть отключен.</td></tr><tr><td>имя</td><td><кнопка>,<fieldset>,<form>,<iframe>,<input>,<map>,<meta>,<object>,<output>,<param>,<select>,<textarea></td><td>Указывает имя элемента</td></tr><tr><td>Новалидат</td><td><форма></td><td>Указывает,что форма не должна проверяться при отправке</td></tr><tr><td>онаборт</td><td><audio>,<embed>,<img>,<object>,<video></td><td>Сценарий для запуска при прерывании</td></tr><tr><td>onafterprint</td><td><body></td><td>Скрипт,запускаемый после печати документа</td></tr><tr><td>на отпечаток</td><td><body></td><td>Скрипт,запускаемый до печати документа</td></tr><tr><td>перед загрузкой</td><td><body></td><td>Скрипт,запускаемый при выгрузке документа</td></tr><tr><td>онблур</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда элемент теряет фокус</td></tr><tr><td>oncanplay</td><td><audio>,<embed>,<object>,<video></td><td>Скрипт,запускаемый,когда файл готов начать воспроизведение(когда он буферизован).достаточно для начала)</td></tr><tr><td>может пройти через</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда файл может быть воспроизведен до конца без пауза для буферизации</td></tr><tr><td>onchange</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при изменении значения элемента</td></tr><tr><td>onclick</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при щелчке элемента</td></tr><tr><td>oncontextmenu</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при запуске контекстного меню</td></tr><tr><td>онкопия</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при копировании содержимого элемента</td></tr><tr><td>oncuechange</td><td><дорожка></td><td>Скрипт,запускаемый при изменении метки в элементе<track></td></tr><tr><td>выреза</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при вырезании содержимого элемента</td></tr><tr><td>ondblclick</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при двойном щелчке элемента</td></tr><tr><td>ондраг</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при перетаскивании элемента</td></tr><tr><td>ondragend</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый в конце операции перетаскивания</td></tr><tr><td>ondragenter</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при перетаскивании элемента на допустимую цель удаления</td></tr><tr><td>ondragleave</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда элемент покидает допустимую цель удаления</td></tr><tr><td>ондраговер</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при перетаскивании элемента на допустимую цель удаления</td></tr><tr><td>ondragstart</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый в начале операции перетаскивания</td></tr><tr><td>ondrop</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при отбрасывании перетаскиваемого элемента</td></tr><tr><td>ondurationchange</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при изменении длины носителя</td></tr><tr><td>пустых</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда происходит что-то плохое и файл неожиданно недоступен(например,неожиданно отключается)</td></tr><tr><td>перешли на</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда носитель подходит к концу(полезное событие для сообщения типа"спасибо за прослушивание")</td></tr><tr><td>ошибка</td><td><audio>,<body>,<embed>,<img>,<object>,<script>,<style>,<video></td><td>Скрипт,запускаемый при возникновении ошибки</td></tr><tr><td>onfocus</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда элемент получает фокус</td></tr><tr><td>onhashchange</td><td><body></td><td>Скрипт,запускаемый при изменениях в якорной части URL-адреса</td></tr><tr><td>на входе</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда элемент получает пользовательский ввод</td></tr><tr><td>oninvalid</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда элемент недействителен</td></tr><tr><td>onkeydown</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда пользователь нажимает клавишу</td></tr><tr><td>onkeypress</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда пользователь нажимает клавишу</td></tr><tr><td>onkeyup</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда пользователь отпускает ключ</td></tr><tr><td>нагрузка</td><td><body>,<iframe>,<img>,<input>,<link>,<script>,<style></td><td>Скрипт,запускаемый после завершения загрузки элемента</td></tr><tr><td>загруженных данных</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при загрузке медиа-данных</td></tr><tr><td>загруженных метаданных</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при загрузке метаданных(например,измерений и продолжительности)</td></tr><tr><td>onloadstart</td><td><аудио>,<видео></td><td>Скрипт,запускаемый так же,как файл начинает загружаться до того,как что-либо на самом деле загружен</td></tr><tr><td>по городу</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при нажатии кнопки мыши на элементе</td></tr><tr><td>onmousemove</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый до тех пор,пока указатель мыши перемещается над элементом</td></tr><tr><td>onmouseout</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда указатель мыши выходит из элемента</td></tr><tr><td>onmouseover</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда указатель мыши перемещается над элементом</td></tr><tr><td>onmouseup</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при отпускании кнопки мыши над элементом</td></tr><tr><td>onmousewheel</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при прокрутке колесика мыши над элементом</td></tr><tr><td>on-line</td><td><body></td><td>Скрипт,запускаемый,когда браузер начинает работать в автономном режиме</td></tr><tr><td>on-line</td><td><body></td><td>Скрипт,запускаемый,когда браузер начинает работать в сети</td></tr><tr><td>onpagehide</td><td><body></td><td>Скрипт,запускаемый,когда пользователь уходит со страницы</td></tr><tr><td>onpageshow</td><td><body></td><td>Скрипт,запускаемый,когда пользователь переходит на страницу</td></tr><tr><td>паста</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда пользователь вставляет некоторый контент в элемент</td></tr><tr><td>на паузу</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда носитель приостановлен либо пользователем,либо программно</td></tr><tr><td>onplay</td><td><аудио>,<видео></td><td>Скрипт,запускаемый после начала воспроизведения медиа</td></tr><tr><td>,играющий</td><td><аудио>,<видео></td><td>Скрипт,запускаемый после начала воспроизведения медиа</td></tr><tr><td>onpopstate</td><td><body></td><td>Скрипт,запускаемый при изменении истории окна.</td></tr><tr><td>onprogress</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда браузер находится в процессе получения медиа данные</td></tr><tr><td>onratechange</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при каждом изменении скорости воспроизведения(например,когда пользователь переключается в режим замедленной съемки или ускоренной перемотки вперед).</td></tr><tr><td>на</td><td><форма></td><td>Скрипт,запускаемый при нажатии кнопки сброса в форме.</td></tr><tr><td>на размер</td><td><body></td><td>Скрипт,запускаемый при изменении размера окна браузера.</td></tr><tr><td>onscroll</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при прокрутке полосы прокрутки элемента</td></tr><tr><td>onsearch</td><td><input></td><td>Скрипт,запускаемый,когда пользователь что-то пишет в поле поиска(для<input="search">)</td></tr><tr><td>искомых</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда атрибут поиска имеет значение false,указывающее,что поиск закончился</td></tr><tr><td>видит</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда для атрибута поиска установлено значение true,указывающее,что Поиск активен</td></tr><tr><td>onselect</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый при выделении элемента</td></tr><tr><td>установлено</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда браузер не может получить медиа-данные для по любой причине</td></tr><tr><td>на складе</td><td><body></td><td>Скрипт,запускаемый при обновлении области веб-хранилища</td></tr><tr><td>на подачу</td><td><форма></td><td>Скрипт,запускаемый при отправке формы</td></tr><tr><td>onsuspend</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при извлечении медиа-данных,останавливается до того,как полностью загружен по любой причине</td></tr><tr><td>своевременно обновлять</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при изменении игровой позиции(например,когда пользователь перемотка вперед в другой момент в СМИ)</td></tr><tr><td>onggle</td><td><подробно></td><td>Скрипт,запускаемый,когда пользователь открывает или закрывает элемент<details></td></tr><tr><td>onunload</td><td><body></td><td>Скрипт,запускаемый,когда страница выгружена(или окно браузера было закрыто)</td></tr><tr><td>onvolumechange</td><td><аудио>,<видео></td><td>Скрипт,запускаемый при каждом изменении громкости видео/аудио</td></tr><tr><td>в ожидании</td><td><аудио>,<видео></td><td>Скрипт,запускаемый,когда носитель приостановлен,но ожидается его возобновление(например,когда мультимедиа делает паузу для буферизации дополнительных данных)</td></tr><tr><td>на колесе</td><td>Все видимые элементы.</td><td>Скрипт,запускаемый,когда колесо мыши катится вверх или вниз над элементом</td></tr><tr><td>открыть</td><td><подробно></td><td>Указывает,что детали должны быть видны(открыты)пользователю</td></tr><tr><td>оптимально</td><td><метр></td><td>Указывает,какое значение является оптимальным для датчика</td>.</tr><tr><td>шаблон</td><td><input></td><td>Задает регулярное выражение для проверки значения элемента<input>.против</td></tr><tr><td>заполнитель</td><td><input>,<textarea></td><td>Указывает краткую подсказку,которая описывает ожидаемое значение элемента</td></tr><tr><td>постер</td><td><видео></td><td>Указывает изображение,которое будет отображаться во время загрузки видео или до пользователь нажимает кнопку воспроизведения</td></tr><tr><td>преднагрузка</td><td><аудио>,<видео></td><td>Указывает,думает ли автор и как аудио/видео должно быть загружено при страница загружается</td></tr><tr><td>только для чтения</td><td><input>,<textarea></td><td>Указывает,что элемент доступен только для чтения.</td></tr><tr><td>отн.</td><td><a>,<area>,<форма>,<ссылка></td><td>Задает связь между текущим документом и связанным документ</td></tr><tr><td>требуется</td><td><input>,<select>,<textarea></td><td>Указывает,что элемент должен быть заполнен перед отправкой формы</td></tr><tr><td>наоборот</td><td><ol></td><td>Указывает,что порядок списка должен быть в порядке убывания(9,8,7...)</td></tr><tr><td>строк</td><td><textarea></td><td>Определяет видимое количество строк в текстовой области</td></tr><tr><td>rowspan</td><td><td>,<th></td><td>Указывает количество строк,которое ячейка таблицы должна охватывать</td>.</tr><tr><td>песочница</td><td><iframe></td><td>Включает дополнительный набор ограничений для содержимого в<iframe></td></tr><tr><td>Объем</td><td>th th</td><td>Указывает,является ли ячейка заголовка заголовком для столбца,строки или группы столбцы или строки</td></tr><tr><td>выбрано</td><td><опция></td><td>Указывает,что параметр должен быть предварительно выбран при загрузке страницы</td></tr><tr>Форма<td></td><td><область></td><td>Определяет форму области</td></tr><tr><td>размер</td><td><input>,<select></td><td>Указывает ширину в символах(для<input>)или указывает количество видимые опции(для<select>)</td></tr><tr><td>размеры</td><td><img>,<ссылка>,<источник></td><td>Указывает размер связанного ресурса</td></tr><tr><td>пролет</td><td><col>,<colgroup></td><td>Указывает количество столбцов для охвата</td>.</tr><tr><td>проверка орфографии</td><td>Глобальные атрибуты</td><td>Указывает,нужно ли проверять орфографию и грамматику элемента или не</td></tr><tr><td>SRC</td><td><audio>,<embed>,<iframe>,<img>,<input>,<script>,<source>,<track>,<видео></td><td>Определяет URL медиа-файла</td></tr><tr><td>srcdoc</td><td><iframe></td><td>Указывает HTML-содержимое страницы для отображения в<iframe></td>.</tr><tr><td>сркланг</td><td><дорожка></td><td>Указывает язык текстовых данных дорожки(требуется,если kind="subtitles")</td></tr><tr><td>srcset</td><td><img>,<source></td><td>Указывает URL-адрес изображения для использования в различных ситуациях.</td></tr><tr><td>начало</td><td><ol></td><td>Указывает начальное значение упорядоченного списка</td></tr><tr><td>шаг</td><td><input></td><td>Указывает допустимые интервалы номеров для поля ввода</td>.</tr><tr><td>стиль</td><td>Глобальные атрибуты</td><td>Указывает встроенный стиль CSS для элемента</td></tr><tr><td>tabindex</td><td>Глобальные атрибуты</td><td>Определяет порядок табуляции элемента</td></tr><tr><td>цель</td><td><a>,<area>,<base>,<form></td><td>Указывает цель для того,где открыть связанный документ или где отправить форму</td></tr><tr><td>заголовок</td><td>Глобальные атрибуты</td><td>Указывает дополнительную информацию об элементе</td></tr><tr><td>перевести</td><td>Глобальные атрибуты</td><td>Указывает,следует ли переводить содержимое элемента.</td></tr><tr><td>тип</td><td><a>,<button>,<embed>,<input>,<link>,<menu>,<object>,<script>,<источник>,<стиль></td><td>Указывает тип элемента</td></tr><tr><td>usemap</td><td><img>,<объект></td><td>Определяет изображение как карту изображения на стороне клиента</td></tr><tr>Значение<td></td><td><кнопка>,<вход>,<li>,<опция>,<meter>,<progress>,<param></td><td>Указывает значение элемента</td></tr><tr><td>ширина</td><td><canvas>,<embed>,<iframe>,<img>,<input>,<object>,<video></td><td>Определяет ширину элемента</td></tr><tr><td>упаковка</td><td><textarea></td><td>Задает способ переноса текста в текстовой области при отправке в форма</td></tr></table>.<h2><span class="ez-toc-section"id="HTML-2">HTML-тег ввода</span></h2><br/><h4><span class="ez-toc-section"id="i-4">Пример</span></h4><p>HTML-форма с тремя полями ввода;два текстовых поля и одна кнопка отправки:</p><p><форма action="/ action_page.php"><br/><label for="fname">Имя:</label><br/><input type="text" name="fname"><br><br><br/><label for="lname">Фамилия:</label><br/><input type="text" name="lname"><br><br><br/><input type="submit"value="Submit"><br/></Форма></p>Попробуй сам »<br/><hr/><h3><span class="ez-toc-section"id="i-5">Определение и использование</span></h3><p>Тег<code><input></code>определяет поле ввода,в которое пользователь может вводить данные.</p><p>Элемент<code><input></code>является наиболее важный элемент формы.</p><p>Элемент<code><input></code>может быть отображен несколькими способами,в зависимости от атрибута типа.</p><p>Различные типы ввода следующие:</p><ul><li><code><input type="button"></code></li><li><code><input type="checkbox"></code></li><li><code><input type="color"></code></li><li><code><input type="date"></code></li><li><code><input type="datetime-local"></code></li><li><code><input type="email"></code></li><li><code><input type="file"></code></li><li><code><input type="hidden"></code></li><li><code><input type="image"></code></li><li><code><input type="month"></code></li><li><code><input type="number"></code></li><li><code><input type="password"></code></li><li><code><input type="radio"></code></li><li><code><input type="range"></code></li><li><code><input type="reset"></code></li><li><code><input type="search"></code></li><li><code><input type="submit"></code></li><li><code><input type="tel"></code></li><li><code><input type="text"></code>(значение по умолчанию)</li><li><code><input type="time"></code></li><li><code><input type="url"></code></li><li><code><input type="week"></code></li></ul><p>Посмотрите на атрибут типа,чтобы увидеть примеры для каждого типа ввода!</p><hr/><h3><span class="ez-toc-section"id="i-6">Советы и заметки</span></h3><p><b>Подсказка:</b>Всегда используйте тег<label>для определения меток для<code><input type="text"></code>,<code><input type="checkbox"></code>,<code><input type="radio"></code>,<code><input type="file"></code>и<code><input type="password"></code>.</p><hr/><h3><span class="ez-toc-section"id="i-7">Поддержка браузера</span></h3><table class="table table-hover"><tr><th>Элемент</th><th title="Chrome"/><th title="Internet Explorer / Edge"/><th title="Firefox"/><th title="Safari"/><th title="Opera"/></tr><tr><td><вход></td><td>Да</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td></tr></table><hr/><hr/><h3><span class="ez-toc-section"id="i-8">атрибутов</span></h3><table class="table table-hover"><tr><th>Атрибут</th><th>Значение</th><th>Описание</th></tr><tr><td>принять</td><td><em>file_extension</em><br/>аудио/<br/>видео/<br/>изображение/<br/><i>media_type</i></td><td>Указывает фильтр для типов файлов,которые пользователь может выбрать из файла.диалоговое окно ввода(только для type="file")</td></tr><tr><td>альт</td><td><i>текст</i></td><td>Указывает альтернативный текст для изображений(только для type="image")</td></tr><tr><td>автозаполнение</td><td>по<br/>выкл</td><td>Указывает,должен ли элемент<input>включать автозаполнение.</td></tr><tr><td>автофокус</td><td>автофокус</td><td>Указывает,что элемент<input>должен автоматически получать фокус при загрузке страницы.</td></tr><tr><td>проверено</td><td>проверено</td><td>Указывает,что элемент<input>должен быть предварительно выбран при загрузке страницы(для type="checkbox"или type="radio")</td></tr><tr><td>dirname</td><td><i>имя входа</i>.реж.</td><td>Указывает,что направление текста будет отправлено</td></tr><tr><td>отключен</td><td>отключен</td><td>Указывает,что элемент<input>должен быть отключен.</td></tr><tr><td>форма</td><td><i>form_id</i></td><td>Указывает форму,которой принадлежит элемент<input></td></tr><tr><td>formaction</td><td><i>URL</i></td><td>Указывает URL-адрес файла,который будет обрабатывать элемент управления вводом при отправке формы(для type="submit"и type="image")</td></tr><tr><td>formenctype</td><td>заявка/x-www-form-urlencoded<br/>multipart/form-data<br/>текст/простой</td><td>Указывает,как данные формы должны быть закодированы при отправке их на сервер(для type="submit"и type="image")</td></tr><tr><td>Formmethod</td><td>получить<br/>пост</td><td>Определяет метод HTTP для отправки данных по URL-адресу действия(для type="submit"и type="image")</td></tr><tr><td>Formnovalidate</td><td>Formnovalidate</td><td>Определяет,что элементы формы не должны проверяться при отправке</td></tr><tr><td>форма цели</td><td>_blank<br/>_self<br/>_parent<br/>_top<br/><em>имя</em></td><td>Указывает,где отображать ответ,полученный после отправки формы(для type="submit"и type="image")</td></tr><tr><td>высота</td><td><i>пикселей</i></td><td>Указывает высоту элемента<input>(только для type="image")</td></tr><tr><td>список</td><td><i>datalist_id</i></td><td>Относится к элементу<datalist>,который содержит предопределенные параметры для элемента<input></td></tr><tr><td>макс.</td><td><i>номер<br/>дата</i></td><td>Указывает максимальное значение для элемента<input></td></tr><tr><td>максимальная длина</td><td><i>номер</i></td><td>Указывает максимально допустимое количество символов в элементе<input></td></tr><tr><td>мин.</td><td><i>номер<br/>дата</i></td><td>Указывает минимальное значение для элемента<input></td></tr><tr><td>длина</td><td><i>номер</i></td><td>Указывает минимальное количество символов,необходимое для элемента<input></td></tr><tr><td>кратный</td><td>кратный</td><td>Указывает,что пользователь может ввести более одного значения в элементе<input></td></tr><tr><td>имя</td><td><i>текст</i></td><td>Указывает имя элемента<input></td></tr><tr><td>шаблон</td><td><em>регулярное выражение</em></td><td>Указывает регулярное выражение,по которому значение элемента<input>проверяется по</td></tr><tr><td>заполнитель</td><td><i>текст</i></td><td>Указывает краткую подсказку,которая описывает ожидаемое значение элемента<input></td></tr><tr><td>только для чтения</td><td>только для чтения</td><td>Указывает,что поле ввода доступно только для чтения.</td></tr><tr><td>требуется</td><td>требуется</td><td>Указывает,что поле ввода должно быть заполнено перед отправкой формы</td></tr><tr><td>размер</td><td><i>номер</i></td><td>Указывает ширину в символах элемента<input></td></tr><tr><td>SRC</td><td><i>URL</i></td><td>Указывает URL-адрес изображения для использования в качестве кнопки отправки(только для type="image")</td></tr><tr><td>шаг</td><td><i>номер<br/></i>любой</td><td>Указывает интервал между юридическими числами в поле ввода</td></tr><tr><td>тип</td><td>кнопка<br/>флажок<br/>цвет<br/>дата<br/>datetime-local<br/>электронная почта<br/>файл<br/>скрытый<br/>изображение<br/>месяц<br/>номер<br/>пароль<br/>радио<br/>диапазон<br/>сброс<br/>поиск<br/>отправить<br/>тел<br/>текст<br/>время<br/>URL<br/>неделя</td><td>Указывает элемент типа<input>для отображения</td></tr><tr><td>значение</td><td><i>текст</i></td><td>Указывает значение элемента<input><b><br/></b></td></tr><tr><td>ширина</td><td><i>пикселей</i></td><td>Указывает ширину элемента<input>(только для type="image")</td></tr></table><hr/><h3><span class="ez-toc-section"id="i-9">глобальных атрибутов</span></h3><p>Тег<input></code><code>также поддерживает глобальные атрибуты в HTML.</p><hr/><h3><span class="ez-toc-section"id="i-10">Атрибуты события</span></h3><p>Тег<input></code><code>также поддерживает атрибуты событий в HTML.</p><hr/><h3><span class="ez-toc-section"id="i-11">Связанные страницы</span></h3><p>Учебник HTML:</p><p>HTML DOM ссылка:</p><hr/><h3><span class="ez-toc-section"id="_CSS">Настройки CSS по умолчанию</span></h3><p>Нет.</p><br/>,<div>Справочник по элементам HTML-веб-технологии для разработчиков</h2><p>На этой странице перечислены все элементы HTML,созданные с помощью тегов.Они сгруппированы по функциям,чтобы помочь вам легко найти то,что вы имеете в виду.Алфавитный список всех элементов представлен на боковой панели на странице каждого элемента,а также на этой.</p><h3><span class="ez-toc-section"id="i-12">Основной корень</span></h3><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><html></code></td><td>Элемент</strong>HTML<code><html></code>представляет корень(элемент верхнего уровня)документа HTML,поэтому его также называют корневым элементом<em></em>.Все остальные элементы должны быть потомками этого элемента.</td></tr></tbody></table><p>Метаданные содержат информацию о странице.Сюда входит информация о стилях,сценариях и данных,которые помогают программам(поисковым системам,браузерам и т.Д.)Использовать и отображать страницу.Метаданные для стилей и сценариев могут быть определены на странице или ссылкой на другой файл,содержащий информацию.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><база></code></td><td>Элемент</strong>HTML<code><900><900><900>определяет базовый URL-адрес,который будет использоваться для всех<em>относительных URL-адресов</em>в документе.</td></tr><tr><td><code><голова></code></td><td>Элемент</strong>HTML<code><head></code>9009 содержит машиночитаемую информацию(метаданные)о документе,например его заголовок,сценарии и таблицы стилей.</td></tr><tr><td><code><ссылка></code></td><td>Элемент ссылки внешнего ресурса HTML<strong>(<code><link></code>)</strong>определяет отношения между текущим документом и внешним ресурсом.Этот элемент чаще всего используется для ссылки на таблицы стилей,но также используется для установки значков сайта(как значков в стиле «favicon»,так и значков на домашнем экране и в приложениях на мобильных устройствах),среди прочего.</td></tr><tr><td><code><мета></code></td><td>Элемент</strong>HTML<code><мета></code><strong>представляет метаданные,которые не могут быть представлены другими мета-элементами HTML,такими как<code><основа></code>,<code><ссылка></code>,<code><сценарий></code>,<code><стиль></code>или<code><title></code>.</td></tr><tr><td><code><стиль></code></td><td>Элемент</strong>HTML<code><style></code>содержит информацию о стиле документа или его части.</td></tr><tr><td><code><title></code></td><td>Элемент</strong>HTML-заголовка</strong>(<strong><code><title></code></strong>)определяет заголовок документа,который отображается в строке заголовка браузера или на вкладке страницы.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-13">Секционирование корня</span></h3><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><body></code></td><td>HTML<code><code><body></code>Элемент</strong>представляет содержание документа HTML.В документе может быть только один элемент<code><body></code>.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-14">Разделение контента</span></h3><p>Элементы секционирования контента позволяют вам организовать контент документа в логические части.Используйте элементы секционирования,чтобы создать общую схему содержимого страницы,включая навигацию в верхнем и нижнем колонтитулах,а также элементы заголовков для идентификации разделов контента.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><адрес></code></td><td>HTML<code><strong><адрес></code>элемент</strong>указывает,что вложенный HTML-код предоставляет контактную информацию для человека или людей или для организации.</td></tr><tr><td><code><артикул></code></td><td>HTML<code>HTML<code><article>Элемент</strong></code>представляет собой автономную композицию в документе,странице,приложении или сайте,которая предназначена для независимого распространения или повторного использования(например,в синдикации).</td></tr><tr><td><code><в сторону></code></td><td>Элемент</strong>HTML<code><aside></code>представляет часть документа,содержимое которой только косвенно связано с основным содержанием документа.</td></tr><tr><td><code><нижний колонтитул></code></td><td>Элемент</code>HTML<code><footer></code>представляет нижний колонтитул для ближайшего содержимого секционирования или корневого элемента секционирования.Нижний колонтитул обычно содержит информацию об авторе раздела,данные об авторских правах или ссылки на соответствующие документы.</td></tr><tr><td><code><header></code></td><td>HTML<code>9009<header></code>элемент</strong>представляет вводный контент,обычно группу вводных или навигационных пособий.Он может содержать некоторые элементы заголовка,а также логотип,форму поиска,имя автора и другие элементы.</td></tr><tr><td><code><h2></code>,<code><h3><span class="ez-toc-section"id="_HTML_-_-_-_HTML_-_HTML_HTML_HTML_-_-_HTML"></code>,<code><h4></code>,<code><h5></code>,<code><h5></code>,<code><h6></code></td><td>Элементы<strong>HTML<code><h2></code>-<code><h6></code></strong>представляют шесть уровней заголовков разделов.<code><h2></code>-самый высокий уровень секции,а<code><h6></code>-самый низкий уровень.</td></tr><tr><td><code><hgroup></code></td><td>Элемент</strong>HTML<code><hgroup></code>представляет многоуровневый заголовок раздела документа.Он группирует набор из<code><h2>-<h6></code>элементов.</td></tr><tr><td><code><главная></code></td><td>Элемент</strong>HTML<code><main></code></strong>представляет доминирующее содержимое<code><body></code>документа.Основная область содержимого состоит из содержимого,которое напрямую связано с центральной темой документа или расширяет его,или центральной функциональности приложения.</td></tr><tr><td><code><nav></code></td><td>Элемент</strong>HTML<code><nav></code></strong>представляет собой раздел страницы,целью которого является предоставление навигационных ссылок в текущем документе или в других документах.Типичными примерами разделов навигации являются меню,оглавления и индексы.</td></tr><tr><td><code><раздел></code></td><td>Элемент</strong>HTML<code><section></code>представляет отдельный раздел-в котором нет более специфического семантического элемента для его представления-содержащийся в документе HTML.</td></tr></tbody></table><h3><span class="ez-toc-section"id="_HTML_-_-_-_HTML_-_HTML_HTML_HTML_-_-_HTML">Текстовое содержание</span></h3><p>Используйте элементы текстового содержимого HTML для организации блоков или разделов содержимого,размещенных между открывающими тегами<code><body></code>и закрывающими<code></body></code>.Важные для доступности и SEO,эти элементы определяют цель или структуру этого контента.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><blockquote></code></td><td>HTML<code><strong><blockquote></code>Элемент</strong>(или<em>HTML Block Quotation Element</em>)указывает,что заключенный текст является расширенной цитатой.Обычно это визуализируется с помощью отступа(см.Примечания,как его изменить).URL-адрес источника цитаты может быть задан с использованием атрибута<strong>cite</strong>,в то время как текстовое представление источника может быть задано с использованием элемента<code><cite></code>.</td></tr><tr><td><code><дд></code></td><td>Элемент</strong>HTML<code><dd></code>обеспечивает описание,определение или значение для предыдущего термина(<code><dt></code>)в списке описания(<code><dl></code>).</td></tr><tr><td><code><div></code></td><td>Элемент</strong>HTML Content Division</strong>(<strong><code><div></code></strong>)является универсальным контейнером для потокового содержимого.Он не влияет на содержимое или макет до стилизации с использованием CSS.</td></tr><tr><td><code><дл></code></td><td>Элемент<strong>HTML<code><dl></code></strong>представляет собой список описания.Элемент содержит список групп терминов(заданных с использованием элемента<code><dt></code>)и описаний(предоставленных элементами<code><dd></code>).Обычно этот элемент используется для реализации глоссария или отображения метаданных(список пар ключ-значение).</td></tr><tr><td><code><dt></code></td><td>Элемент</strong>HTML<code><dt></code>9001 определяет термин в списке описания или определения и должен использоваться внутри элемента<code><dl></code>.</td></tr><tr><td><code><figcaption></code></td><td>HTML<code><code><figcaption></code>или элемент подписи к рисунку</strong>представляет заголовок или легенду,описывающую остальное содержимое его родительского элемента<code><figure></code>.</td></tr><tr><td><code><цифра></code></td><td>Элемент</strong>HTML<code><figure></code>(рисунок с необязательной подписью)представляет автономное содержимое,возможно,с необязательной подписью,которая указывается с использованием элемента(<code><figcaption></code>).</td></tr><tr><td><code><час></code></td><td>Элемент</strong>HTML<code><hr></code>представляет тематический разрыв между элементами уровня абзаца:например,изменение сюжета в истории или изменение темы в разделе.</td></tr><tr><td><code><li></code></td><td>Элемент</strong>HTML<code><li></code>используется для представления элемента в списке.</td></tr><tr><td><code><главная></code></td><td>Элемент</strong>HTML<code><main></code></strong>представляет доминирующее содержимое<code><body></code>документа.Основная область содержимого состоит из содержимого,которое напрямую связано с центральной темой документа или расширяет его,или центральной функциональности приложения.</td></tr><tr><td><code><ol></code></td><td>Элемент</strong>HTML<code><900><ol></code>представляет упорядоченный список элементов,обычно представляемых в виде нумерованного списка.</td></tr><tr><td><code><p></code></td><td>Элемент</strong>HTML<code><p></code>представляет собой абзац.</td></tr><tr><td><code><pre></code></td><td>Элемент</strong>HTML<code><pre></code><strong>представляет собой предварительно отформатированный текст,который должен быть представлен точно так,как написано в файле HTML.</td></tr><tr><td><code><ul></code></td><td>Элемент</strong>HTML<code><ul></code>представляет неупорядоченный список элементов,обычно представляемых в виде маркированного списка.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-15">Семантика встроенного текста</span></h3><p>Используйте семантическую текстовую строку HTML для определения значения,структуры или стиля слова,строки или любого произвольного фрагмента текста.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><a></code></td><td>HTML<code><a></code>элемент</strong>(или элемент привязки<em></em>)с его атрибутом<code>href</code>создает гиперссылку на веб-страницы,файлы,адреса электронной почты,местоположения на той же странице или что-либо еще,что может URL-адрес адрес.</td></tr><tr><td><code><abbr></code></td><td>Элемент аббревиатуры HTML<strong></strong>(<strong><code><abbr></code></strong>)представляет собой аббревиатуру или аббревиатуру;необязательный атрибут<code>title</code>может предоставлять расширение или описание для аббревиатуры.</td></tr><tr><td><code></code></td><td>HTML-код<strong>,привлекающий внимание к элементу(<code></code>)</strong>используется для привлечения внимания читателя к содержимому элемента,которому в противном случае не придается особого значения.</td></tr><tr><td><code><bdi></code></td><td>Элемент</strong>двунаправленного изолирования HTML<strong>(<strong><code><bdi></code></strong>)сообщает двунаправленному алгоритму браузера для обработки текста,который он содержит,изолированно от окружающего текста.</td></tr><tr><td><code><bdo></code></td><td>HTML 900 двунаправленный элемент переопределения текста</strong>(<strong><code><900></strong>)переопределяет текущую направленность текста,так что текст внутри отображается в другом направлении.</td></tr><tr><td><code><br></code></td><td>Элемент</strong>HTML<code><br></code>9002 производит разрыв строки в тексте(возврат каретки).Это полезно для написания стихотворения или адреса,где разделение строк является значительным.</td></tr><tr><td><code></code></td><td>Элемент</strong>HTML Citation</strong>(<strong><code><cite></code></strong>)используется для описания ссылки на цитируемое творческое произведение и должен включать название этой работы.</td></tr><tr><td><code><code></code></td><td>Элемент</strong>HTML<code><code></code><h2>отображает свое содержимое в стиле,предназначенном для указания того,что текст является коротким фрагментом компьютерного кода.</td></tr><tr><td><code><данные></code></td><td>Элемент</strong>HTML<code><data></code>связывает данный фрагмент контента с машиночитаемым переводом.Если содержимое связано со временем или датой,необходимо использовать элемент<code><время></code>.</td></tr><tr><td><code><dfn></code></td><td>Элемент определения HTML<strong></strong>(<code><strong><dfn><dfn></dfn></strong></code>)используется для указания термина,определяемого в контексте фразы или предложения определения.</td></tr><tr><td><code><em></code></td><td>Элемент</strong>HTML<code><em></code>помечает текст с ударением на ударение.Элемент<code><em></code>может быть вложенным,причем каждый уровень вложенности указывает на большую степень акцента.</td></tr><tr><td><code><i></code></td><td>Элемент HTML Idiomatic Text<strong>(<code><i></code>)</strong>представляет диапазон текста,который по какой-то причине отличается от обычного текста,например,идиоматический текст,технические термины,таксономические обозначения и другие.</td></tr><tr><td><code><кбд></code></td><td>HTML-элемент<strong>ввода с клавиатуры</strong>(<strong><code><kbd></code></strong>)представляет собой диапазон встроенного текста,обозначающий ввод текста пользователем с клавиатуры,голосового ввода или любого другого устройства ввода текста.</td></tr><tr><td><code><марка></code></td><td>Элемент</strong>HTML Mark Text 9009(<strong><code><mark></code></strong>)представляет текст,который помечен<strong>или<strong>выделен</strong>для справочных целей или для обозначения в связи с релевантностью или важностью помеченного отрывка в окружающем контексте.</td></tr><tr><td><code><q></code></td><td>Элемент</strong>HTML<code><q></code>указывает,что заключенный текст является короткой встроенной цитатой.Большинство современных браузеров реализуют это,заключая текст в кавычки.</td></tr><tr><td><code></code></td><td>Элемент</strong>HTML Ruby Base(<code><900>)<strong>используется для разделения базового текстового компонента аннотации<code><ruby></code>,то есть текста,который аннотируется.</td></tr><tr><td><code></code></td><td>Элемент</strong>HTML Ruby Fallback Parenthesis(<code><rp></code>)используется для создания резервных скобок для браузеров,которые не поддерживают отображение рубиновых аннотаций с использованием элемента<code><ruby></code>.</td></tr><tr><td><code></code></td><td>Элемент</strong>HTML Ruby Text(<code><rt></code>)9002 определяет компонент текста ruby аннотации ruby,который используется для предоставления информации о произношении,переводе или транслитерации для типографики Восточной Азии.Элемент<code><rt></code>всегда должен содержаться в элементе<code><ruby></code>.</td></tr><tr><td><code><ртк></code></td><td>Элемент</strong>HTML Ruby Text Container(<code><rtc></code>)содержит семантические аннотации символов,представленных в рубине из<code>элементов<900>,используемых внутри элемента<code><ruby></code>.<code><900>элементы могут иметь как произношение(<code><900>),так и семантические(<code>></code>)аннотации.</td></tr><tr><td><code><ruby></code></td><td>Элемент</strong>HTML<code><ruby></code>представляет рубиновую аннотацию.Рубиновые аннотации предназначены для отображения произношения восточноазиатских символов.</td></tr><tr><td><code><s></code></td><td>Элемент</strong>HTML<code><s></code>отображает текст с зачеркиванием или через него линией.Используйте элемент<code><s></code>,чтобы представлять вещи,которые больше не актуальны или более не точны.Однако<code><900>не подходит для обозначения правок документа;для этого используйте элементы<code><900>и<code><ins></code>,в зависимости от ситуации.</td></tr><tr><td><code><образец></code></td><td>Элемент HTML-образца<strong></strong>(<strong><code><samp></code></strong>)используется для включения встроенного текста,представляющего пример(или цитируемый)вывод компьютерной программы.</td></tr><tr><td><code><маленький></code></td><td>Элемент</strong>HTML<code><small></code></strong><strong>представляет побочные комментарии и мелкий шрифт,например,текст об авторском праве и юридическом тексте,независимо от его стилизованного представления.По умолчанию он отображает текст внутри него на один размер шрифта меньше,например,от<code>маленьких</code>до<code>х-маленьких</code>.</td></tr><tr><td><code><span></code></td><td>Элемент</strong>HTML<code>HTML<span></code>-это общий встроенный контейнер для фразового содержимого,который по своей сути ничего не представляет.Его можно использовать для группировки элементов в целях стилизации(с использованием атрибутов<code>класса</code>или<code>с идентификатором</code>)или потому,что они имеют общие значения атрибутов,например<code>lang</code>.</td></tr><tr><td><code><strong></code></td><td>HTML<strong>Сильный элемент важности</strong>(<strong><code><strong></code></strong>)указывает на то,что его содержание имеет большое значение,серьезность или срочность.Браузеры обычно отображают содержимое жирным шрифтом.</td></tr><tr><td><code><sub></code></td><td>Элемент</strong>Subscript HTML<strong>(<strong><code><sub></code></strong>)определяет встроенный текст,который должен отображаться в виде индекса только по типографским причинам.</td></tr><tr><td><code><sup></code></td><td>Элемент</strong>HTML Superscript</strong>(<strong><code><sup></code></strong>)определяет встроенный текст,который должен отображаться как верхний индекс только по типографским причинам.</td></tr><tr><td><code><время></code></td><td>HTML<strong><code><время></code>элемент</strong>представляет определенный период времени.</td></tr><tr><td><code><u></code></td><td>HTML</strong><strong><strong>Элемент аннотации Unarticulated Annotation</strong>(<strong><code><u></code></strong>)представляет диапазон встроенного текста,который должен отображаться таким образом,чтобы указывать на наличие нетекстовой аннотации.</td></tr><tr><td><code><var></code></td><td>HTML<strong>Элемент переменной</strong>(<strong><code><var></code></strong>)представляет имя переменной в математическом выражении или контексте программирования.</td></tr><tr><td><code><900></code><td>Элемент</strong>HTML<code><wbr></code>9009 представляет возможность разрыва слова-позицию в тексте,где браузер может по желанию разбить строку,хотя в противном случае его правила разрыва строки не будут создавать разрыв в этом месте.</td></tr></tbody></table><p>HTML поддерживает различные мультимедийные ресурсы,такие как изображения,аудио и видео.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><область></code></td><td>Элемент</strong>HTML<code><область></code></strong>определяет область «горячей точки» на изображении и,необязательно,связывает ее с гипертекстовой ссылкой.Этот элемент используется только внутри элемента<code><map></code>.</td></tr><tr><td><code><аудио></code></td><td>Элемент</strong>HTML<code><audio></code>используется для встраивания звукового содержимого в документы.Он может содержать один или несколько аудиоисточников,представленных с использованием атрибута<code>src</code>или элемента<code><source></code>:браузер выберет наиболее подходящий.Он также может быть пунктом назначения для потоковой передачи мультимедиа,используя<code>MediaStream</code>.</td></tr><tr><td><code></code></td><td>Элемент</strong>HTML<code><img></code>встраивает изображение в документ.</td></tr><tr><td><code><карта></code></td><td>HTML<code>9009<map></code>элемент</strong>используется с<code><area></code>элементами для определения карты изображения(интерактивная область ссылок).</td></tr><tr><td><code><дорожка></code></td><td>Элемент</strong>HTML<code><track></code>используется в качестве дочернего элемента элементов мультимедиа<code><audio></code>и<code><video></code>.Он позволяет указывать синхронизированные текстовые дорожки(или данные на основе времени),например,для автоматической обработки субтитров.Дорожки отформатированы в формате WebVTT(файлы<code>.vtt</code>)-текстовые дорожки веб-видео или язык разметки временного текста(TTML).</td></tr><tr><td><code><видео></code></td><td>HTML-элемент<strong>HTML-видео</strong>(<strong><code><video class="lazy lazy-hidden"></code></strong>)встраивает медиаплеер,поддерживающий воспроизведение видео,в документ.Вы также можете использовать<code><video class="lazy lazy-hidden"><noscript><video></code></strong>)встраивает медиаплеер,поддерживающий воспроизведение видео,в документ.Вы также можете использовать<code><video></noscript></code>для аудиоконтента,но элемент<code><audio></code>может обеспечить более подходящее взаимодействие с пользователем.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-16">Встроенный контент</span></h3><p>В дополнение к обычному мультимедийному контенту,HTML может включать в себя множество другого контента,даже если с ним не всегда легко взаимодействовать.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><embed></code></td><td>Элемент</strong>HTML<code><embed></code>встраивает внешнее содержимое в указанную точку документа.Этот контент предоставляется внешним приложением или другим источником интерактивного контента,таким как плагин для браузера.</td></tr><tr><td><code><iframe></code></td><td>Элемент HTML Inline Frame<strong>(<code><iframe></code>)</strong>представляет собой вложенный контекст просмотра,встраивая другую HTML-страницу в текущую.</td></tr><tr><td><code><объект></code></td><td>HTML<code><900><900>элемент</strong>представляет внешний ресурс,который можно рассматривать как изображение,вложенный контекст просмотра или ресурс,который должен обрабатываться плагином.</td></tr><tr><td><code><param></code></td><td>Элемент</strong>HTML<code><param></code>определяет параметры для элемента</code><object></code>.</td></tr><tr><td><code><изображение></code></td><td>HTML<code><900><picture></code>элемент</strong>содержит ноль или более<code><source></code>элементов и один<code><img></code>элемент,чтобы предложить альтернативные версии изображения для различных сценариев отображения/устройства.</td></tr><tr><td><code><источник></code></td><td>Элемент</strong>HTML<code><source></code>задает несколько медиаресурсов для элемента<code><picture></code>,<900><audio></code>или элемента<code><video></code>.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-17">Сценарии</span></h3><p>Для создания динамического контента и веб-приложений HTML поддерживает использование языков сценариев,в первую очередь JavaScript.Некоторые элементы поддерживают эту возможность.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><холст></code></td><td>Используйте элемент</strong>HTML<code><canvas></code>900 с API сценариев Canvas или API WebGL для рисования графики и анимации.</td></tr><tr><td><code><noscript></code></td><td>HTML<code><code><noscript></code>элемент</strong>определяет раздел HTML,который будет вставлен,если тип сценария на странице не поддерживается или сценарии в настоящее время отключены в браузере.</td></tr><tr><td><code><скрипт></code></td><td>Элемент</strong>HTML<code><script></code>используется для встраивания исполняемого кода или данных;это обычно используется для встраивания или ссылки на код JavaScript.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-18">Разграничение правок</span></h3><p>Эти элементы позволяют вам указывать,что определенные части текста были изменены.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><del></code></td><td>Элемент</strong>HTML<code><del></code>представляет диапазон текста,который был удален из документа.</td></tr><tr><td><code><ins></code></td><td>Элемент</strong>HTML<code><ins></code></strong>представляет диапазон текста,который был добавлен в документ.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-19">Содержание таблицы</span></h3><p>Элементы здесь используются для создания и обработки табличных данных.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><подпись></code></td><td>Элемент</strong>HTML<code><caption></code>определяет заголовок(или заголовок)таблицы.</td></tr><tr><td><code><цв></code></td><td>Элемент</strong>HTML<code>HTML<code><900>определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек.Обычно он находится в элементе<code><colgroup></code>.</td></tr><tr><td><code><colgroup></code></td><td>Элемент</strong>HTML<code>HTML<code></code>определяет группу столбцов в таблице.</td></tr><tr><td><code><стол></code></td><td>HTML<code><900><900>элемент</strong>представляет табличные данные,то есть информацию,представленную в двумерной таблице,состоящей из строк и столбцов ячеек,содержащих данные.</td></tr><tr><td><code><tbody></code></td><td>Элемент</strong>Тела таблицы HTML<strong>(<strong><code><tbody></code></strong>)инкапсулирует набор строк таблицы(<code><tr></code>элементов),указывая на то,что они составляют тело таблицы(<code><table class="table table-hover"></code>).</td></tr><tr><td><code><тд></code></td><td>Элемент</strong>HTML<code>HTML<code><td></code>определяет ячейку таблицы,которая содержит данные.Участвует в модели стола<em></em>.</td></tr><tr><td><code><tfoot></code></td><td>Элемент</strong>HTML<code>HTML<code><</code>>определяет набор строк,суммирующих столбцы таблицы.</td></tr><tr><td><code>th</code></td><td>Элемент</strong>HTML<code><th></code>9009 определяет ячейку как заголовок группы ячеек таблицы.Точный характер этой группы определяется<code>областями,</code>и<code>заголовками,</code>атрибутами.</td></tr><tr><td><code><thead></code></td><td>HTML<code>9009<thead></code>элемент</strong>определяет набор строк,определяющих заголовок столбцов таблицы.</td></tr><tr><td><code><tr></code></td><td>Элемент</strong>HTML<code><tr></code>определяет строку ячеек в таблице.Ячейки строки затем могут быть установлены с использованием комбинации элементов<code><td></code>(ячейка данных)и<code><th></code>(ячейка заголовка).</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-20">Формы</span></h3><p>HTML предоставляет ряд элементов,которые можно использовать вместе для создания форм,которые пользователь может заполнять и отправлять на веб-сайт или в приложение.Существует много дополнительной информации об этом,доступной в руководстве по HTML-формам.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><кнопка></code></td><td>Элемент</strong>HTML<code><button></code>представляет собой нажимаемую кнопку,используемую для отправки форм или в любом месте документа для получения доступной стандартной функциональности кнопки.</td></tr><tr><td><code><datalist></code></td><td>Элемент</strong>HTML<code><900><datalist></code>содержит набор элементов</code><option></code>,которые представляют допустимые или рекомендуемые параметры,доступные для выбора в других элементах управления.</td></tr><tr><td><code><fieldset></code></td><td>Элемент</strong>HTML<code><fieldset></code>используется для группировки нескольких элементов управления,а также меток(<code><label></code>)в веб-форме.</td></tr><tr><td><code><форма></code></td><td>Элемент</strong>HTML<code><form></code>представляет раздел документа,содержащий интерактивные элементы управления для отправки информации.</td></tr><tr><td><code><вход></code></td><td>Элемент</strong>HTML<code><input></code>используется для создания интерактивных элементов управления для веб-форм для приема данных от пользователя;доступно множество типов входных данных и виджетов управления,в зависимости от устройства и пользовательского агента.</td></tr><tr><td><code><метка></code></td><td>Элемент</strong>HTML<code><label></code>представляет заголовок для элемента в пользовательском интерфейсе.</td></tr><tr><td><code><легенда></code></td><td>Элемент</strong>HTML<code><legend></code>представляет заголовок для содержимого его родительского элемента<code><fieldset></code>.</td></tr><tr><td><code><метр></code></td><td>HTML<code><900><900>элемент</strong>представляет либо скалярное значение в пределах известного диапазона,либо дробное значение.</td></tr><tr><td><code><optgroup></code></td><td>Элемент</strong>HTML<code><optgroup></code>создает группу параметров в элементе<code><select></code>.</td></tr><tr><td><code><опция></code></td><td>Элемент</strong>HTML<code><опция></code>используется для определения элемента,содержащегося в элементе<code><выбор></code>,<code><группа optgroup></code>или элемент 9009<список данных></code>.Таким образом,<code><опция></code>может представлять элементы меню во всплывающих окнах и другие списки элементов в документе HTML.</td></tr><tr><td><code><вывод></code></td><td>Элемент вывода HTML<strong></strong>(<strong><code><output></code></strong>)-это контейнерный элемент,в который сайт или приложение могут внедрить результаты вычислений или результаты действий пользователя.</td></tr><tr><td><code><прогресс></code></td><td>Элемент</strong>HTML<code><progress></code>отображает индикатор,показывающий ход выполнения задачи,обычно отображаемый в виде индикатора выполнения.</td></tr><tr><td><code><выберите></code></td><td>Элемент<strong>HTML<code><select></code></strong>представляет элемент управления,который предоставляет меню параметров</td></tr><tr><td><code><textarea></code></td><td>Элемент</strong>HTML<code><textarea></code>представляет собой многострочное средство редактирования простого текста,полезное,когда вы хотите разрешить пользователям вводить значительный объем текста произвольной формы,например,комментарий к отзыву или форму обратной связи.,</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-21">Интерактивные элементы</span></h3><p>HTML предлагает выбор элементов,которые помогают создавать объекты интерактивного пользовательского интерфейса.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><подробно></code></td><td>Элемент HTML Details HTML<strong>(<code><details></code>)</strong>создает виджет раскрытия,в котором информация видна только тогда,когда виджет переключен в открытое состояние.</td></tr><tr><td><code><диалог></code></td><td>Элемент</strong>HTML<code><dialog></code>представляет диалоговое окно или другой интерактивный компонент,такой как отключаемое предупреждение,инспектор или подокно.</td></tr><tr><td><code><меню></code></td><td>Элемент</strong>HTML<code><menu></code>представляет группу команд,которые пользователь может выполнять или активировать.Сюда входят как списочные меню,которые могут отображаться в верхней части экрана,так и контекстные меню,например,те,которые могут отображаться под кнопкой после нажатия.</td></tr><tr><td><code><резюме></code></td><td>Элемент Сводка раскрытия HTML-кода<strong>Элемент</strong>(<strong><code><summary></code></strong>)определяет сводку,подпись или легенду для поля раскрытия элемента<code><details></code>.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-22">Веб-компоненты</span></h3><p>Web Components-это технология,связанная с HTML,которая позволяет,по сути,создавать и использовать пользовательские элементы,как если бы это был обычный HTML.Кроме того,вы можете создавать собственные версии стандартных элементов HTML.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><слот></code></td><td>HTML<code><slot></code>элемент</strong>-часть комплекта технологий веб-компонентов-это заполнитель внутри веб-компонента,который можно заполнить собственной разметкой,которая позволяет создавать отдельные деревья DOM и представлять их вместе.</td></tr><tr><td><code><шаблон></code></td><td>Элемент</strong>HTML Content Template(<code><template></code>)</strong>представляет собой механизм для хранения HTML,который не должен отображаться сразу при загрузке страницы,но может быть впоследствии создан во время выполнения с использованием JavaScript.</td></tr></tbody></table><h3><span class="ez-toc-section"id="i-23">Устаревшие и устаревшие элементы</span></h3><p><strong>Предупреждение:</strong>Это старые элементы HTML,которые устарели и не должны использоваться.<strong>Никогда не используйте их в новых проектах и заменяйте их в старых проектах как можно скорее.</strong>Они перечислены здесь только в ознакомительных целях.</p><table class="table table-hover"><thead><tr><th scope="col">Элемент</th><th scope="col">Описание</th></tr></thead><tbody><tr><td><code><аббревиатура></code></td><td>Элемент аббревиатуры HTML(<code><acronym></code>)позволяет авторам четко указывать последовательность символов,составляющих аббревиатуру или аббревиатуру для слова.</td></tr><tr><td><code><апплет></code></td><td>Устаревший элемент апплета HTML<strong></strong>(<strong><code><апплет></code></strong>)внедряет апплет Java в документ;этот элемент устарел в пользу<code><объект></code>.</td></tr><tr><td><code><basefont></code></td><td>Устаревший<strong>элемент базового шрифта HTML</strong>(<strong><code><basefont></code></strong>)устанавливает грань шрифта по умолчанию,размер и цвет для других элементов,которые происходят от его родительского элемента.</td></tr><tr><td><code><bgsound></code></td><td>Только для Internet Explorer<strong>Элемент фонового звука HTML</strong>(<strong><code><bgsound></code></strong>)настраивает звуковой файл для воспроизведения в фоновом режиме во время использования страницы;используйте вместо него<code><audio></code>.</td></tr><tr><td><code><большой></code></td><td>Устаревший<strong>HTML Большой элемент</strong>(<strong><code><большой></code></strong>)отображает вложенный текст на размер шрифта на один уровень больше,чем окружающий текст(например,<code>,средний</code>становится<code>,большой</code>).</td></tr><tr><td><code><blink></code></td><td>HTML-элемент Blink<strong></strong>(<code><blink></code>)-это нестандартный элемент,который заставляет вложенный текст медленно мигать.</td></tr><tr><td><code><центр></code></td><td>Устаревший<strong>центральный элемент HTML</strong>(<strong><code><center></code></strong>)-это элемент уровня блока,который отображает содержимое на уровне блока или встроенное содержимое по центру горизонтально внутри его содержащего элемента.</td></tr><tr><td><code><команда&</code></td></tr></tbody></table>.</div><div class="post-meta"></div></article><nav class="navigation post-navigation"aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/logotip-s-prozrachnym-fonom-attention-required-cloudflare.html"rel="prev"><span class="meta-nav">Предыдущая запись</span>Логотип с прозрачным фоном:Attention Required!\|Cloudflare</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/tekstovyj-effekt-50-tekstovyx-effektov-fotoshopa.html"rel="next"><span class="meta-nav">Следующая запись</span>Текстовый эффект – 50 текстовых эффектов фотошопа</a></div></div></nav><div id="comments"class="comments-area"><div id="respond"class="comment-respond"><h3 id="reply-title"class="comment-reply-title">Добавить комментарий<small><a rel="nofollow"id="cancel-comment-reply-link"href="/raznoe/html-metka-yakorya-htmlbook-ru-2.html#respond"style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php"method="post"id="commentform"class="comment-form"novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span><span class="required-field-message">Обязательные поля помечены<span class="required"></span></span></p><p class="comment-form-comment"><label for="comment">Комментарий<span class="required"></span></label><textarea id="comment"name="comment"cols="45"rows="8"maxlength="65525"required></textarea></p><p class="comment-form-author"><label for="author">Имя<span class="required"></span></label><input id="author"name="author"type="text"value=""size="30"maxlength="245"autocomplete="name"required/></p><p class="comment-form-email"><label for="email">Email<span class="required"></span></label><input id="email"name="email"type="email"value=""size="30"maxlength="100"aria-describedby="email-notes"autocomplete="email"required/></p><p class="comment-form-url"><label for="url">Сайт</label><input id="url"name="url"type="url"value=""size="30"maxlength="200"autocomplete="url"/></p><p class="form-submit"><input name="submit"type="submit"id="submit"class="submit"value="Отправить комментарий"/><input type='hidden'name='comment_post_ID'value='4799'id='comment_post_ID'/><input type='hidden'name='comment_parent'id='comment_parent'value='0'/></p></form></div>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</main>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</div><div class="col-md-4"><div id="sidebar"class="sidebar"><div id="search-9"class="widget widget_search"><form role="search"method="get"class="form-search"action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"><label class="screen-reader-text"for="s">Поиск:</label><input type="text"class="form-control search-query"placeholder="Поиск и помощь"value=""name="s"title="Поиск:"/><span class="input-group-btn"><button type="submit"class="btn btn-default"name="submit"id="searchsubmit"value="Найти"><i class="fa fa-search"></i></button></span></div></form></div><div id="categories-10"class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div><!--END#content--></div><!--END.row--></div><!--END.container--><footer class="mz-footer"id="footer"><!--footer widgets--><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info">© Орфографика.рф,2010-2019</div><!--.site-info-->Расшифровки,размещенные на сайте,предназначены только для личного,некоммерческого использования.<br>При перепосте материалов обязательна активная ссылка:«Текст подготовлен компанией Орфографика.рф».<br>Вопросы и предложения:info@орфографика.рф.</div></footer></div><!--back to top button--><p id="back-top"><a href="#top"><i class="fa fa-angle-up"></i></a></p><style type="text/css">.archive#nav-above,.archive#nav-below,.search#nav-above,.search#nav-below,.blog#nav-below,.blog#nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content.nav_post_link,.page-link,.page-links,#comments.navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none!important;}.single-gallery.pagination.gllrpr_pagination{display:block!important;}</style><noscript><style>.lazyload{display:none;}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig\|\|{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+""+screen.height+""+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html>

Html метка: Якоря | htmlbook.ru

Якоря | htmlbook.ru

HTML якоря — грамотное использование

Назначение якорей HTML

Как поставить HTML якоря?

Как сослаться на HTML якоря?

Переход на метку якоря HTML на другой странице

Использование HTML якорей в WordPress

Полезные Материалы:

Якоря | Учебные курсы | WebReference

Якорь в HTML | Закладка на веб-странице

Якорь в HTML | Закладка на веб-странице

Якорь в заголовке, в списке, в таблице.Якорь в любом открывающем теге элемента HTML…

теги — полный список, таблица тегов по разделам

HTML | htmlbook.ru

Быстрый старт

Применение ссылок в HTML

Виды ссылок в HTML

Атрибуты HTML ссылок

Внешние ссылки в HTML. Межстраничная навигация по сайту

Как открывать ссылку или использование атрибута target

Якорь в HTML или внутренние HTML ссылки. Постраничная навигация в HTML

Путь ссылки в HTML: абсолютные и относительные ссылки

Цвета HTML ссылок. Учимся менять цвет ссылки при помощи HTML атрибутов

Примеры использования HTML ссылок

Ссылка на элемент HTML — по категории

Якорь в заголовке, в списке, в таблице.
Якорь в любом открывающем теге элемента HTML…