10 HTML-примеров для создания элегантных и функциональных сайтов

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке
Студенты и учащиеся, интересующиеся программированием
Профессионалы, стремящиеся улучшить свои навыки в HTML и веб-дизайне
Помните чувство, когда вы впервые открыли HTML-файл и уставились на эти загадочные угловые скобки? Я прекрасно помню свой первый сайт — чудовищное сочетание мигающего текста и таблиц кислотных цветов. Но именно с таких неуклюжих попыток начинается путь каждого веб-разработчика 🚀. Сегодня я делюсь 10 проверенными HTML-примерами, которые переведут вас из категории "почему мой код не работает?!" в лигу тех, кто создаёт элегантные и функциональные сайты. От базовых структур до продвинутых техник — эти фрагменты кода станут вашим оружием в борьбе с пустым экраном редактора.

Хотите избежать моего пути проб и ошибок длиной в годы? Курс Обучение веб-разработке от Skypro структурирует ваш путь от новичка до профессионала. Вместо хаотичного изучения отдельных фрагментов кода вы получите системную подготовку от опытных разработчиков, актуальные практики HTML5 и CSS3, и навыки, которые действительно ценятся на рынке. Всего 10 месяцев — и вы создаёте не просто сайты, а полноценные веб-приложения, которыми захотите пополнить своё портфолио.

Базовые HTML-шаблоны для создания сайтов с нуля

Хорошая HTML-верстка начинается с правильного скелета страницы. Это как фундамент дома — если он кривой, всё здание будет шататься. Давайте разберем три базовых шаблона, которые помогут вам создать прочную основу для сайтов разной сложности 🏗️.

Вот минимальный валидный HTML5-шаблон, который должен быть в арсенале каждого разработчика:

HTML

Скопировать код

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название вашего сайта</title>
<meta name="description" content="Описание вашего сайта">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Заголовок сайта</h1>
<nav>
<!-- Здесь будет навигация -->
</nav>
</header>

<main>
<section>
<h2>Первый раздел</h2>
<p>Содержимое первого раздела.</p>
</section>
</main>

<footer>
<p>© 2023 Ваше имя или название компании</p>
</footer>
</body>
</html>

Для создания одностраничного лендинга нам понадобится более развернутая структура:

HTML

Скопировать код

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название лендинга</title>
<meta name="description" content="Описание лендинга">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="top">
<div class="logo">
<img src="logo.png" alt="Логотип">
</div>
<nav>
<ul>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>

<section id="hero">
<h1>Главный заголовок лендинга</h1>
<p>Краткое описание предложения</p>
<a href="#contact" class="cta-button">Связаться с нами</a>
</section>

<section id="about">
<h2>О нас</h2>
<p>Информация о компании или проекте</p>
</section>

<section id="services">
<h2>Наши услуги</h2>
<div class="service">
<h3>Услуга 1</h3>
<p>Описание услуги 1</p>
</div>
<div class="service">
<h3>Услуга 2</h3>
<p>Описание услуги 2</p>
</div>
</section>

<section id="portfolio">
<h2>Портфолио</h2>
<div class="portfolio-item">
<img src="project1.jpg" alt="Проект 1">
<h3>Название проекта 1</h3>
</div>
<div class="portfolio-item">
<img src="project2.jpg" alt="Проект 2">
<h3>Название проекта 2</h3>
</div>
</section>

<section id="contact">
<h2>Свяжитесь с нами</h2>
<form>
<input type="text" placeholder="Ваше имя" required>
<input type="email" placeholder="Ваш email" required>
<textarea placeholder="Ваше сообщение" required></textarea>
<button type="submit">Отправить</button>
</form>
</section>

<footer>
<p>© 2023 Название компании</p>
<a href="#top">Вернуться наверх</a>
</footer>
</body>
</html>

А вот шаблон для многостраничного сайта с подключением внешних ресурсов:

HTML

Скопировать код

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Многостраничный сайт</title>
<meta name="description" content="Описание сайта">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<!-- Open Graph метатеги -->
<meta property="og:title" content="Название сайта">
<meta property="og:description" content="Описание сайта для социальных сетей">
<meta property="og:image" content="img/og-image.jpg">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="index.html">
<img src="img/logo.svg" alt="Логотип компании">
</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html" class="active">Главная</a></li>
<li><a href="about.html">О компании</a></li>
<li><a href="services.html">Услуги</a></li>
<li><a href="blog.html">Блог</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
<div class="header-contacts">
<a href="tel:+71234567890">+7 (123) 456-78-90</a>
</div>
</div>
</header>

<main>
<div class="container">
<!-- Основной контент страницы -->
</div>
</main>

<footer>
<div class="container">
<div class="footer-columns">
<div class="footer-col">
<h3>О нас</h3>
<p>Краткая информация о компании</p>
</div>
<div class="footer-col">
<h3>Контакты</h3>
<address>
г. Москва, ул. Примерная, д. 123<br>
<a href="mailto:info@example.com">info@example.com</a><br>
<a href="tel:+71234567890">+7 (123) 456-78-90</a>
</address>
</div>
<div class="footer-col">
<h3>Подписка</h3>
<form class="subscribe-form">
<input type="email" placeholder="Ваш email" required>
<button type="submit">Подписаться</button>
</form>
</div>
</div>
<div class="copyright">
<p>© 2023 Название компании. Все права защищены.</p>
</div>
</div>
</footer>

<script src="js/main.js"></script>
</body>
</html>

Тип шаблона	Преимущества	Для каких проектов
Минимальный HTML5	Легкий, быстрый, без лишнего кода	Прототипы, тестовые страницы, обучение
Лендинг	Структурированный под конверсию, готовые блоки	Маркетинговые страницы, продажи продукта/услуги
Многостраничный	Масштабируемость, SEO-дружелюбность	Корпоративные сайты, интернет-магазины, порталы

Обратите внимание на важные моменты в этих шаблонах:

Всегда указывайте <!DOCTYPE html> для правильной интерпретации браузерами
Атрибут lang="ru" улучшает доступность и SEO
meta viewport необходим для корректного отображения на мобильных устройствах
Семантические теги (header, nav, main, section, footer) помогают поисковым системам и скринридерам
Структурируйте контент с помощью заголовков h1-h6, соблюдая иерархию

Анна Соколова, веб-разработчик с опытом 8+ лет

Когда я начинала карьеру, то тратила часы на отладку верстки из-за элементарных ошибок в базовом HTML. Помню случай с крупным интернет-магазином, где я забыла указать meta viewport. Сайт выглядел прекрасно на десктопе, но превратился в микроскопический кошмар на мобильных устройствах. Клиент обнаружил это уже после запуска, и мне пришлось экстренно вносить правки.

Теперь я всегда использую проверенные HTML-шаблоны как основу для любого проекта. Это экономит не только время, но и нервы — мои и клиента. Для начинающих разработчиков советую создать собственную библиотеку шаблонов с разной структурой, подходящих для разных типов проектов. Такая "шпаргалка" с годами будет только пополняться и совершенствоваться.

Навигационные меню и структура сайта в HTML: 3 варианта

Навигация — это компас вашего сайта. Без хорошо структурированного меню пользователи будут блуждать и в конечном итоге уйдут с вашего ресурса. Рассмотрим три типа навигационных меню, каждое со своими преимуществами и областью применения 🧭.

1. Горизонтальное верхнее меню — классика жанра, идеально для сайтов с небольшим количеством разделов:

HTML

Скопировать код

<nav class="main-navigation">
<ul>
<li><a href="index.html" class="active">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li class="dropdown">
<a href="services.html">Услуги</a>
<ul class="dropdown-menu">
<li><a href="service1.html">Услуга 1</a></li>
<li><a href="service2.html">Услуга 2</a></li>
<li><a href="service3.html">Услуга 3</a></li>
</ul>
</li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="blog.html">Блог</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>

2. Боковое вертикальное меню — отлично подходит для сайтов с обширной структурой и каталогов:

HTML

Скопировать код

<aside class="sidebar">
<nav class="sidebar-nav">
<div class="nav-section">
<h3>Основные разделы</h3>
<ul>
<li><a href="index.html">
<span class="icon"><svg>...</svg></span>
<span class="text">Главная</span>
</a></li>
<li><a href="catalog.html">
<span class="icon"><svg>...</svg></span>
<span class="text">Каталог товаров</span>
</a></li>
<li class="has-submenu">
<a href="javascript:void(0)">
<span class="icon"><svg>...</svg></span>
<span class="text">Категории</span>
<span class="arrow"><svg>...</svg></span>
</a>
<ul class="submenu">
<li><a href="category1.html">Категория 1</a></li>
<li><a href="category2.html">Категория 2</a></li>
<li><a href="category3.html">Категория 3</a></li>
</ul>
</li>
<li><a href="blog.html">
<span class="icon"><svg>...</svg></span>
<span class="text">Блог</span>
</a></li>
</ul>
</div>
<div class="nav-section">
<h3>Информация</h3>
<ul>
<li><a href="about.html">О компании</a></li>
<li><a href="delivery.html">Доставка и оплата</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</div>
</nav>
</aside>

3. Мобильное ("бургер") меню — незаменимо для адаптивных сайтов:

HTML

Скопировать код

<header class="mobile-header">
<div class="logo">
<a href="index.html">
<img src="logo.svg" alt="Логотип">
</a>
</div>

<button class="burger-menu" id="burgerButton" aria-label="Меню">
<span></span>
<span></span>
<span></span>
</button>
</header>

<nav class="mobile-nav" id="mobileMenu">
<div class="mobile-nav-header">
<button class="close-menu" id="closeMenuButton" aria-label="Закрыть меню">×</button>
</div>

<ul class="mobile-menu-list">
<li><a href="index.html">Главная</a></li>
<li class="has-submenu">
<a href="#">Каталог</a>
<button class="submenu-toggle">+</button>
<ul class="mobile-submenu">
<li><a href="catalog/new.html">Новинки</a></li>
<li><a href="catalog/popular.html">Популярное</a></li>
<li><a href="catalog/sale.html">Распродажа</a></li>
</ul>
</li>
<li><a href="about.html">О нас</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>

<div class="mobile-contacts">
<a href="tel:+71234567890" class="phone">+7 (123) 456-78-90</a>
<a href="mailto:info@example.com" class="email">info@example.com</a>
<div class="social-links">
<a href="#" class="social-link">Telegram</a>
<a href="#" class="social-link">WhatsApp</a>
<a href="#" class="social-link">VK</a>
</div>
</div>
</nav>

Тип навигации	Сильные стороны	Ограничения	Идеально для
Горизонтальное меню	Привычный паттерн, экономит вертикальное пространство	Ограниченное количество пунктов (5-7 максимум)	Корпоративные сайты, блоги, портфолио
Вертикальное меню	Вмещает больше категорий, улучшает юзабилити глубоких структур	Занимает полезную площадь экрана	Интернет-магазины, порталы с множеством разделов
Бургер-меню	Экономит место, работает на любых устройствах	Требует дополнительное нажатие для доступа	Мобильные версии сайтов, минималистичный дизайн

При создании навигации помните о ключевых принципах:

Не перегружайте меню — психологи доказали, что человек комфортно воспринимает до 7±2 пунктов меню
Используйте понятные и краткие названия разделов
Предусмотрите визуальную индикацию текущего раздела (active)
Обеспечьте доступность с клавиатуры для людей с ограниченными возможностями (tabindex, ARIA-атрибуты)
Сделайте hover-эффекты для пунктов меню, чтобы пользователь понимал, что это кликабельный элемент

Адаптивные формы и контактные блоки на чистом HTML

Формы — это не просто элементы сбора данных, а инструменты взаимодействия с пользователями. От удобства заполнения формы напрямую зависит количество конверсий и успех вашего проекта. Рассмотрим несколько примеров HTML-кода для создания функциональных и адаптивных форм 📋.

Пример 1: Базовая контактная форма

HTML

Скопировать код

<form class="contact-form" action="/send-message" method="POST">
<div class="form-group">
<label for="name">Ваше имя</label>
<input type="text" id="name" name="name" placeholder="Иван Иванов" required>
</div>

<div class="form-group">
<label for="email">Email для связи</label>
<input type="email" id="email" name="email" placeholder="example@domain.com" required>
</div>

<div class="form-group">
<label for="phone">Телефон</label>
<input type="tel" id="phone" name="phone" placeholder="+7 (___) ___-__-__" pattern="[0-9+\s()-]{10,20}">
</div>

<div class="form-group">
<label for="subject">Тема сообщения</label>
<select id="subject" name="subject" required>
<option value="" disabled selected>Выберите тему</option>
<option value="cooperation">Деловое сотрудничество</option>
<option value="support">Техническая поддержка</option>
<option value="feedback">Отзыв о сервисе</option>
<option value="other">Другое</option>
</select>
</div>

<div class="form-group">
<label for="message">Ваше сообщение</label>
<textarea id="message" name="message" rows="5" placeholder="Введите ваше сообщение здесь..." required></textarea>
</div>

<div class="form-group checkbox-group">
<input type="checkbox" id="agreement" name="agreement" required>
<label for="agreement">Я согласен с <a href="/privacy-policy">политикой конфиденциальности</a></label>
</div>

<button type="submit" class="submit-button">Отправить сообщение</button>
</form>

Пример 2: Форма регистрации с валидацией

HTML

Скопировать код

<form class="signup-form" action="/register" method="POST" autocomplete="off">
<h2>Создать аккаунт</h2>

<div class="form-row">
<div class="form-group">
<label for="firstname">Имя</label>
<input type="text" id="firstname" name="firstname" required>
<div class="error-message" id="firstname-error"></div>
</div>

<div class="form-group">
<label for="lastname">Фамилия</label>
<input type="text" id="lastname" name="lastname" required>
<div class="error-message" id="lastname-error"></div>
</div>
</div>

<div class="form-group">
<label for="email">Email адрес</label>
<input type="email" id="email" name="email" required>
<div class="error-message" id="email-error"></div>
</div>

<div class="form-group">
<label for="password">Пароль</label>
<div class="password-container">
<input type="password" id="password" name="password" required minlength="8" aria-describedby="password-hints">
<button type="button" class="toggle-password" aria-label="Показать пароль">
<svg>...</svg>
</button>
</div>
<div class="password-hints" id="password-hints">
<p>Пароль должен содержать:</p>
<ul>
<li id="length">Минимум 8 символов</li>
<li id="uppercase">Хотя бы одну заглавную букву</li>
<li id="number">Хотя бы одну цифру</li>
<li id="special">Хотя бы один специальный символ</li>
</ul>
</div>
<div class="error-message" id="password-error"></div>
</div>

<div class="form-group">
<label for="confirm-password">Подтвердите пароль</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<div class="error-message" id="confirm-password-error"></div>
</div>

<div class="form-group checkbox-group">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Я принимаю <a href="/terms">условия использования</a> и <a href="/privacy">политику конфиденциальности</a></label>
<div class="error-message" id="terms-error"></div>
</div>

<button type="submit" class="register-button">Зарегистрироваться</button>

<p class="login-link">Уже есть аккаунт? <a href="/login">Войти</a></p>
</form>

Пример 3: Адаптивный блок с контактной информацией

HTML

Скопировать код

<section class="contact-block">
<div class="container">
<div class="contact-wrapper">
<div class="contact-info">
<h2>Свяжитесь с нами</h2>
<p>Есть вопросы или предложения? Напишите нам, и мы свяжемся с вами в ближайшее время!</p>

<div class="info-item">
<div class="icon"><svg>...</svg></div>
<div class="text">
<h3>Адрес</h3>
<address>
123456, г. Москва,<br>
ул. Примерная, д. 10, офис 305
</address>
</div>
</div>

<div class="info-item">
<div class="icon"><svg>...</svg></div>
<div class="text">
<h3>Телефон</h3>
<p><a href="tel:+71234567890">+7 (123) 456-78-90</a></p>
<p><a href="tel:+78001234567">8 (800) 123-45-67</a></p>
</div>
</div>

<div class="info-item">
<div class="icon"><svg>...</svg></div>
<div class="text">
<h3>Email</h3>
<p><a href="mailto:info@example.com">info@example.com</a></p>
<p><a href="mailto:support@example.com">support@example.com</a></p>
</div>
</div>

<div class="social-links">
<h3>Мы в социальных сетях</h3>
<div class="social-icons">
<a href="#" aria-label="Telegram"><svg>...</svg></a>
<a href="#" aria-label="VK"><svg>...</svg></a>
<a href="#" aria-label="YouTube"><svg>...</svg></a>
</div>
</div>
</div>

<div class="contact-form-container">
<form class="contact-form" action="/send" method="POST">
<!-- Здесь размещается содержимое вашей контактной формы -->
<!-- Можно использовать пример 1 из этой статьи -->
</form>
</div>
</div>
</div>
</section>

Михаил Давыдов, фронтенд-разработчик

Однажды мне поручили переделать форму заказа в интернет-магазине, конверсия которой была катастрофически низкой — меньше 10%. Проведя анализ, я обнаружил главную проблему: форма требовала заполнения 15 полей, половина из которых была абсолютно не нужна на этапе оформления заказа.

Я переработал форму, оставив только 5 критически важных полей, добавил валидацию в реальном времени, чтобы пользователи сразу видели ошибки, и сделал подсказки для сложных полей. Для удобства на мобильных устройствах каждое поле получило соответствующий тип ввода (например, type="tel" для телефона с правильной клавиатурой).

Результат превзошел ожидания: конверсия формы выросла до 32%, а количество брошенных корзин снизилось на 45%. Этот опыт научил меня, что в формах каждое лишнее поле — это потенциальный барьер для пользователя. Минимализм, четкие инструкции и мгновенная валидация — вот три кита эффективной формы.

При создании форм обратите внимание на следующие важные моменты:

Всегда используйте тег <label> для каждого поля ввода — это улучшает юзабилити и доступность
Выбирайте правильный тип ввода (type="email", type="tel", type="number") для удобства на мобильных устройствах
Добавляйте атрибут placeholder для подсказок, но не заменяйте им label
Используйте атрибут required для обязательных полей
Группируйте связанные поля с помощью <fieldset> и <legend> для лучшей организации
Добавляйте атрибуты autocomplete для автозаполнения полей браузером
Включайте атрибуты pattern для валидации на стороне клиента, но не полагайтесь только на них

HTML-верстка для галерей и медиа-контента: готовый код

Визуальный контент — ключевой элемент современных сайтов. Правильно оформленные галереи и медиа-блоки не только привлекают внимание, но и улучшают пользовательский опыт. Разберем несколько решений для эффективного представления изображений, видео и других медиа-материалов на вашем сайте 🖼️.

1. Адаптивная галерея изображений

HTML

Скопировать код

<section class="image-gallery">
<div class="gallery-container">
<h2>Наши работы</h2>

<div class="gallery-grid">
<figure class="gallery-item">
<a href="images/large/project1.jpg" data-caption="Проект Альфа: Главная страница">
<img src="images/thumbnails/project1.jpg" alt="Проект Альфа" loading="lazy">
</a>
<figcaption>Проект Альфа</figcaption>
</figure>

<figure class="gallery-item">
<a href="images/large/project2.jpg" data-caption="Редизайн корпоративного сайта для компании Бета">
<img src="images/thumbnails/project2.jpg" alt="Проект Бета" loading="lazy">
</a>
<figcaption>Проект Бета</figcaption>
</figure>

<figure class="gallery-item">
<a href="images/large/project3.jpg" data-caption="Мобильное приложение для стартапа Гамма">
<img src="images/thumbnails/project3.jpg" alt="Проект Гамма" loading="lazy">
</a>
<figcaption>Проект Гамма</figcaption>
</figure>

<figure class="gallery-item">
<a href="images/large/project4.jpg" data-caption="Лендинг для образовательного курса Дельта">
<img src="images/thumbnails/project4.jpg" alt="Проект Дельта" loading="lazy">
</a>
<figcaption>Проект Дельта</figcaption>
</figure>

<figure class="gallery-item">
<a href="images/large/project5.jpg" data-caption="Интернет-магазин для компании Эпсилон">
<img src="images/thumbnails/project5.jpg" alt="Проект Эпсилон" loading="lazy">
</a>
<figcaption>Проект Эпсилон</figcaption>
</figure>

<figure class="gallery-item">
<a href="images/large/project6.jpg" data-caption="Дизайн системы для продукта Зета">
<img src="images/thumbnails/project6.jpg" alt="Проект Зета" loading="lazy">
</a>
<figcaption>Проект Зета</figcaption>
</figure>
</div>
</div>
</section>

2. Видеогалерея с превью

HTML

Скопировать код

<section class="video-gallery">
<div class="container">
<h2>Видеоматериалы</h2>
<p class="section-description">Обучающие видео и демонстрации наших продуктов</p>

<div class="video-grid">
<div class="video-item">
<div class="video-thumbnail" data-video-id="VIDEO_ID_1">
<img src="images/video-thumbs/video1.jpg" alt="Введение в наш продукт">
<div class="play-button">
<svg>...</svg>
</div>
<span class="video-duration">05:22</span>
</div>
<div class="video-info">
<h3>Введение в наш продукт</h3>
<p>Краткий обзор основных возможностей и преимуществ нашего продукта.</p>
</div>
</div>

<div class="video-item">
<div class="video-thumbnail" data-video-id="VIDEO_ID_2">
<img src="images/video-thumbs/video2.jpg" alt="Как настроить аккаунт">
<div class="play-button">
<svg>...</svg>
</div>
<span class="video-duration">08:17</span>
</div>
<div class="video-info">
<h3>Как настроить аккаунт</h3>
<p>Пошаговая инструкция по настройке вашего аккаунта для максимальной эффективности.</p>
</div>
</div>

<div class="video-item">
<div class="video-thumbnail" data-video-id="VIDEO_ID_3">
<img src="images/video-thumbs/video3.jpg" alt="Продвинутые функции">
<div class="play-button">
<svg>...</svg>
</div>
<span class="video-duration">12:45</span>
</div>
<div class="video-info">
<h3>Продвинутые функции</h3>
<p>Глубокое погружение в расширенные возможности нашего продукта для опытных пользователей.</p>
</div>
</div>

<div class="video-item">
<div class="video-thumbnail" data-video-id="VIDEO_ID_4">
<img src="images/video-thumbs/video4.jpg" alt="Советы и трюки">
<div class="play-button">
<svg>...</svg>
</div>
<span class="video-duration">07:33</span>
</div>
<div class="video-info">
<h3>Советы и трюки</h3>
<p>Полезные советы, которые помогут вам работать более эффективно и экономить время.</p>
</div>
</div>
</div>

<div id="videoModal" class="modal">
<div class="modal-content">
<span class="close-modal">×</span>
<div class="video-container">
<iframe id="videoFrame" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>

3. Адаптивный слайдер для портфолио

HTML

Скопировать код

<section class="portfolio-slider">
<div class="container">
<h2>Наше портфолио</h2>
<p class="slider-description">Лучшие проекты, реализованные нашей командой</p>

<div class="slider-container">
<div class="slider-track">
<div class="slide">
<div class="slide-content">
<div class="slide-image">
<img src="images/portfolio/project1.jpg" alt="Корпоративный сайт XYZ Corp">
</div>
<div class="slide-info">
<h3>Корпоративный сайт XYZ Corp</h3>
<p class="slide-category">Веб-дизайн, Разработка</p>
<p class="slide-description">Полный редизайн и разработка корпоративного сайта для международной компании с внедрением системы управления контентом.</p>
<a href="#" class="slide-link">Смотреть кейс</a>
</div>
</div>
</div>

<div class="slide">
<div class="slide-content">
<div class="slide-image">
<img src="images/portfolio/project2.jpg" alt="Мобильное приложение FitTrack">
</div>
<div class="slide-info">
<h3>Мобильное приложение FitTrack</h3>
<p class="slide-category">UI/UX Дизайн, Мобильная разработка</p>
<p class="slide-description">Разработка интерфейса и прототипа для фитнес-приложения с функциями отслеживания прогресса и интеграцией с носимыми устройствами.</p>
<a href="#" class="slide-link">Смотреть кейс</a>
</div>
</div>
</div>

<div class="slide">
<div class="slide-content">
<div class="slide-image">
<img src="images/portfolio/project3.jpg" alt="Интернет-магазин GreenMarket">
</div>
<div class="slide-info">
<h3>Интернет-магазин GreenMarket</h3>
<p class="slide-category">Электронная коммерция, Веб-разработка</p>
<p class="slide-description">Создание полнофункционального интернет-магазина органических продуктов с интеграцией платежных систем и автоматизацией логистики.</p>
<a href="#" class="slide-link">Смотреть кейс</a>
</div>
</div>
</div>
</div>

<div class="slider-controls">
<button class="slider-btn prev" aria-label="Предыдущий слайд"><svg>...</svg></button>
<div class="slider-pagination">
<span class="pagination-dot active" data-slide="0"></span>
<span class="pagination-dot" data-slide="1"></span>
<span class="pagination-dot" data-slide="2"></span>
</div>
<button class="slider-btn next" aria-label="Следующий слайд"><svg>...</svg></button>
</div>
</div>
</div>
</section>

При работе с медиа-контентом важно учитывать следующие моменты:

Всегда указывайте атрибут alt для изображений, это важно для SEO и доступности
Используйте атрибут loading="lazy" для отложенной загрузки изображений, что улучшает скорость загрузки страницы
Предоставляйте разные размеры изображений для разных устройств с помощью элемента <picture>
Оптимизируйте размер и формат изображений (WebP, AVIF) для быстрой загрузки
Группируйте связанное содержимое с помощью тегов <figure> и <figcaption>
Для видео используйте атрибуты preload, controls, poster для лучшего пользовательского опыта
Добавляйте субтитры для видео с помощью элемента <track> для повышения доступности

Продвинутые приёмы HTML-верстки для профессионалов

Опытные разработчики знают, что HTML может быть гораздо мощнее, чем кажется на первый взгляд. В этом разделе мы рассмотрим продвинутые техники, которые помогут вам писать более семантичный, доступный и эффективный код 👨‍💻.

1. Семантическая микроразметка Schema.org

Микроразметка помогает поисковым системам лучше понимать содержимое вашей страницы, что может положительно влиять на SEO:

HTML

Скопировать код

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">Кафе "Утренний аромат"</h1>

<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">ул. Примерная, 123</span>,
<span itemprop="addressLocality">Москва</span>, 
<span itemprop="postalCode">123456</span>
</div>

<div>
Телефон: <span itemprop="telephone">+7 (123) 456-7890</span>
</div>

<div>
Часы работы: <br>
<time itemprop="openingHours" datetime="Mo-Fr 08:00-20:00">Пн-Пт: 8:00 – 20:00</time><br>
<time itemprop="openingHours" datetime="Sa-Su 10:00-18:00">Сб-Вс: 10:00 – 18:00</time>
</div>

<div>
<span itemprop="priceRange">$$</span>
</div>

<div>
<img itemprop="image" src="images/cafe.jpg" alt="Фото кафе 'Утренний аромат'">
</div>

<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
Рейтинг: <span itemprop="ratingValue">4.8</span>/5 
на основе <span itemprop="reviewCount">247</span> отзывов
</div>
</div>

2. Доступность (a11y) и ARIA-атрибуты

Создание доступных веб-сайтов — это не просто хорошая практика, а необходимость для инклюзивного веба:

HTML

Скопировать код

<nav aria-label="Главное меню">
<button class="menu-toggle" aria-expanded="false" aria-controls="main-menu">
<span class="sr-only">Открыть меню</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<ul id="main-menu" class="menu" aria-hidden="true">
<li><a href="#" aria-current="page">Главная</a></li>
<li class="has-submenu">
<a href="#" aria-haspopup="true" aria-expanded="false">Продукты</a>
<button class="submenu-toggle" aria-label="Открыть подменю Продукты">
<svg aria-hidden="true">...</svg>
</button>
<ul class="submenu" aria-hidden="true">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
</ul>
</li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

<div class="card" role="region" aria-labelledby="card-title">
<h2 id="card-title">Наш новый продукт</h2>
<p>Описание продукта...</p>

<div class="product-rating" role="img" aria-label="Рейтинг 4.5 из 5">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star half-filled">★</span>
</div>

<form>
<label for="quantity">Количество:</label>
<div class="quantity-control">
<button type="button" class="quantity-btn minus" aria-label="Уменьшить количество">-</button>
<input type="number" id="quantity" name="quantity" value="1" min="1" max="10" aria-live="polite">
<button type="button" class="quantity-btn plus" aria-label="Увеличить количество">+</button>
</div>
<button type="submit" aria-describedby="cart-notification">Добавить в корзину</button>
<div id="cart-notification" role="status" aria-live="polite" class="visually-hidden"></div>
</form>
</div>

3. Адаптивные таблицы с использованием data-атрибутов

Таблицы часто создают проблемы на мобильных устройствах, но с помощью data-атрибутов их можно сделать отзывчивыми:

HTML

Скопировать код

<div class="responsive-table-container">
<table class="responsive-table">
<caption>Сравнение тарифных планов</caption>
<thead>
<tr>
<th scope="col">Характеристики</th>
<th scope="col">Базовый</th>
<th scope="col">Стандартный</th>
<th scope="col">Премиум</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Характеристики">Цена</th>
<td data-label="Базовый">1000 ₽/мес</td>
<td data-label="Стандартный">2500 ₽/мес</td>
<td data-label="Премиум">5000 ₽/мес</td>
</tr>
<tr>
<th scope="row" data-label="Характеристики">Объем хранилища</th>
<td data-label="Базовый">10 ГБ</td>
<td data-label="Стандартный">50 ГБ</td>
<td data-label="Премиум">100 ГБ</td>
</tr>
<tr>
<th scope="row" data-label="Характеристики">Количество пользователей</th>
<td data-label="Базовый">1</td>
<td data-label="Стандартный">5</td>
<td data-label="Премиум">Неограниченно</td>
</tr>
<tr>
<th scope="row" data-label="Характеристики">Техническая поддержка</th>
<td data-label="Базовый">По email</td>
<td data-label="Стандартный">Email + чат</td>
<td data-label="Премиум">24/7 приоритетная</td>
</tr>
</tbody>
</table>
</div>

4. HTML-шаблоны и клиентский рендеринг

Используйте элемент <template> для создания шаблонов, которые можно клонировать с помощью JavaScript:

HTML

Скопировать код

<div id="productList" class="products-container">
<!-- Здесь будут отображаться продукты -->
</div>

<template id="productTemplate">
<div class="product-card">
<div class="product-image">
<img src="" alt="" loading="lazy">
</div>
<div class="product-info">
<h3 class="product-title"></h3>
<div class="product-price"></div>
<div class="product-rating">
<span class="stars"></span>
<span class="reviews-count"></span>
</div>
<p class="product-description"></p>
<button class="add-to-cart-btn">Добавить в корзину</button>
</div>
</div>
</template>

5. Продвинутые формы с нативной валидацией и кастомизацией

Использование встроенной валидации браузера с кастомным оформлением:

HTML

Скопировать код

<form class="advanced-form" novalidate>
<div class="form-group">
<label for="username">Имя пользователя</label>
<input type="text" id="username" name="username" 
pattern="^[a-zA-Z0-9_-]{3,16}$" required
title="От 3 до 16 символов, допускаются буквы, цифры, дефис и подчеркивание">
<div class="validation-icon">
<svg class="valid-icon" aria-hidden="true">...</svg>
<svg class="invalid-icon" aria-hidden="true">...</svg>
</div>
<div class="error-message" aria-live="polite"></div>
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required
autocomplete="email">
<div class="validation-icon">
<svg class="valid-icon" aria-hidden="true">...</svg>
<svg class="invalid-icon" aria-hidden="true">...</svg>
</div>
<d

**Читайте также**
- [HTML-код для новичков: базовая структура и готовые блоки](/html/primery-html-koda-dlya-sozdaniya-sajta/)
- [HTML-код: примеры для эффективной разработки веб-страниц](/html/primery-html-koda-dlya-sozdaniya-veb-stranic-sovety-i-primery/)
- [HTML в блокноте: 7 примеров кода для создания веб-страниц с нуля](/html/primery-html-koda-dlya-sozdaniya-veb-stranic-v-bloknote/)
- [15 рабочих примеров HTML-кода для создания веб-страниц с нуля](/html/primery-html-koda-dlya-sozdaniya-veb-stranic-ot-prostogo-k-slozhnomu/)
- [Пошаговое руководство HTML: от простейшей страницы до сложного сайта](/html/primery-html-koda-dlya-sozdaniya-sajtov-ot-prostogo-k-slozhnomu/)
- [Готовые HTML-структуры для создания разных типов сайтов: обзор шаблонов](/html/primery-html-koda-dlya-razlichnyh-tipov-sajtov/)
- [HTML: примеры страниц от простых до продвинутых – изучаем веб-разработку](/html/primery-gotovyh-html-stranic-ot-prostogo-k-slozhnomu/)
- [15 примеров HTML-кода для создания веб-страниц с нуля: копируй и адаптируй](/html/primery-html-koda-dlya-sozdaniya-veb-stranic/)

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Что такое HTML?

1 / 5

Свежие материалы

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024

Основные принципы работы HTTP

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

10 HTML-примеров для создания элегантных и функциональных сайтов

Базовые HTML-шаблоны для создания сайтов с нуля

Навигационные меню и структура сайта в HTML: 3 варианта

Адаптивные формы и контактные блоки на чистом HTML

HTML-верстка для галерей и медиа-контента: готовый код

Продвинутые приёмы HTML-верстки для профессионалов

Загрузка...