HTML5 это сравнительно новый язык, который можно считать неким обновлением от HTML4. Несмотря на то, что такой способ разметки появился сравнительно недавно, он отлично воспринимается всеми браузерами.
Следует выделить такие основные различия между 4 и 5 версией:
• есть новые теги и атрибуты;
• возможность рисовать на странице;
• есть возможность прикрепить геолокацию;
• вставка аудио и видео.
Официально считается, что этот язык разметки еще находиться на стадии разработки, но верстальщики уже активно его применяют по назначению. Что касается поддержки браузерами, то здесь нет никаких проблем кроме всем известного стандартного Эксплорера. Тут для корректного отображения нужно специальное расширение.
Кроме того, что HTML5 имеет расширенный функционал, следует отметить главное преимущество — верстать на новой версии языка очень удобно, так как это, прежде всего, семантика. Код читается легко и просто и понятен не только браузеру, но и человеку.
Верстка
В HTML5 Doctype уже значительно короче, поэтому запомнить все гораздо проще:
Это же самое касается и кодировки. Вместо длинной строки тегов и атрибутов видим следующее:
.
Что немало важно и, в принципе, существенно упрощает работу — при прописывании скриптов и стилей не обязательно указывать type. Для определения языка в новой разметке достаточно указать строку вида .
Как видите, прописывать только начальные команды стало гораздо проще.
Основные структурные элементы
В новом языке разметки следует выделить такие основные и наиболее нужные структурные элементы:
• — создает секции и может поддерживать вложенность определенного элемента;
• — тег для шапки сайта. Также может использоваться для определения границ заголовка на странице или в определенном разделе;
• — тег для обрамления подвала сайта или установки колонтитулов. В данной области содержится значок копирайта, условия копирования предоставленной информации и так далее;
• -тег для хлебных крошек, то есть навигационной цепочки сайта;
• — элемент используется для разметки основного содержания сайта;
• — тег для разметки сайдбара.
Нужно отметить и то, что для корректного отображения структурных элементов в HTML5 нужно размещать их блоками, так как они имеют инлайновую природу.
SEO-оптимизация
В HTML5 можно разделить при помощи разметки блоки, которые будут наиболее важны для поисковых систем. Таким образом, уже на этапе верстки сайт будет иметь начальную оптимизацию. В HTML4 это сделать было невозможно по той простой причине, что стандартный тег не давал смысловой значимости тому элементу, который расположен внутри этого тега. Другими словами, посредством новой разметки можно указать поисковикам – какие блоки нужны, а на какие можно не обращать внимание.
Исходя из всего вышесказанного, что переход на верстку по HTML5 дает возможность делать не только качественные сайты, но и начально их оптимизировать.
Автор статьи: Веб-студия «Ахрефа кз».
Официальный сайт: https://ahrefa.kz