Представлен HTML 5.1:14 объясненных новых функций и практическое использование
HTML5 принадлежит Консорциуму Всемирной паутины (W3C), который предоставляет стандарты в сети, чтобы протоколы со всего мира были взаимодоступными. В ноябре 2016 года W3C обновил давно существующий HTML 5, что стало первым незначительным обновлением за два года. Многие первоначальные функции HTML 5.1 были исключены из-за неправильного дизайна и отсутствия поддержки браузеров.
Несмотря на то, что в HTML 5.1 было внесено несколько элементов и улучшений, это все же незначительное обновление. Некоторые из новых элементов содержат комбинированные теги, которые теперь включают
W3C уже начал работу над черновиком HTML 5.2, который, как ожидается, будет выпущен ближе к концу 2017 года. Тем временем мы представляем некоторые интересные новые функции и улучшения, представленные в версии 5.1. Вы можете использовать эти функции, не касаясь JavaScript. Не все браузеры поддерживают эти функции, поэтому лучше проверить поддержку браузера, прежде чем использовать их в рабочей среде.
14. Предотвращение фишинговой атаки
Большинство людей, использующих target=’_blank’, понятия не имеют о любопытном факте:вновь открытая вкладка может изменить window.opener.location на какую-то фишинговую страницу. Он выполнит некоторый вредоносный код JavaScript на начальной странице от вашего имени. Поскольку пользователи доверяют уже открытой странице, у них не возникнет подозрений.
Чтобы полностью устранить эту проблему, в HTML 5.1 стандартизировано использование атрибута rel="noopener", который разделяет контексты браузера. rel="noopener" можно использовать в тегах и .
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Читайте:24 инструмента анимации CSS3 и HTML5 для дизайнеров
13. Гибкая обработка подписи к рисунку
Тег
HTML5.1 ослабил это ограничение, и теперь вы можете использовать
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12. Проверка орфографии
Проверка орфографии — это перечисляемый атрибут, ключевыми словами которого являются пустая строка, true и false. Состояние «истина» указывает на то, что для элемента необходимо проверить орфографию и грамматику.
element.forceSpellCheck() заставляет пользовательский агент сообщать об орфографических и грамматических ошибках в текстовом элементе, даже если пользователь никогда не фокусировался на элементе.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. Пустой вариант
Новая версия HTML позволяет создавать пустой элемент
10. Разрешить полноэкранный режим для кадров
Логический атрибутallowfullscreen, разработанный для фреймов, позволяет вам контролировать, может ли контент отображаться в полноэкранном режиме, с помощью метода requestFullscreen(). Например, возьмем iframe, в который встроен плеер с YouTube. Атрибутallowfullscreen необходим для того, чтобы проигрыватель мог показывать видео в полноэкранном режиме.
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. Вложенный верхний и нижний колонтитулы
HTML 5.1 позволяет вкладывать верхний и нижний колонтитулы в другой заголовок. Вы можете добавить верхний или нижний колонтитул к элементу заголовка, если они сами содержатся в содержимом раздела.
Эта функция может быть весьма полезна, если вы хотите добавить сложные заголовки к элементам семантического секционирования, например
В приведенном ниже коде
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p> </article>
8. Изображения нулевой ширины
Новая версия HTML позволяет добавлять изображения нулевого размера. Эта функция используется, когда изображение не предназначено для пользователя. Если элемент img используется для целей, отличных от отображения изображения, например, как часть службы для подсчета количества просмотров страниц, используйте атрибуты ширины и высоты со значением 0. Для изображений нулевой ширины рекомендуется использовать пустые атрибуты.
<img src="theimagefile.jpg" width="0" height="0" alt="">
7. Проверка формы
Новый метод reportValidity() позволяет проверять форму и получать результаты, а также сообщает об ошибках пользователям прямо в браузере. Пользовательские агенты могут сообщать о более чем одном нарушении ограничений, если элемент одновременно страдает от нескольких проблем. Как и в этом случае, ввод «пароля» должен быть помечен ошибкой, поскольку он обязателен, но пуст.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6. Контекстное меню браузера
В HTML 5.1 вы можете использовать тег