В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие).
1. Map картинок
<map> тег может быть использован для создания кликабельных областей на картинке, которые могут быть использованы в перенаправлении пользователя на другой сайта или перемещение экрана на другую область страницы.
Вы можете определить в какой области картинки будет отображаться ссылка использую тег <area>, который должны быть внутри тега <map>.
Пример: http://codepen.io/rpsthecoder/pen/PqZNzG
2. Input подсказки
Используя <datalist> можно сделать список подсказок, которые будут появляться по время ввода данных в input.
Пример: http://codepen.io/rpsthecoder/pen/MwKybG
3. Подсветка текста
Иногда требуется подсветка текста на темной фоне сайта, чтобы отделить некоторые участки текста. Этого можно добиться используя тег <mark>. Цвет заднего фона можно изменить с помощью background-color, а так же можно добавить color, чтобы сменить цвет текста.
Пример: http://codepen.io/rpsthecoder/pen/XbXdMy
4. Template
Вместе с HTML5, появился новый тег <template>, который выполняет функцию хранения информации. Браузер не считывает (пропускает) все что внутри этого тега.
Для примера возьмем тег <table>. Внутри его будет создана одна строка при помощи <tr><td></td></tr>. Так же будет кнопка, которая динамично создает новые строки <tr> внутри <table>. <template> будет хранить <tr>, которая будет использоваться для добавления новой строки в таблицу.
Внимание: Данный тег не поддерживается в IE.
Пример: http://codepen.io/rpsthecoder/pen/KpVzmQ
5. Small
Иногда требуется сделать размер шрифта меньше — не таким как основной. Например: условия, цитаты, юридические права и так далее. Для этого подойдет тег <small>.
Пример: http://codepen.io/rpsthecoder/pen/RPraga
6. Ссылка на корень сайта
Тег <base> указывает корневую ссылку для всех ссылок внутри используемого документа. Так же об этом теге можно прочитать на официальном сайта Mozilla Developers.
Пример: http://codepen.io/rpsthecoder/pen/eNJZRP
7. Picture тег
Количество девайсов с разными расширениями экрана расчет с каждым днем. Для телефона надо одно разрешение, для компьютера другое. Теперь такой вопрос — как быть с картинками? Ведь их нужно адаптировать под разные экраны. Проблема решена, мы будем использовать HTML5 тег — <picture>, который позволяет добавлять разные картинки под разные расширения.
Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.
Пример: http://codepen.io/rpsthecoder/pen/jPWqLZ
8. Color Picker или выбор цвета
HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.
Пример: http://codepen.io/rpsthecoder/pen/XbXzeb
9. Группирование <option>
У вас очень много <option> элементов внутри <select> и вы хотите, разбить их по группам? Для этого вам подойдет тег <optgroup>, которые как раз выполняет данную функцию.
Внимание: данный тег может принимать свойства CSS.
Пример: http://codepen.io/rpsthecoder/pen/XbXdLv
10. <noscript> тег
Верстка внутри тега <noscript> покажется только когда в браузере будет выключена поддержка JavaScript. Важно указать пользователю на то, что у него выключена поддержка скриптов. Большинство сайтов на сегодня используют JavaScript и поэтому без его работы, сайт будет отображаться/функционировать неправильно.
<head>
<noscript><link rel="stylesheet" href="noscript.css"></noscript>
</head>
<body>
<noscript><h2>Javascript выключен в вашем браузере.</h2></noscript>
</body>
