• Главная
  • Карта сайта
Не найдено

Полезные техники HTML5 (часть первая)

Опубликовано: 05.09.2018

видео Полезные техники HTML5 (часть первая)

Основы адаптивной верстки Часть 1 Трепачёв Дмитрий

О новом стандарте разметки страниц - 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

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss