Июль 8, 2014 Запись была обновлена
Функции, советы и методы HTML5
Технология HTML5 развивается быстро — очень быстро! И для того чтобы не отставать в развитии, необходимо знать обо всех изменениях в данной технологии. Так что, если вы чувствуете что данная технология вам интересна и вы хотите повышать в ней свои навыки, обязательно прочтите данную статью.
Методы HTML5
1. Новая запись DOCTYPE
Раньше мы пользовались большой, громоздкой записью для определения DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
HTML5 предоставляет нам возможность не писать все подробности, а объявить DOCTYPE следующим образом:
<!DOCTYPE html> |
На самом деле данный блок не является необходимым в HTML. Тем не менее, он необходим для старых браузеров, которые требуют указывать DOCTYPE. Браузеры, которые не понимают HTML5 будут показывать страницу в стандартном режиме. Так что, не волнуйтесь, переходить на HTML5.
2. Изображения и подписи к ним
Рассмотрим следующую разметку для изображений:
<img src="images/love.png" alt="Прикольный смайл" /> <p>Прикольный смайл</p> |
Раньше было тяжело сгрупировать изображение и подпись к нему.Там, к сожалению, нет легкого или семантического способа связать заголовок, завернутый в тег абзаца, с изображением самого элемента. HTML5 решает данную проблему, с введением элемента. В сочетании с элементом, теперь мы можем связать подписи с изображениями.
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> |
3. <small> переопределен
Раньше тег использовался для уменьшения текста, но был редко использован веб-разработчиками, но всё таки не был удален разработчиками HTML5. Теперь данный тег используют для обозначения «мелкого текста» — то есть текста, который не привлекает сильного внимания. Например, предупреждение о запрещении копирования материала, помещенное в самом низу сайта, наподобие следующего:
<small>Запрещено копировать материал с данного сайта! Данный материал защищен авторским правом.</small> |
4. Отсутствие типов для тегов <script> и <link>
Раньше необходимо писать типы для тегов <script> и <link>, например:
<link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script> |
В HTML5 больше нет необходимости писать данный атрибут:
<link rel="stylesheet" href="style.css" /> <script src="script.js"></script> |
5. Закрывать или не закрывать теги
Вот в чем вопрос. Помните, что HTML5 это не XHTML. Здесь необязательно писать значения атрибутов в кавычках. Вам не нужно закрывать некоторые теги. Если вас устраивает данный стиль написания, то можете применять его. Лично для меня теги должны закрываться, а значения атрибутов должны находиться в кавычках.
<p class=content id=someText>Пример текста |
Здесь важно лишь ваше мнение, и то как вам приятнее писать и видеть код. Если желаете более структурированный код, тогда пишите с закрывающими тегами.
6. Сделайте свой контент редактируемым
Новые браузеры имеют классный новый атрибут, который может быть применен к элементам, называется contenteditable. Как следует из названия, это позволяет пользователю редактировать любой текст, содержащийся в элементе, в том числе и потомках.
<ul contenteditable="true"> <li>Сделайте свой сайт.</li> <li>Создание сайтов - это легко!</li> <li>У вас всё получится</li> </ul> |
7. Проверка поля E-mail
В HTML5 при использовании поля для ввода типа e-mail адреса, чтобы только с помощью браузера проверить корректность ввода адреса электронной почты. И это без всяких проверок с помощью javascript-ов. Но пока что мы не можем использовать данную функцию в наших сайтах по понятным причинам. Ведь в старых браузерах, которые не понимают HTML5, данные поля не будут проверяться.
<form action="" method="get"> <label for="email">E-mail:</label> <input id="email" name="email" type="email" /> <button type="submit">Отправить</button> </form> |
8. Заполнители
Раньше нам необходимо было использовать JavaScript для создания заполнителей для текстовых полей. Конечно, можно установить значение по умолчанию и данное значение будет удалено, как только пользователь поставит курсор в данное поле. Заполнитель решает эту проблему иначе и как всегда более просто:
<input name="email" type="email" placeholder="test@gmail.com" /> |
9. Блоки HEADER и FOOTER
Ушли те времена:
<div id="header"> ... </div> <div id="footer"> ... </div> |
В HTML5 данные блоки с атрибутами могут быть заменены соответствующими тегами:
<header> ... </header> <footer> ... </footer> |
Постарайтесь не смешивать эти элементы с «заголовком» и «подвалом» вашего сайта. Они просто являются просто контейнерами.
Здесь мы закончим рассматривать методы HTML5, думаю вы даже на этом маленьком примере функций HTML5 ощутили удобство пользования данной технологией, а также то, с какой скоростью она развивается.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)