10 советов и техник HTML5(Часть1)


10 советов и техник HTML5(Часть1)

Эта отрасль развивается быстро, очень быстро! Если не быть аккуратным, то можно безнадежно отстать. Поэтому, если ты немного ошеломлен приближающимися изменениями и обновлениями языка HTML5, ты можешь использовать этот букварь необходимых знаний.

До сих пор используешь этот надоедливый, сложно запоминающийся XHTML doctype?

Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше — как бы сказал Дуглас Квейд

На самом деле знал ли ты, что, по правде говоря, даже эта директива не является обязательной в HTML5? Однако, она используется для современных и браузеров более ранних версий, которые требуют определенного doctype. Браузеры, которые не понимают эту директиву, просто отображают содержащуюся разметку в стандартном режиме. Поэтому начинай использовать новый doctype без боязни и особых стеснений.

Рассмотрим следующую разметку для изображений:

К сожалению, нет возможности ассоциировать подпись, содержащуюся в тэге параграфа, с элементом изображения, к которому эта подпись относиться. В HTML5 это исправляется с помощью элемента <figure>. В комбинации с элементом <figcaption>, мы можем семантически ассоциировать подписи с соответствующими изображениями.

Не так давно, я использовал элемент <small> для создания подзаголовков, которые близко связаны с логотипом. Это очень удобный презентационный элемент; однако сейчас это будет не корректным использованием. Элемент small сейчас переопределен более специализировано для отображения мелкого текста. Представь краткий блок об описании авторских прав на твоем сайте; в соответствии с новым опредлением элемент <small> может быть корректно содержать эту информацию.

Элемент small сейчас относится к «маленькому тексту».

Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script

Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type.

…В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще.

Попробуй и ты. Но если ты предпочитаешь более структурированные документы, во всех смыслах, ты можешь использовать кавычки.

Content Editable

Современные браузеры понимают новый стильный атрибут, который может быть использован в элементах, называемый contenteditable. Как можно предположить из названия, он позволяет пользователю редактировать любой текст, содержащийся в элементе, включая его дочерние элементы. Существует множество способов использования нечто подобного, включая приложения списков дел, использующих преимущества локального хранилища.

Или, как мы узнали из прошлого совета, мы можем написать это так:

Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом.

Email Validation

В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано.

Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name. Однако, она не поддерживает атрибут placeholder, который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать.

Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию.

Опять же, поддержка этой функции достаточно сомнительна во всех браузерах, однако, с каждым новым релизом ситуация будет меняться к лучшему. К тому же, если браузер такой, как Firefox или Opera, в настоящее время не поддерживает атрибут placeholder, ничего страшного.

Validation

Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы.

«Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище.
QuirksBlog

Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage.

Прошли времена подобного кода:

Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id. Теперь в HTML5 у нас появилась возможность использовать элементы <header> и <footer>. Разметка, приведенная выше, может быть переписана следующим образом:

Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer

Не надо путать эти элементы с заголовком и подвалом твоего сайта. Они просто ссылаются на эти контейнеры. По существу, имеет смысл размещать в элементе footer, к примеру, мета-информацию в нижней части статьи блога.

Источник: code.tutsplus.com

 

Previous Самые лучшие OpenCart шаблоны Топ 10+
Next 18 советов и техник HTML5(Часть2)

Suggested Posts

45 бесплатных адаптивных HTML5-шаблонов

PHP + cURL: авторизация на WordPress методом POST

Создание выпадающего мега меню на CSS3

10 бесплатных шрифтов с поддержкой кириллицы

Крутые исходники PSD

Создаем собственный шрифт из иконок для сайта