4.1 Шаблон HTML5

Глава 4.0. Шаблон HTML и динамические страницы
- 4.1 Шаблон HTML5
- 4.2 Шаблон PHP и динамические страницы

Введение

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

Мультимедиа без плагинов: Теги <audio> и <video> позволяют легко встраивать аудио- и видеоконтент, заменяя устаревшие технологии вроде Flash.
Семантическая разметка: Новые теги (<article>, <section>, <nav>, <header>, <footer>, <aside>) улучшают структуру документа, облегчая понимание кода разработчиками и поисковыми системами.
Графика и 3D: Элемент <canvas> позволяет рисовать графику, создавать анимации и 2D/3D игры с помощью JavaScript, а также поддерживается встроенный формат векторной графики SVG.
Геолокация и API: API геолокации определяет местоположение пользователя, а другие API поддерживают перетаскивание элементов (Drag-and-Drop) и работу с камерой.
Локальное хранилище данных: localStorage и sessionStorage позволяют хранить данные на устройстве пользователя, что быстрее и надежнее, чем файлы cookie.
Улучшенные формы: Новые типы полей ввода (<input type="date">, number, email, range и др.) упрощают валидацию данных.
Офлайн-приложения: Механизм кэширования позволяет веб-приложениям работать без подключения к интернету.
Web Workers и Sockets: Web Workers позволяют выполнять JavaScript в фоновом режиме, не тормозя интерфейс, а Web Sockets обеспечивают постоянное соединение с сервером для передачи данных в реальном времени.

Эти возможности делают HTML5 мощной платформой для создания кроссплатформенных приложений, адаптированных как для десктопов, так и для мобильных устройств.

Пример кода разметки HTML5

Простой, понятный пример HTML5-документа:

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML5 Page</title>
	<!-- Optional: Link to a CSS file -->
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <header>
        <h1>Welcome to my website</h1>
    </header>
 
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
 
    <main>
        <article>
            <h2>An Article Title</h2>
            <p>This paragraph is nested inside an article. It contains <strong>strong text</strong> and <em>emphasized text</em>.</p>
            <section>
                <h3>A sub-section</h3>
                <p>More content can go here.</p>
            </section>
        </article>
    </main>
 
    <footer>
        <p>&copy; 2026 Sample HTML5 Page. All rights reserved.</p>
    </footer>
    <!-- Optional: Link to a JavaScript file -->
    <script src="scripts.js"></script>
</body>
</html>

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

<!DOCTYPE html>: Простое и обязательное объявление типа документа для HTML5.
<meta charset="utf-8">: Указывает кодировку символов, обеспечивая корректное отображение текста в браузере.
<meta name="viewport" ...>Обеспечивает корректное отображение и масштабирование касанием на мобильных устройствах.
Семантические элементы : Использует осмысленные теги, такие как <header>, <nav>, <main>, <article>, <section>, и , <footer>которые улучшают структуру документа и доступность.

Дополнения и Файлы

см. также:

Глава 4.0. Шаблон HTML и динамические страницы 4.2 Шаблон PHP и динамические страницы