В чем разница между HTML4 и HTML5?

Различия между HTML4 и HTML5

HTML5 представляет собой значительную эволюцию от HTML4, принесшую множество новых элементов, атрибутов и возможностей для создания современных веб-приложений. Переход с HTML4 на HTML5 был вызван необходимостью поддерживать новые типы контента и функциональности.

История развития

HTML4 была стандартизирована в 1997-1999 годах (последняя версия 4.01 в 1999 году). На протяжении 10 лет это был основной стандарт для веб-разработки.

HTML5 начала разрабатываться в 2004 году рабочей группой WHATWG и была формально приспособлена W3C. Она стала живым стандартом, постоянно развивающимся.

Основные различия

1. Новые семантические элементы

HTML5 добавила множество семантических элементов вместо использования безмысленных <div> и <span>:

<!-- HTML4: беспорядочно -->
<div id="header"></div>
<div id="nav"></div>
<div id="main">
  <div id="article"></div>
  <div id="aside"></div>
</div>
<div id="footer"></div>

<!-- HTML5: семантично -->
<header></header>
<nav></nav>
<main>
  <article></article>
  <aside></aside>
</main>
<footer></footer>

Новые элементы в HTML5:

• <header> — заголовок страницы или секции
• <nav> — навигация
• <main> — основное содержимое
• <article> — независимая статья
• <section> — секция контента
• <aside> — боковое содержимое
• <footer> — подвал
• <figure> и <figcaption> — изображения с подписями
• <details> и <summary> — раскрывающиеся элементы

2. Новые типы input элементов

HTML5 расширила возможности форм с новыми типами input:

<!-- HTML4: только text, password, checkbox и т.д. -->
<input type="text">

<!-- HTML5: множество специализированных типов -->
<input type="email">           <!-- Валидация email -->
<input type="date">            <!-- Календарь -->
<input type="time">            <!-- Выбор времени -->
<input type="number">          <!-- Числовой ввод -->
<input type="range">           <!-- Слайдер -->
<input type="color">           <!-- Выбор цвета -->
<input type="tel">             <!-- Телефон -->
<input type="url">             <!-- URL -->
<input type="search">          <!-- Поиск -->
<input type="password">        <!-- Пароль -->
<input type="file">            <!-- Загрузка файла -->

3. Мультимедиа элементы

HTML5 добавила встроенную поддержку видео и аудио без необходимости использовать Flash:

<!-- HTML4: использовался Flash или плагины -->
<object data="video.swf"></object>

<!-- HTML5: встроенные элементы -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает видео
</video>

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

4. Canvas и SVG

HTML5 позволяет рисовать графику напрямую в браузере:

<!-- HTML4: необходимо использовать изображения или Flash -->
<img src="chart.png">

<!-- HTML5: Canvas для растровой графики -->
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#3498db";
  ctx.fillRect(10, 10, 50, 50);
</script>

<!-- HTML5: SVG для векторной графики -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#e74c3c"/>
</svg>

5. API и функциональность браузера

HTML5 добавила множество JavaScript API:

// Геолокация
navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude);
});

// Локальное хранилище
localStorage.setItem("key", "value");
const value = localStorage.getItem("key");

// IndexedDB для больших объемов данных
const request = indexedDB.open("myDatabase");

// Service Workers для оффлайн функциональности
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// WebSockets для реал-тайма коммуникации
const socket = new WebSocket("ws://example.com");

// Fetch API (замена XMLHttpRequest)
fetch("/api/data")
  .then(response => response.json())
  .then(data => console.log(data));

// File API для работы с файлами
const input = document.querySelector("input[type=file]");
input.addEventListener("change", (event) => {
  const files = event.target.files;
  const file = files[0];
  const reader = new FileReader();
  reader.readAsText(file);
});

6. Улучшения синтаксиса

<!-- HTML4: требуется полный DOCTYPE -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML5: короткий DOCTYPE -->
<!DOCTYPE html>

<!-- HTML4: необходимо закрывать все теги -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<br></br>

<!-- HTML5: некоторые теги могут быть самозакрывающимися -->
<meta charset="utf-8">
<br>

7. Валидация формы

<!-- HTML5 встроенная валидация -->
<form>
  <input type="email" required>
  <input type="number" min="1" max="100">
  <input type="text" pattern="[A-Z]{3}">
  <textarea minlength="10" maxlength="500"></textarea>
  <button type="submit">Отправить</button>
</form>

<script>
  // Проверка валидации
  const form = document.querySelector("form");
  if (form.checkValidity()) {
    console.log("Форма валидна");
  }
</script>

8. Атрибуты данных (data-*)

<!-- HTML5: хранение пользовательских данных в элементах -->
<div id="user" data-user-id="123" data-user-name="Alice">
  Пользователь
</div>

<script>
  const userDiv = document.getElementById("user");
  console.log(userDiv.dataset.userId);    // "123"
  console.log(userDiv.dataset.userName);  // "Alice"
  
  userDiv.dataset.role = "admin"; // Динамическое добавление
</script>

Таблица сравнения

Вывод

HTML5 представляет собой революционный скачок в развитии веб-стандартов:

• Семантичность — код стал более читаемым и SEO-дружественным
• Мультимедиа — встроенная поддержка видео и аудио
• API — доступ к функциям браузера через JavaScript
• Производительность — лучшая оптимизация и кэширование
• Мобильность — полная поддержка мобильных устройств
• Живой стандарт — постоянное развитие и адаптация

Сегодня HTML5 является стандартом де-факто, и большинство современных веб-приложений разработаны на его основе.