8 главных причин использовать новые элементы в HTML5
Я возобновил изучение HTML5, как только начал публиковать свои статьи на Medium. Среди контента, который я стремился лучше понять семантику и структуру этого языка разметки, есть веб-сайты, курсы и книги. И именно в последнем из них я наткнулся на довольно странное утверждение. «Не используйте новые элементы в HTML5. Они вам не нужны». ЧТО!?
Возможно, вы не знаете, но я только начинаю программировать, и это утверждение заставило меня задуматься о моих занятиях HTML в течение последнего года. Я не делал потрясающую работу, просто время от времени брал уроки. Но простота или поверхностность, которую подразумевают некоторые курсы по HTML, заставили меня поверить, что я осваиваю предмет. И почти не забываю использовать какие-либо новые элементы в моем HTML-коде. Впечатление, что я много знаю об этой теме, возникло из многих источников, которые обучают основам структуры HTML и перескакивают вас к CSS и Javascript. Может быть, я сделал неправильные курсы, многие из них. Стыдно признаться, но из того, что я знал об HTML, у меня возникла идея, что любая проблема с построением моих блоков может и должна быть решена в основном с помощью CSS.
Именно тогда я наткнулся на статью Ансельма Ханнемана в Smashing Magazine, в которой говорилось о сложности поиска кандидатов с хорошим пониманием разметки и семантики.
Хорошо, не только я совершаю эту ошибку! В попытке найти основные причины, по которым мы с вами должны недооценивать правильное использование диапазона элементов в HTML5, я составил список некоторых важных аргументов, которые я нашел.
1. HTML5 никуда не денется
Все интернет-браузеры пытались следовать концепциям, которые HTML5 привнес в семантику этого языка разметки. Несколько лет назад отсутствие поддержки некоторых тегов вызывало большую озабоченность веб-разработчиков. Chrome — один из самых быстрых браузеров, адаптирующихся к новейшим обновлениям HTML, и не только он. Даже Internet Explorer, который был главной причиной головной боли для тех, кто пытается включить элементы в свою повседневную практику, уже включает поддержку тегов. Интернет-сценарий изменился, большинство новых элементов в HTML5 получили широкое распространение. Единственным исключением является тег <main>.
Для тега <main> IE и Opera Mini являются сопротивлением. Эти двое составляют около 6% всех страниц, к которым обращаются по всему миру. В этом случае элемент считается «неизвестным», и для его использования потребуется управление в CSS или DOM. Но это не веская причина не использовать элементы базовой структуры HTML. Есть так много других преимуществ включения его в ваш процесс кодирования HTML, что он кажется слишком маленьким, чтобы уничтожить все другие преимущества вашего кода.
2. Мультимедийный контент быстрее на любом устройстве
Мы хотим получить доступ ко всему контенту на любом экране, для любого из наших устройств, и мы хотим это прямо сейчас! До улучшений, представленных элементами HTML5, основным вариантом интеграции мультимедийного контента для веб-страниц был Flash или Silverlight. Что означает высокую сложность и временные затраты. К веб-приложениям следует относиться по-разному, от настольных до мобильных, требуя больше работы от разработчиков и больше времени для доставки контента конечному пользователю. Эти времена закончились.
HTML5 сделал возможной интерактивную реальность для тех, кто пишет код, и для пользователей. Вы можете включать анимацию, потоковое видео, воспроизводить музыку, встраивать социальные сети с своевременными обновлениями — все это с помощью функций, встроенных прямо в браузер.
3. Четкая разметка и семантика
Я не знаю вас, но я, как новичок, злоупотребляю тегом <div> в своем коде. Возможно, это типичный путь для ученика, но точно не может быть текущей практикой для профессионального разработчика. Я не мог точно сказать, сколько раз я терялся между многими <div>, не зная, есть ли у меня больше закрывающих тегов, чем нужно. Конечно, редакторы кода могут уберечь вас от той же ошибки, что и я. Однако использование большого количества <div> и <span> не самый прозрачный способ написания кода.
Вы можете видеть в примере ниже, что в какой-то момент <div> превращается в какое-то бессмысленное. Невозможно быть уверенным в том, что элемент строит в вашей HTML-структуре с добавлением к нему класса CSS или идентификатора.
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="page">
<div id="header">
<h1>Header 1</h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2>Header 2</h2>
<div class="entry">
<p>First Paragraph</p>
</div>
</div>
<div class="post" id="post-1000571">
<h2>Header 2</h2>
<div class="entry">
<p>First Paragraph</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright 2018</p>
</div>
</div>
</body>
</html>
Применение новых элементов сделало код легко читаемым. Теперь легко визуализировать, какая именно часть связана с блоками страницы, увеличивая семантическую ценность разметки. С более последовательным кодом дизайнеры и разработчики могут быстро понять, как устроена страница.
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<header>
<h1>Header 1</h1>
</header>
<section>
<article>
<h2>Header 2</h2>
<p>First Paragraph</p>
</article>
<article>
<h2>Header 2</h2>
<p>First Paragraph</p>
</article>
</section>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
4. Простота и в CSS
С элементами, передающими больше информации в структуру, вы можете сэкономить вес, используя элементы тегов прямо в нашем CSS.
#main {}
#header {}
Класс и идентификатор являются более конкретными, что придает вашему коду большой вес.
main {}
header {}
Но дело не только в специфике CSS. HTML5 и CSS3 — это идеальная математика, в то время как один из них позволяет взаимодействовать с различными форматами мультимедиа, а другой предоставляет множество функций для стилей. С помощью дуэта вы можете добавлять градиенты, тени, преобразовывать блоки и анимировать их. Даже без Javascript вы можете создавать расширенные эффекты с ключевыми кадрами, определяющими правила и шаги в точный период времени.
5. Улучшает доступность
Лучшая семантика дает контекст программам чтения с экрана, улучшая навигацию по вашей странице для людей с некоторыми нарушениями зрения. Одним из инструментов, предоставляемых читателями, является возможность переключаться между разными типами контента: ссылками, формами, заголовками. Но это невозможно, если в вашем коде полно <div> и <span>. То же самое происходит с навигацией с помощью клавиатуры. Эти различные технологии могут работать лучше, улучшая свои функции и предоставляя пользователям более качественные услуги благодаря новой семантике HTML5.
6. Хранилище на стороне клиента с HTML5
Файлы cookie по-прежнему являются основным каналом для уникальных пользовательских данных, но они имеют некоторые недостатки в отношении времени отклика страницы. Наибольшее количество данных, которые файлы cookie добавляют к HTTP-запросу, оказывает наибольшее влияние на отклик вашей страницы. Вот почему обычной практикой было создание инфраструктуры на стороне сервера. Конечно, серверная часть по-прежнему широко используется разработчиками. Однако HTML5 предоставляет другие хранилища, используя localStorage, IndexDB и sessionStorage.
localStorage дает около 5Mb; точная сумма будет зависеть от браузера, в котором отображается ваша страница. API localStorage не слишком сложен, а методы интуитивно понятны, например, getItem, setItem, clear и removeItem. Инструменты разработчика Chrome обеспечивают очень организованный процесс просмотра и управления данными, хранящимися в localStorage. Одна вещь, которую вы должны учитывать при использовании localStorage, — это необходимость очистки самых старых данных от последних.
IndexDB начинается с 5 МБ, но может быть увеличена до 50 МБ с разрешения пользователя, обеспечивая лучшее хранилище данных на стороне клиента. Уровень сложности выше, чем у localStorage, но управление запросами и данными также более качественное. SessionStorage, в отличие от двух других, будет очищен, когда пользователь остановит браузер. А насчет безопасности, из них по тому же принципу, а значит данные доступны только для исходящего домена.
7. Кэш автономных приложений
Кэш приложения HTML5 определяет, как браузер будет доставлять информацию в автономном режиме. Таким образом, разработчик может указать его при создании сайта и указать, какие файлы должны кэшироваться. Преимуществ много, при правильной загрузке страницы пользователь все еще может просматривать, данные будут загружаться намного быстрее, а нагрузка на сервер будет снижена.
Ну, вы могли бы спросить: «Как кэш приложения успевает синхронизировать данные после того, как они снова подключены к сети?» Ну, это не так. Это часть работы разработчика, чтобы управлять им, написав эту сантехнику. Чтобы правильно использовать кеш приложения, вы должны периодически проверять онлайн-статус, когда ваше веб-приложение находится в автономном режиме.
8. Нативные API обогащают ваш сайт
Существует большой набор API-интерфейсов, которые вы можете использовать для улучшения взаимодействия с пользователем на вашем сайте, таких как GeoLocation, Drag and Drop, FileSystem и другие. С разрешения пользователя вы можете точно знать, где они находятся, обеспечивая их местоположение и конкретный опыт. Если говорить о мобильных устройствах, другие API, такие как полноэкранный режим, видимость и захват мультимедиа, могут повысить производительность устройства с меньшим расходом заряда батареи. Вместе с мультимедийными элементами данные API могут обеспечить динамическое и интерактивное удобство использования страницы для вашего пользователя. И по мере развития HTML5 этот опыт будет еще больше обогащаться.
Вот и все!
Если вы хотите узнать немного больше об базовой структуре HTML, посмотрите мой последний пост здесь. Чтобы узнать больше обо мне и почему я пишу в Medium, смотрите мой пост здесь.
