Глобальні атрибути html. Введення в форми HTML5 і нові атрибути. Елементи list і datalist

Щоб подивитися опис і приклад використання цікавить вас глобального атрибута, натисніть на нього або проскрольте сторінку вниз до його опису.

accesskey

Атрибут accesskey використовується браузерами в якості керівництва для створення поєднання клавіш, що активує елемент або переводить на нього фокус.

Примітка: до HTML5 атрибут accesskey можна було використовувати тільки з такими тегами:, , , , ,

і . З п'ятої версії HTML даний атрибут можна використовувати з будь-яким дійсним HTML тегом.</p> <p>Значенням атрибута accesskey повинен бути символ, який можна ввести натисканням однієї клавіші. Пробільні символи в якості значення атрибута не припустимі.</p><p>Сполучення клавіш для атрибута accesskey залежить від використовуваного браузера:</p> <p>Використання атрибута accesskey для різних елементів з одним і тим же значенням призводить до ігнорування атрибута.</p> <h2>class</h2> <p>Атрибут class використовується для подальшого отримання доступу до елементів (через ім'я класу) в CSS і JavaScript.</p> <p>В атрибуті class як значення можна вказати не один, а кілька класів, в цьому випадку імена класів повинні бути розділені пробілами, порядок проходження імен класів не має значення:</p><p> <p>Якщо в блоках оголошень різних класів використовуються однакові <a href="/css-parametry-ramki-elementa-sozdanie-ramok-v-css-svoistvo-border-vypuklaya/">CSS властивості</a>з різними значеннями, то для властивості буде застосовано то значення, яке в CSS коді визначено нижче інших. Тому порядок проходження імен класів в значення атрибуту значення не має, так як в цьому випадку спрацьовує механізм каськадності.</p> <h2>contenteditable</h2> <p>Атрибут contenteditable вказує, чи може користувач редагувати вміст даного елемента. Атрибут може приймати одне з наступних значень:</p> <ul><li>true або порожній рядок ( "") - вміст елемента можна редагувати</li> <li>false - редагування вмісту заборонено</li> </ul> <bdo dir="ltr">Просто якийсь текст</bdo> <h2>draggable</h2> <p>Атрибут draggable визначає, чи може користувач перетягувати елемент за допомогою drag-and-drop API. Атрибут може приймати одне з трьох значень:</p> <ul><li>true - вказує, що елемент можна перетягувати</li> <li>false - вказує, що елемент не перетягується</li> <li>auto - вказує, що перетягування елемента буде залежати від значення, встановленого в браузері за замовчуванням.</li> </ul><p>За допомогою атрибута id можна створювати посилання на конкретний елемент, а не тільки на сторінку в цілому. Такі посилання можуть вести або на розділ даної сторінки, або на розділ іншої сторінки. Щоб створити посилання на елемент, треба додати до неба атрибут id. Сама посилання, в цьому випадку, повинна буде містити ім'я ідентифікатора елемента, на який вона посилається, перед яким обов'язково ставиться символ #. Якщо посилання веде на розділ поточної сторінки, то в якості адреси можна вказати тільки ім'я ідентифікатора, якщо посилання веде на розділ іншої сторінки, то ім'я ідентифікатора вказується в самому кінці адреси:</p><h2>lang</h2> <p>Атрибут lang дозволяє вказати, яка мова використовується для тексту всередині елемента. Як значення атрибута використовуються коди мов:</p><p> <p>Текст англійською: <span lang="en">"Hello world!"</span>.</p> </p><p>Використання даного атрибута допомагає браузерам правильно відображати деякі національні символи, мовним програмами визначити мову тексту, виконувати перевірку тексту програмами для перевірки орфографії і граматики.</p> <p>Атрибут lang також може використовуватися для поліпшення якості в пошуковій видачі результатів пошуку, які засновані на лінгвістичних перевагах користувача.</p> <h2>spellcheck</h2> <p>Атрибут spellcheck вказує, чи дозволяється перевіряти вміст елемента на наявність орфографічних помилок. Атрибут може приймати одне з наступних значень:</p> <ul><li>true - вказує, що вміст елемента має бути, по можливості, перевірено на наявність орфографічних помилок.</li> <li>false - вказує, що елемент не повинен перевірятися на наявність орфографічних помилок.</li> </ul><p>Атрибут spellcheck є перераховуються. Це означає, що потрібно явне вказівку значення атрибута. Додавання атрибута без значення заборонено:</p><p> <!-- правильное добавление атрибута --> <textarea spellcheck="false"> <!-- неправильное добавление атрибута --> <textarea spellcheck> </p><p>Атрибут spellcheck визначає лише рекомендацію для браузера: браузери не повинні мати можливість перевірки на орфографічні помилки. Зазвичай не редаговані елементи не перевіряються на наявність помилок, навіть якщо для атрибуту встановлено значення true, а браузер підтримує перевірку.</p> <h2>style</h2> <p>Атрибут style використовується для додавання CSS стилів до елемента. Стилі, додані за допомогою атрибута style, мають пріоритет над стилями, розташованими в елементі<style> или во внешнем файле.</p> <p>При добавлении стилей в значение атрибута, селектор и фигурные скобки не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:</p><p> <span style="color: red; font-weight: bold;">Жирный красный текст</p><h2>tabindex</h2> <p>Атрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши " tab "). В качестве значения атрибут принимает целое число:</p><p> <textarea tabindex="5"> </p><p>Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6" . Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.</p> <h2>title</h2> <p>Атрибут title используется для указания <a href="/kak-pravilno-nabirat-mezhdugorodnyi-nomer-s-gorodskogo-mezhdugorodnyaya-svyaz/">дополнительной информации</a> о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).</p> <p>Атрибут title часто используется с картинками, для добавления описания картинки:</p><p> <img src='https://i2.wp.com/1.png' loading=lazy loading=lazy> </p><p>Примечание: <a href="/how-to-find-the-appearance-settings-in-yandex-how-to-configure-the-yandex-browser-for-easy-operation/">внешний вид</a> и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.</p> <p>Последнее обновление: 08.04.2016</p> <p>Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.</p> <p>Документ HTML5, как и любой <a href="/osnovnye-pravila-yazyka-html-sintaksis-html-i-struktura-html-dokumenta-gde-pisat-html/">документ HTML</a>, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:</p><p> <div>Текст элемента div</div> </p><p>Здесь определен элемент div , который имеет открывающий тег <div> и закрывающий тег </div> . Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".</p> <p>Элементы также могут состоять из одного тега, например, элемент <br /> , функция которого - перенос строки.</p><p> <div>Текст <br /> элемента div</div> </p><p>Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br></p> <p>Каждый элемент внутри открывающего тега может иметь атрибуты . Например:</p><p> <div style="color:red;">Кнопка</div> <input type="button" value="Нажать"> </p><p>Здесь определено два элемента: div и input. Элемент div имеет атрибут style . После знака равно в кавычках пишется значение атрибута: style="color:red;" . В данном случае значение "color:red;" указывает, что цвет текста будет красным.</p> <p>Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)</p> <p>Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к <a href="/javascript-udalenie-elementov-iz-massiva-javascript---elementov---udalit-opredelennyi-element-mass/">определенным элементам</a>, как например, type.</p> <p>Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:</p><p> <input type="button" value="Нажать" disabled> </p><p>Атрибут disabled указывает, что данный элемент отключен.</p> <h3>Глобальные атрибуты</h3> <p>В HTML5 есть набор <span>глобальных атрибутов </span>, которые применимы к любому элементу HTML5:</p> <ul><p>accesskey : определяет клавишу для <a href="/obnovlennye-uvedomleniya-i-menyu-bystrogo-dostupa/">быстрого доступа</a> к элементу</p> <p>class : задает класс CSS, который будет применяться к элементу</p> <p>contenteditable : определяет, можно ли редактировать содержимое элемента</p> <p>contextmenu : определяет <a href="/sobstvennoe-kontekstnoe-menyu-s-ispolzovaniem-javascript/">контекстное меню</a> для элемента, которое отображается при нажатии на элемент правой кнопкой мыши</p> <p>dir : устанавливает направление текста в элементе</p> <p>draggable : определяет, можно ли перетаскивать элемент</p> <p>dropzone : определяет, можно ли копировать переносимые данные при переносе на элемент</p> <p>hidden : скрывает элемент</p> <p>id : уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов</p> <p>lang : определяет язык элемента</p> <p>spellcheck : указывает, будет ли для данного элемента использоваться проверка правописания</p> <p>style : задает стиль элемента</p> <p>tabindex : определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB</p> <p>title : устанавливает дополнительное описание для элемента</p> <p>translate : определяет, должно ли переводиться содержимое элемента</p> </ul><p>Но, как правило, из всего этого списка наиболее часто используются три: class , id и style .</p> <h3>Пользовательские атрибуты</h3> <p>В отличие от <a href="/previous-version-of-google-chrome-convenient-download-of-files/">предыдущей версии</a> языка разметки в HTML5 были добавлены <a href="/the-value-of-the-attribute-we-set-one-attribute/">пользовательские атрибуты</a> (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом <i>data- </i>. Например:</p><p> <input type="button" value="Нажать" data-color="red" > </p><p>Здесь определен атрибут data-color , который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.</p> <h3>Одинарные или двойные кавычки</h3> <p>Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:</p><p> <input type="button" value="Нажать"> </p><p>И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:</p><p> <input type="button" value="Кнопка "Привет мир""> </p> <p>На HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.</p> <p>В HTML5 добавляет много новых синтаксических особенностей – <b><video>, <audio>, <header> и <canvas> </b>. Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как <b><section>, <article>, <header> и <nav> </b> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).</p> <h3><b>Новые теги HTML5 </b></h3> <ul><li>1. Теги разделов (article, aside, footer, header, hgroup, nav, section)</li> <li>2. Теги группировки контента (figure, figcaption)</li> <li>3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)</li> <li>4. Теги для вставки контента (audio, video, canvas, embed, source)</li> <li>5. Теги для элементов форм (datalist, keygen, output, progress, meter)</li> <li>6. Интерактивные элементы (details, summary, command, menu)</li> </ul><table border="1" cellpadding="10" cellspacing="0" style="width: 100%"><tbody><tr><th>Тег </th> <th>Краткое описание </th> </tr><tr class="newtag"><td><article> </td> <td>Определяет статью </td> </tr><tr class="newtag"><td><aside> </td> <td>Определяет контент в стороне от основного контента страницы </td> </tr><tr class="newtag"><td><audio> </td> <td>Определяет аудио контент </td> </tr><tr class="newtag"><td><canvas> </td> <td>Определяет графику </td> </tr><tr class="newtag"><td><command> </td> <td>Определяет командную кнопку </td> </tr><tr class="newtag"><td><datagrid> </td> <td>Определяет данные в упорядоченный список </td> </tr><tr class="newtag"><td><datalist> </td> <td>Определяет выпадающий список </td> </tr><tr class="newtag"><td><datatemplate> </td> <td>Определяет шаблон данных </td> </tr><tr class="newtag"><td><details> </td> <td>Определяет детали элемента </td> </tr><tr class="newtag"><td><dialog> </td> <td>Определяет диалог (разговор) </td> </tr><tr class="newtag"><td><eventsource> </td> <td>Определяет цель события, отправляемого по серверу </td> </tr><tr class="newtag"><td><figure> </td> <td>Определяет группу медиа-контента, и их подписи </td> </tr><tr class="newtag"><td><footer> </td> <td>Определяет нижний колонтитул для раздела или страницы </td> </tr><tr class="newtag"><td><header> </td> <td>Определяет область заголовка раздела или страницы </td> </tr><tr class="newtag"><td><mark> </td> <td>Определяет выделенный текст </td> </tr><tr class="newtag"><td><meter> </td> <td>Определяет измерения в течение заранее определенного диапазона </td> </tr><tr class="newtag"><td><nav> </td> <td>Определяет навигационные ссылки </td> </tr><tr class="newtag"><td><nest> </td> <td>Определяет вложенную точку в шаблоне данных </td> </tr><tr class="newtag"><td><output> </td> <td>Определяет некоторые виды результата </td> </tr><tr class="newtag"><td><progress> </td> <td>Определяет ход выполнения задачи любого рода </td> </tr><tr class="newtag"><td><rule> </td> <td>Определяет правила для обновления шаблонов </td> </tr><tr class="newtag"><td><section> </td> <td>Определяет раздел (секцию) </td> </tr><tr class="newtag"><td><source> </td> <td>Определяет медиа-ресурсы </td> </tr><tr class="newtag"><td><time> </td> <td>Определяет дату/время </td> </tr><tr class="newtag"><td><video> </td> <td>Определяет видео </td> </tr></tbody></table><h3>Неподдерживаемые теги:</h3> <table border="1" cellpadding="10" style="width: 100%;"><tbody><tr><th>Тег </th> <th>Краткое описание </th> </tr><tr class="deprecated"><td><acronym> </td> <td><span>Не поддерживается. </span> Определяет акроним </td> </tr><tr class="deprecated"><td><applet> </td> <td><span>Не поддерживается. </span> Определяет апплет </td> </tr><tr class="deprecated"><td><basefont> </td> <td><span>Не поддерживается. </span> Используетя вместо CSS для задания шрифта </td> </tr><tr class="deprecated"><td><big> </td> <td><span>Не поддерживается. </span> Определяет большой текст </td> </tr><tr class="deprecated"><td><center> </td> <td><span>Не поддерживается. </span> Определяет текст по центру </td> </tr><tr class="deprecated"><td><dir> </td> <td><span>Не поддерживается. </span> Определяет список директорий </td> </tr><tr class="deprecated"><td><frame> </td> <td><span>Не поддерживается. </span> Определяет фрейм </td> </tr><tr class="deprecated"><td><frameset> </td> <td><span>Не поддерживается. </span> Определяет набор фреймов </td> </tr><tr class="deprecated"><td><isindex> </td> <td><span>Не поддерживается. </span> Определяет поисковый индекс в документе </td> </tr><tr class="deprecated"><td><noframes> </td> <td><span>Не поддерживается. </span> Определяет секцию, не поддерживающую фрейм </td> </tr><tr class="deprecated"><td><s> </td> <td><span>Не поддерживается. </span> </td> </tr><tr class="deprecated"><td><strike> </td> <td><span>Не поддерживается. </span> Определяет зачеркнутый текст </td> </tr><tr class="deprecated"><td><tt> </td> <td><span>Не поддерживается. </span> Определяет телетайп текст </td> </tr><tr class="deprecated"><td><u> </td> <td><span>Не поддерживается. </span> Определяет подчеркнутый текст </td> </tr><tr class="deprecated"><td><xmp> </td> <td><span>Не поддерживается. </span> Определяет выровненный текст </td> </tr></tbody></table><h3>Список атрибутов HTML5</h3> <table border="1" cellpadding="10" style="width: 100%;"><tbody><tr><th>Атрибут </th> <th>Значение </th> <th>Краткое описание </th> </tr><tr class="newtag"><td>contenteditable </td> <td>true<br> false </td> <td>Определяет, может ли пользователь редактировать содержимое (контент) </td> </tr><tr class="newtag"><td>contextmenu </td> <td>menu_id </td> <td>Определяет контекстное меню элемента </td> </tr><tr class="newtag"><td>draggable </td> <td>true<br> false<br> auto </td> <td>Определяет, может ли пользователь перетащить элемент </td> </tr><tr class="newtag"><td>irrelevant </td> <td>true<br> false </td> <td>Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается </td> </tr><tr class="newtag"><td>ref </td> <td>URL / id </td> <td>Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено) </td> </tr><tr class="newtag"><td>registrationmark </td> <td>reg_mark </td> <td>Определяет зарегистрированный знак элемента </td> </tr><tr class="newtag"><td>template </td> <td>URL / id </td> <td>Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу </td> </tr></tbody></table><h3>Структура разметки страницы в HTML5</h3> <p>При использовании <b>обычной структуры страницы </b> сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (<div class="header">, <div class="nav">, <div class="aside">, <div class="section">, <div class="footer"> и пр.).</p> <p>При использовании <b> с применением HTML5 </b>, эти блоки описываются структурными тегами <header>, <nav>, <aside>, <section>, <footer> и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.</p> <p>Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс , а также можно воспользоваться следующим алгоритом:</p> <p><b>Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5 </b>. Для браузеров IE8 и меньше следует подключать javascript , который "научит" их понимать новые теги. Код для его подключения ниже:</p><p> <!--> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!--> </p><p>В верстке макетов при мы перешли на использование нового стандарта HTML5. <b>Если вы хотите заказать сайт или отдельно </b>, можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!</p> <p>Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно - ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.</p> <p>Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:</p> <p> <div id="msglist" class="user_bob"></div></p> <p>Наш JavaScript код будет искать элемент с ID <b>msglist </b>. С помощью скрипта мы будем искать классы, начинающиеся с <b>user_ </b>, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.</p> <p>Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):</p> <p> <div id="msglist" class="user_bob list-size_5 maxage_180"></div></p> <p>Наш атрибут <b>class </b> очень быстро загромождается - проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.</p> <h2>Data-атрибуты HTML5</h2> <p>К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом <b>data- </b>, например:</p> <p> <div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div></p> <p>Пользовательские data-атрибуты:</p> <ul><li>это строки - в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript</li> <li>должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов</li> <li>относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов</li> </ul><h3>Пример №1 обработки на JavaScript: getAttribute и setAttribute</h3> <p>Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:</p> <p>Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);</p> <p>Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.</p> <h3>Пример №2 обработки на JavaScript: метод data() библиотеки jQuery</h3> <p>Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс <b>data- </b>, так что подобный код будет работать:</p> <p>Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);</p> <p>Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от <b>setAttribute </b>, метод <b>data() </b> физически не заменит атрибут <b>data-list-size </b> - если вы проверите его значение вне jQuery - оно все еще останется равным 5.</p> <h3>Пример №3 обработки на JavaScript: API для работы с наборами данных</h3> <p>И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов <b>data- </b>, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:</p> <table border="0"><tbody><tr><td><b>Имя атрибута </b> </td> <td><b>Имя в API набора данных </b> </td> </tr><tr><td>data-user </td> <td>user </td> </tr><tr><td>data-maxage </td> <td>maxage </td> </tr><tr><td>data-list-size </td> <td>listSize </td> </tr></tbody></table><p>Наш новый код:</p> <p>Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;</p> <p>Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;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()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> </div> <div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div> <div class="single-share"> <div class="single-share__top"> <div class="single-share__title">Понравилась статья? <span>Поделитесь с друзьями!</span> </div> <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=https%3A%2F%2Fgadgets-room.ru%2Fglobalnye-atributy-html-vvedenie-v-formy-html5-i-novye-atributy-elementy-list-i%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook"> <i class="fa fa-facebook-official"></i> <span>Поделиться в <b>Facebook</b> </span> </a> </div> </div> <div class="full-place" data-place="article_above_similar_articles" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_above_similar_articles_2" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_under_social" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="fixed_bottom_right" data-priority="0" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title">Читайте также</div> <div class="block-row read-more__box"> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/5921b95f5facee3f4e69bdbf8580f5e1.jpg" alt="Новый стрим от джова сентябрь" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/novyi-strim-ot-dzhova-sentyabr-strimy-world-of-tanks/">Новый стрим от джова сентябрь</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/a77c4a5ef96f7c303f0a403e3916c72c.jpg" alt="Ники для Твиттера: как придумать хороший ник или поменять на другой" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/kak-pridumat-imya-v-tvittere-niki-dlya-tvittera-kak-pridumat-horoshii-nik-ili/">Ники для Твиттера: как придумать хороший ник или поменять на другой</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/93ede0756666e58a0a5919f5e27f7007.jpg" alt="Крутые никнеймы для парней Прикольные логины" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/spisok-samyh-smeshnyh-i-prikolnyh-nikov-dlya-devushek-i-parnei/">Крутые никнеймы для парней Прикольные логины</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/4351e34f1c430ba34d9dce63514636b7.jpg" alt="Крутые никнеймы для парней" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/kakoi-pridumat-nik-v-kontakte-krutye-nikneimy-dlya-parnei/">Крутые никнеймы для парней</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/a4bc08d762d9cc37fb64d38b99203848.jpg" alt="Крутые никнеймы для парней" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/prikolnye-imena-na-vk-krutye-nikneimy-dlya-parnei-kak/">Крутые никнеймы для парней</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/347f0fec07b34b6bbc7b22db6690e346.jpg" alt="Прикольные ники для девушек и парней" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/populyarnye-niki-v-tvittere-prikolnye-niki-dlya-devushek-i/">Прикольные ники для девушек и парней</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/aade1f2f4c4bbb4f43f277df83692f20.jpg" alt="Крутые никнеймы для парней" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/krasivyi-nik-pod-imenem-dima-krutye-nikneimy-dlya-parnei-pridumyvaem/">Крутые никнеймы для парней</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/6b945b5f67f4e6300e8a7582e91e1981.jpg" alt="Как придумать эффектный ник, который произведет впечатление" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="/top-imya-dlya-igry-kak-pridumat-effektnyi-nik-kotoryi-proizvedet-vpechatlenie-prikolnye-niki-dlya-d/">Как придумать эффектный ник, который произведет впечатление</a> </div> </div> </div> </div> </div> <div class="full-place" data-place="article_under_similar_articles" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_under_similar_articles_2" data-priority="0" style="width: 100%;"></div> <style> #mc-container { margin: 0px 30px; } </style> <section class="comments"> <div class="cc mc-c mc-loggedin"> <div class="mc-comments"> </div> </div> </section> <div class="full-place" data-place="article_after_comments" data-priority="0" style="width: 100%;"></div> </div> <div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div> </div> <aside class="sidebar"> <div class="full-place" data-place="articles_sidebar_top" data-priority="1" style="width: 100%;"></div> <div class="sidebar__widget day-sovet"> <h3 class="day-sovet__hd">Рада дня</h3> <div class="block-gui"> <div class="block-gui__image"> <img src="/uploads/ae6b65513c72917099ece0c566b1afa7.jpg" alt="Як можна назвати персонажа в грі дівчину" / loading=lazy loading=lazy> </div> <div class="block-gui__content"> <a class="block-gui__link" href="/kak-mozhno-nazvat-personazha-v-igre-devushku-niki-dlya-igr-kak-sozdat/">Як можна назвати персонажа в грі дівчину</a> </div> </div> <!-- /next_post --> </div> <div class="sidebar__widget"> <div class="block-title _left">Популярні статті</div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/02ebd8b285c5f16153ff24f2d1aeab6b.jpg" alt="Круті ники без символів" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="/krutye-niki-bez-simvolov-niki-dlya-igr-tipichnye-oshibki-pri/">Круті ники без символів</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/8a9a43662c8dbe17e51a21e60efdb9ad.jpg" alt="Як придумати ефектний нік, який справить враження" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="/horoshie-niki-dlya-igry-kak-pridumat-effektnyi-nik-kotoryi-proizvedet/">Як придумати ефектний нік, який справить враження</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/37b21bc55ed7e4121c0e2cedfcbdc0db.jpg" alt="Як придумати ефектний нік, який справить враження" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="/kak-sdelat-samyi-krutoi-nik-kak-pridumat-effektnyi-nik/">Як придумати ефектний нік, який справить враження</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/0b447f755bcdc0620e7de3cda80d91c4.jpg" alt="Як вибрати ім'я користувача в твіттері" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="/kakoe-imya-mozhno-pridumat-v-tvittere-kak-vybrat-imya/">Як вибрати ім'я користувача в твіттері</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/bca301eb470fc91b9268db84185613e9.jpg" alt="Хто такий SEO-спеціаліст і чим він займається?" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="/dolzhnostnye-obyazannosti-seo-specialista-kto-takoi-seo-specialist-i-chem-on/">Хто такий SEO-спеціаліст і чим він займається?</a> </div> </div> </div> <div class="full-place" data-place="article_sidebar_under_vk_2" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="articles_sidebar_under_vk_widget_3" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="articles_sidebar_4" data-priority="0" style="width: 100%;"> </div> <div class="full-place" data-place="articles_sidebar_under_vk_widget" data-priority="0" style="width: 100%;"></div> </aside> </div> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__left"> <div class="footer__copyright">© 2021..</div> </div> <div class="footer-menu"> <a class="footer-menu__item" data-type="href" href="">ПРО НАС</a> <a class="footer-menu__item" data-type="href" href="">КОНТАКТИ</a> </div> <div class="footer-menu"> <a class="footer-menu__item" data-type="href" href="">РЕКЛАМА НА САЙТІ</a> <a class="footer-menu__item" href="/sitemap.xml">КАРТА САЙТУ</a> </div> <div class="footer__right"> <div class="social-buttons _footer"> <a class="social-buttons__item _vk" href="" target="_blank">Vkontakte</a> <a class="social-buttons__item _fb" href="https://facebook.com/" target="_blank">Facebook</a> <a class="social-buttons__item _ok" href="" target="_blank">Odnoklassniki</a> <a class="social-buttons__item _pt" href="" target="_blank">Pinterest</a> </div> </div> </div> <div class="full-place" data-place="article_before_footer" data-priority="0" style="width: 100%;"></div></footer> <div class="full-place" data-place="article_consultant" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="common_mobile_sticky_bottom" data-priority="0" style="width: 100%;"></div> <script data-rocketsrc="/assets/sovets-2017/js/app-20180109133831.js" type="text/rocketscript"></script> </main> <div class="scroll-up"> <div id="toTop"><span class="up_b"></span>наверх</div> </div> <div class="full-place" data-place="article_before_body" data-priority="0" style="width: 100%;"></div> </body> </html>