HTML5: Новая эра веб-разработки
📐 Смысловая разметка: семантика HTML5
HTML5 ввел логические блоки, которые заменили повсеместные <div> с классами. Это улучшает доступность (A11Y), SEO и читаемость кода. Основные элементы:
<header>
Шапка сайта или секции. Содержит навигацию, логотип, заголовки.
<nav>
Блок навигационных ссылок. Помогает скринридерам быстро находить меню.
<main>
Уникальный контент страницы. Должен быть только один на странице.
<article>
Самостоятельная единица: пост, новость, комментарий.
<section>
Тематическая группа контента, обычно с заголовком.
<aside>
Боковая панель, сноски, реклама — контент, косвенно связанный с основным.
<footer>
Подвал: информация об авторских правах, ссылки, контакты.
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>
<h2>Заголовок статьи</h2>
<p>...</p>
</article>
</main>
<footer>...</footer>
</body>🎬 Нативная мультимедиа: audio и video
До HTML5 внедрение видео требовало Flash или Silverlight. Теперь всё встроено в браузер.
<video>
Поддержка MP4, WebM, OGG. Атрибуты: controls, autoplay, loop, poster.
<audio>
Аудиофайлы без дополнительных расширений. Просто и удобно.
<source> & <track>
Элемент <track> позволяет добавлять субтитры (WebVTT) для видео, повышая доступность.
📝 Умные формы: новые типы input и валидация
HTML5 добавил десятки новых типов полей ввода, встроенную валидацию и плейсхолдеры. Больше не нужно писать тонны JS для базовых проверок.
⚙️ Мощные JavaScript API и графика
HTML5 — это не только разметка, но и целый набор API для создания сложных приложений.
🎨 Canvas 2D + WebGL
Динамическое рисование, игры, графики. <canvas> дает полный контроль над пикселями.
📍 Геолокация (Geolocation API)
Определение местоположения пользователя с его согласия.
📦 Drag & Drop API
Перетаскивание элементов без лишних библиотек.
🎯 Web Storage (localStorage / sessionStorage)
Храните данные на стороне клиента до 5–10 МБ без кук. Простой пример:
Сохранить имя в localStorage:
📡 Офлайн-режим и прогрессивные веб-приложения (PWA)
HTML5 в связке с Service Workers позволяет создавать приложения, работающие без интернета. Кэширование ресурсов, фоновые обновления — веб-платформа догнала нативные SDK.
🗄️ Application Cache (устарел)
Был первым шагом, сейчас заменён на Cache API + Service Workers.
⚡ Service Worker
Фоновый скрипт-посредник между браузером и сетью. Управляет кэшем, push-уведомлениями.
📱 Web App Manifest
JSON-файл, позволяющий «установить» сайт на домашний экран смартфона как нативное приложение.
// Пример регистрации Service Worker (основа PWA)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW зарегистрирован', reg))
.catch(err => console.log('Ошибка', err));
}Современный веб стал самостоятельной экосистемой — HTML5 превратил браузер в мощную операционную среду.
Автор: Александр
Дата публикации:
