Нові можливості та API html5
Що нового в HTML5?
HTML5 представив значні покращення в HTML, включаючи нові семантичні елементи, підтримку мультимедіа, вдосконалення форм та потужні JavaScript API — усуваючи необхідність у багатьох сторонніх плагінах.
Нові семантичні елементи
html
<header>Заголовок сайту</header>
<nav>Навігація</nav>
<main>Основний контент</main>
<article>Автономний контент</article>
<section>Тематика групування</section>
<aside>Контент бічної панелі</aside>
<footer>Футер сайту</footer>
<figure>
<img src="photo.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>
<details>
<summary>Натисніть, щоб розгорнути</summary>
<p>Схований контент, що відкривається при натисканні</p>
</details>Нативне мультимедіа
html
<!-- Відео -->
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Ваш браузер не підтримує відео.
</video>
<!-- Аудіо -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>Не потрібно Flash або інших плагінів.
Нові типи вводу форм
html
<input type="email" placeholder="user@example.com">
<input type="url" placeholder="https://...">
<input type="tel" placeholder="+380...">
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="search">Нові атрибути форм
html
<input type="text" required placeholder="Ім'я" autofocus>
<input type="email" pattern="[a-z]+@[a-z]+\.[a-z]+" autocomplete="email">
<form novalidate>...</form>Нові JavaScript API
| API | Опис |
|---|---|
| Canvas API | 2D малювання через елемент <canvas> |
| Geolocation | Отримання географічного місцезнаходження користувача |
| Web Storage | localStorage та sessionStorage |
| Web Workers | Виконання скриптів у фонових потоках |
| WebSocket | Дуплексна комунікація з серверами |
| Drag and Drop | Нативна функціональність перетягування |
| History API | Маніпуляція історією браузера (pushState, replaceState) |
| Fetch API | Сучасна заміна для XMLHttpRequest |
| Intersection Observer | Виявлення видимості елемента у вікні перегляду |
| Service Workers | Підтримка офлайн та фоновий синхронізація |
Canvas проти SVG
| Особливість | Canvas | SVG |
|---|---|---|
| Тип | Растровий (на основі пікселів) | Векторний (на основі форм) |
| Масштабованість | Втрачає якість при збільшенні | Масштабується без втрати якості |
| Доступ до DOM | Ні (тільки пікселі) | Так (кожна форма є вузлом DOM) |
| Найкраще для | Ігор, редагування зображень, візуалізація даних | Іконки, логотипи, ілюстрації, графіки |
| Обробка подій | Ручна (на основі координат) | Вбудована (по елементу) |
Важливо:
HTML5 — це не лише нові теги — це платформа з потужними API. Семантичні елементи покращують доступність і SEO, тоді як JavaScript API дозволяють створювати багаті веб-додатки без плагінів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.