Полезные техники HTML5 (часть первая)
Опубликовано: 05.09.2018
О новом стандарте разметки страниц - HTML5 - наслышаны все, но в чем конкретно его новшество, и, самое главное, как его использовать по-назначению? В этом цикле статей будут описываться основные приемы HTML5, чтобы пролить свет на назначение новых элементов и модификацию уже имеющихся, согласно технологии HTML5.
Новый doctype
Пришло время забыть старый длинный доктайп - "-//W3C//DTD XHTML 1.0 Transitional ...". Теперь достаточно указать:
<!DOCTYPE html>Элементы figure и figcaption
Эти теги необходимы для того, чтобы поисковые системы правильно распозновали и обрабатывали неоднородные, но логически связанные элементы - страницы, например:
Как придумывать идеи: техника мудборд
<figure> <img src="buldog.jpg" alt="picture of dog"/> <figcaption> <p>Представители этой породы являются..</p> </figcaption> </figure>
То есть, в контексте данного примера, поисковик обрабатывает изображение и подпись под ним как единый объект. Ключевым элементом поиска является контент, заключенный между тегами figcaption.
Small - новое назначение использования
Если раньше small использовался для простого уменьшения текста, теперь же его предлагается использовать для информации, указанной мелким шрифтом (информация о копирайте внизу страницы, сноски и т.п.).
Отсутствие атрибута Type для тегов script и link
Веб-разработчиков избавили от необходимости указывать text/javascript и text/css. Type канул в лету, также как и language когда-то...
Кавычки в названии аттрибутов тегов теперь необязательны
Ставить или не ставить кавычки? Ответ - как пожелаете. Работать будет как с кавычками, так и без них.
Редактируемый контент
Атрибут "contenteditable=true" позволяет делать контент сайта редактируемым, при этом редактируется как элемент, в теге которого находится этот атрибут, так и дочерние элементы:
<table contenteditable=true> <th> <tr><td>Имя</td><td>Фамилия</td></tr> </th> <tr><td>Иванов</td><td>Петя</td></tr> <tr><td>Петров</td><td>Ваня</td></tr> </table>Сфера применения этого нововведения достаточно обширна - различные он-лайн конструкторы, редакторы, заполнение бланков гос. образца и вывод на печать в режиме он-лайн без необходимости сохранения на носителе. Одним словом, этот атрибут в "умелых" руках может оказаться полезным как для разработчика, так и для пользователя веб-сайта.
Валидация email адреса
В HTML5 добавлено новое значение атрибутов type и name для input элемента формы - "type=email" и "name=email" (для Оперы обязательно указать name!):
<form> <label for="email">Укажите ваш email</label> <input type="email" name="email" /> <input type="submit" value="Далее" /> </form>Что особенно удобно - проверяется соответствие введеного email адреса шаблону, а при попытке отправить невалидный email-адрес автоматически всплывает подсказка, с просьбой все-таки указать электронный адрес.
Отдельные теги для header, footer, nav, article и section
Еще одно нововведение,призванное улучшить структуру сайтов. Но нужно отметить, что для Internet Explorer'a для корректного отображения необходимо внести следующую правку в CSS: header, nav, article, section, footer { display:block;} и подключить Javascript с адреса http://html5shim.googlecode.com/svn/trunk/html5.js , специально созданный для адаптации IE под HTML5.
Продолжение следует...Jeffrey Way
1691