Что такое HTML5?

HTML5: Современный стандарт разметки

HTML5 — это пятое поколение языка гипертекстовой разметки (HyperText Markup Language), которое представляет собой эволюцию предыдущих версий и стало стандартом de facto для создания веб-приложений. HTML5 был официально рекомендован W3C в 2014 году.

История и контекст

HTML5 появился как ответ на недостатки HTML 4.01 и XHTML. Основная работа началась в 2004 году группой WHATWG (Web Hypertext Application Technology Working Group), а затем была принята W3C. Ключевое отличие HTML5 — это не просто новая версия, а философия развития, где стандарт постоянно эволюционирует (Living Standard).

Основные возможности HTML5

1. Семантические элементы

HTML5 ввёл новые семантические теги, которые описывают смысл содержимого:

<header>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Заголовок статьи</h1>
    <p>Содержимое статьи</p>
    <footer>
      <p>Опубликовано 10 марта 2026</p>
    </footer>
  </article>
  
  <aside>
    <h2>Боковая колонка</h2>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Мой сайт</p>
</footer>

Семантические элементы: <header>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <footer> — улучшают SEO и доступность.

2. API для работы с медиа

HTML5 встроил поддержку видео и аудио без Flash:

<video width="640" height="480" controls>
  <source src="movie.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио
</audio>

3. Canvas и WebGL

Element <canvas> позволяет рисовать графику с помощью JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#ff0000";
ctx.fillRect(50, 50, 200, 100);

ctx.beginPath();
ctx.arc(300, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#00ff00";
ctx.fill();

4. Форм и валидация данных

HTML5 добавил новые типы input и встроенную валидацию:

<input type="email" required>
<input type="url">
<input type="number" min="0" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="search" placeholder="Поиск...">

5. localStorage и sessionStorage

Хранилище данных на стороне клиента:

localStorage.setItem("username", "John");
const username = localStorage.getItem("username");
localStorage.removeItem("username");
localStorage.clear();

sessionStorage.setItem("tempData", "value");

6. Geolocation API

Получение координат пользователя:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`Широта: ${latitude}, Долгота: ${longitude}`);
    },
    (error) => console.error("Ошибка:", error)
  );
}

7. Web Workers

Выполнение JavaScript в отдельном потоке (не блокирует UI):

const worker = new Worker("worker.js");
worker.postMessage({ data: [1, 2, 3, 4, 5] });
worker.onmessage = (event) => {
  console.log("Результат:", event.data);
};

8. Service Workers

Обеспечивают offline функциональность и кеширование:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js").then((registration) => {
    console.log("Service Worker зарегистрирован");
  });
}

9. WebSockets

Двусторонняя коммуникация в реальном времени:

const socket = new WebSocket("wss://echo.websocket.org");

socket.onopen = () => {
  socket.send("Привет, сервер!");
};

socket.onmessage = (event) => {
  console.log("Сообщение от сервера:", event.data);
};

Совместимость и поддержка

HTML5 поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge). Для старых браузеров используются полифиллы.

Заключение

HTML5 — это не просто обновление синтаксиса, а полноценная платформа для создания современных веб-приложений с поддержкой мультимедиа, работой с геолокацией, офлайн функциональностью и многим другим. Он стал основой для развития прогрессивных веб-приложений (PWA) и является стандартом индустрии на протяжении последних 12 лет.