- Новые теги HTML
- Намного больше, чем новые теги
- HTML5 Genesis
- Стоит приложить усилия для преобразования Genesis в HTML5
HTML5 - это новый стандарт HTML. Он разрабатывался годами, даже в 2006 году, и ожидается, что к концу 2014 года HTML5 будет полностью стандартизирован.
HTML5 обеспечивает более динамичный веб-контент без необходимости использования сторонних технологий, таких как Flash. Поскольку HTML5 настолько нов и еще не полностью завершен, ни один веб-браузер не поддерживает полностью все, на что он способен на 100%.
Тем не менее, кажется, что Chrome и Firefox лучше совместимы с HTML5, чем некоторые другие крупные браузеры. Internet Explorer все еще значительно отстает от пакета, как вы можете видеть из этого таблица сравнения браузеров ,
Новые теги HTML
В HTML5 есть 12 менее используемых тегов, которые были удалены из стандарта. Одним из тех, которые я обычно использовал, особенно в текстовых виджетах и т. П., Является центральный тег. Посмотреть полный список тегов HTML5.
Однако, что более интересно, это то, что было добавлено. Просматривая этот список тегов, вы увидите, что в HTML5 появилось 30 новых тегов по сравнению с предыдущими версиями. Именно эти новые теги и способ, которым HTML5 может обрабатывать и представлять различные формы веб-контента, такие как аудио- и видеофайлы, являются причиной такого большого интереса к новому стандарту.
Все эти новые теги предоставляют более дискретные способы организации веб-страницы с определенными типами областей содержимого по сравнению с текущим стандартом XHTML.
До настоящего времени существовал один основной инструмент для создания различных блоков контента на веб-странице: тег div . HTML5 добавляет все виды других тегов для упорядочивания нашего контента, таких как заголовок , нижний колонтитул , статья , aside , nav и section .
Все эти новые теги дадут нам разработчикам более дискретный контроль над нашими веб-страницами и потенциально позволят отображать веб-контент способами, которые мы еще даже не рассматривали.
Намного больше, чем новые теги
HTML5 - это намного больше, чем некоторые новые теги, которыми можно отмечать наши сайты. Это облегчит использование Интернета для широкой публики и в то же время облегчит программирование для разработчиков!
Вот лишь некоторые из других преимуществ HTML5:
- Последовательный, более чистый код - поскольку HTML5 имеет больше тегов для определения различных областей встроенной веб-страницы, кодеры будут более согласованы с тем, как они кодируют вещи. Например, ранее с div и классами основная навигация сайта могла иметь класс nav, main-nav, navigation, menu и т. Д. Теперь с блоками навигации HTML5 всегда будет использоваться тег nav , добавляя согласованность в Интернет.
- Лучшая доступность - это повышение согласованности и более четко определенных структур страниц означает, что HTML5 будет иметь лучший доступ для пользователей с ограниченными возможностями.
- Аудио и видео теги - Как мы уже упоминали, добавление стандартов для аудио и видео тегов означает, что теперь мы можем включать мультимедийный контент без необходимости полагаться на сторонние технологии, такие как Flash или Silverlight. В результате мы можем обеспечить более последовательный пользовательский опыт.
- Гораздо удобнее для мобильных устройств - мобильные браузеры внедрили и предоставляют широкую поддержку технологии HTML5. Это означает, что благодаря взрыву смартфонов и планшетов мы можем обеспечить постоянное взаимодействие с этими пользователями гораздо проще, чем раньше. Вместо того, чтобы нуждаться в отдельном веб-сайте для мобильных устройств, в HTML5 мы можем просто использовать мобильный адаптивный сайт, который настраивает макет для лучшего соответствия экранам меньшего размера.
- Лучшая поддержка форм - все больше и больше сайтов используют формы, чтобы пользователи могли отправлять данные. HTML5 имеет гораздо лучшую поддержку для более продвинутых функций форм, в том числе больше типов полей форм, и меньшую потребность в javascript для выполнения задач.
- И многое другое - в HTML5 доступно еще больше. Такие вещи, как автономное кэширование приложений, клиентские базы данных делают возможным сохранение параметров веб-сайта, даже когда окна браузера закрыты. Они также открывают возможность для объединения настольных и веб-приложений. HTML5 поставляется с поддержкой геолокации, поэтому веб-сайты и веб-приложения могут получать эту информацию от пользователей. HTML5 имеет гораздо более простой тип документа, который облегчает работу разработчиков. HTML5 будет иметь гораздо лучшую и более согласованную кросс-браузерную поддержку. И список продолжается!
HTML5 Genesis
Так что же все это значит для пользователей фреймворка Genesis? С недавним выпуском Genesis 2.0 команда StudioPress встроила встроенную поддержку HTML5. Это означает, что продвижение дочерних тем Genesis теперь может использовать все эти достоинства HTML5.
Простое добавление одной строки кода указывает платформе Genesis перейти на HTML5 вместо использования XHTML. Удаление этого кода в файл functions.php дочерней темы сделает переключение:
add_theme_support ('html5');
Эта строка кода говорит Genesis изменить несколько вещей:
- сайт доктайп изменен на HTML5
- Контент выводится с семантическими тегами HTML5 вместо предыдущих тегов XHTML
- CSS-разметка изменена для соответствия тегам HTML5
- Genesis вызывает цикл HTML5 вместо стандартного цикла для постов и страниц
- Крючки разных генезисов применяются с новой петлей
- Микроданные добавляются в разметку
Это много изменений происходит из-за одной маленькой строчки кода. К сожалению, вы не можете просто включить HTML5 в своей дочерней теме Genesis и быть в пути. Если вы попытаетесь это сделать, ваш сайт сломается. Массивно.
Как видно из приведенного выше списка, по крайней мере вам придется проделать значительную работу с CSS, чтобы преобразовать таблицу стилей для размещения новых тегов HTML5 и новой разметки CSS, которая выводится Genesis при активации HTML5.
К счастью, StudioPress собрал удобный таблица сравнения разметки для нас, который показывает основные различия между тегами и выводом CSS. (Вам нужно будет войти в свою учетную запись StudioPress, чтобы увидеть диаграмму.) Это помогает конвертировать дочерние темы.
Помимо изменений CSS, вашей дочерней теме также может понадобиться изменить некоторые из PHP. Поскольку Genesis 2.0 изменяет некоторые хуки, когда активируется HTML5, вам нужно будет пройти через все функции, которые также используют старые хуки, когда вы конвертируете свой сайт. Вот хороший учебник по Genesis крюк меняется в 2.0 ,
Стоит приложить усилия для преобразования Genesis в HTML5
Итак, как вы можете видеть, даже несмотря на то, что Genesis позволяет максимально легко использовать HTML5 в новой версии 2.0, в преобразовании дочерних тем есть небольшая работа. Мы работаем над преобразованием наших тем здесь, в Web Savvy, и первая из них должна быть готова к выпуску в ближайшее время.
Я думаю, что вы найдете усилия, чтобы конвертировать ваши сайты в HTML5, в конечном итоге того стоит. Это направление, в котором движется интернет, и конвертирование ваших тем даст вам преимущество в конкурентной борьбе.
Это седьмой в нашей серии статей о Лучшие практики для настройки темы Genesis ,