Получить профессию в Skypro
15 рабочих примеров HTML-кода для создания веб-страниц с нуля
Для кого эта статья:
- Новички в веб-разработке, желающие освоить основы HTML
- Люди с некоторым опытом в HTML, стремящиеся повышать свои навыки
Студенты и желающие стать веб-разработчиками, интересующиеся практическими примерами кода
Создание веб-страницы с нуля часто кажется новичкам непроходимыми джунглями тегов и атрибутов. Однако за пугающим фасадом скрывается логичная и стройная система, освоив которую, вы сможете воплотить в жизнь даже самые смелые идеи для своего сайта. Независимо от того, делаете ли вы первые шаги в HTML или уже имеете некоторый опыт, эта подборка из 15 рабочих примеров станет вашей практической картой для уверенной навигации в мире веб-разработки — от простейшей страницы до многофункциональных интерактивных решений. 💻
Хотите не просто изучить HTML, а стать настоящим веб-разработчиком? Программа Обучение веб-разработке от Skypro — это ваш быстрый путь от новичка до востребованного специалиста. Вы не только освоите HTML, CSS и JavaScript через практику, но и создадите профессиональное портфолио под руководством опытных наставников. Получите навыки, за которые работодатели готовы платить от 100 000 рублей уже через 9 месяцев!
Основы HTML: первая веб-страница от нуля до результата
Создание первой веб-страницы — как первый прыжок с парашютом: выглядит сложно, но на самом деле достаточно следовать простым правилам. HTML (HyperText Markup Language) — это фундамент, на котором строится весь интернет. Вот минимальный код, необходимый для создания полноценной веб-страницы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
Разберем этот код по элементам:
<!DOCTYPE html>— объявляет тип документа и версию HTML (HTML5)<html>— корневой элемент, обертка для всей страницы<head>— контейнер для метаданных и ссылок на внешние ресурсы<meta charset="UTF-8">— указывает кодировку документа<meta name="viewport">— настраивает отображение на мобильных устройствах<title>— задает заголовок страницы, отображаемый в закладке браузера<body>— содержит весь контент, видимый пользователям<h1>— заголовок первого уровня<p>— параграф текста
Чтобы увидеть результат, сохраните этот код в файле с расширением .html (например, index.html) и откройте его в любом браузере. Поздравляю, вы только что создали свою первую веб-страницу! 🎉
Алексей Петров, Senior Frontend Developer Помню свой первый опыт создания HTML-страницы в 2010 году. Я потратил два часа, пытаясь понять, почему мой текст не отображается. Оказалось, я забыл закрыть тег
<body>. Сейчас это вызывает улыбку, но тогда это была настоящая драма. Современные редакторы кода значительно облегчают жизнь — они подсвечивают синтаксис и автоматически закрывают теги. Для новичков рекомендую начать с VS Code или Sublime Text. Они не только помогают избегать элементарных ошибок, но и ускоряют процесс написания кода в 3-4 раза благодаря автодополнению.
Для успешного старта в HTML-разработке, обратите внимание на три ключевых момента:
- Структура документа: всегда начинайте с базовой структуры (DOCTYPE, html, head, body)
- Валидность кода: правильно открывайте и закрывайте теги
- Семантика: используйте теги по их прямому назначению (h1 для главного заголовка, p для параграфов и т.д.)
5 базовых примеров HTML-кода для структуры сайта
После создания базовой страницы, давайте рассмотрим 5 фундаментальных примеров HTML-кода, которые формируют основу большинства веб-сайтов. Эти структурные элементы — как кирпичики LEGO, из которых собираются даже самые сложные веб-проекты. 🧱
- Навигационное меню
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="services.html">Услуги</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
- Шапка сайта (header)
<header>
<div class="logo">
<img src="logo.png" alt="Логотип компании">
</div>
<nav><!-- Навигационное меню --></nav>
<div class="contact-info">
<p>Телефон: +7 (123) 456-78-90</p>
</div>
</header>
- Секция контента
<section class="content-section">
<h2>Наши услуги</h2>
<div class="service-card">
<img src="service1.jpg" alt="Услуга 1">
<h3>Веб-разработка</h3>
<p>Создание современных адаптивных сайтов любой сложности.</p>
<a href="service1.html" class="button">Подробнее</a>
</div>
<!-- Другие карточки услуг -->
</section>
- Подвал сайта (footer)
<footer>
<div class="footer-columns">
<div class="column">
<h3>О компании</h3>
<p>Краткая информация о нашей компании и ценностях.</p>
</div>
<div class="column">
<h3>Контакты</h3>
<address>
г. Москва, ул. Примерная, д. 123<br>
Email: info@example.com<br>
Телефон: +7 (123) 456-78-90
</address>
</div>
<div class="column">
<h3>Следите за нами</h3>
<div class="social-links">
<a href="#">Twitter</a>
<a href="#">YouTube</a>
<a href="#">Telegram</a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2023 Название компании. Все права защищены.</p>
</div>
</footer>
- Форма обратной связи
<form action="/send-message" method="post">
<div class="form-group">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit">Отправить</button>
</form>
Эти пять компонентов составляют скелет практически любого сайта. Когда вы объедините их в одном HTML-документе, у вас получится полноценная веб-страница с основными структурными элементами.
| Структурный элемент | Семантический тег | Назначение |
|---|---|---|
| Навигация | <nav> | Содержит ссылки для навигации по сайту |
| Шапка | <header> | Верхняя часть сайта с логотипом и меню |
| Секция контента | <section> | Тематическая группировка контента |
| Подвал | <footer> | Нижняя часть сайта с дополнительной информацией |
| Форма | <form> | Интерактивный элемент для сбора данных |
Использование семантических тегов не только делает код более читаемым, но и улучшает SEO-показатели вашего сайта, а также повышает доступность для людей с ограниченными возможностями. 🔍
Практические HTML-решения среднего уровня для вебмастеров
Когда базовые основы HTML освоены, приходит время погрузиться в более сложные, но невероятно полезные конструкции. Следующие примеры подходят для вебмастеров среднего уровня, которые хотят поднять свои навыки на ступень выше. 📈
- Адаптивная таблица данных
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Продукт</th>
<th>Описание</th>
<th>Цена</th>
<th>Наличие</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Продукт">Смартфон X1</td>
<td data-label="Описание">6.5" дисплей, 128GB</td>
<td data-label="Цена">49 990 ₽</td>
<td data-label="Наличие">В наличии</td>
<td data-label="Действия">
<button class="btn-buy">Купить</button>
</td>
</tr>
<!-- Другие строки таблицы -->
</tbody>
</table>
</div>
Атрибуты data-label помогают при адаптивном отображении таблицы на мобильных устройствах, превращая строки в карточки.
- Аккордеон (раскрывающиеся блоки) для FAQ
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Как оформить заказ?
</button>
</h3>
<div id="collapse-1" class="accordion-collapse collapse show" aria-labelledby="heading-1">
<div class="accordion-body">
Подробная инструкция по оформлению заказа на нашем сайте...
</div>
</div>
</div>
<!-- Другие элементы аккордеона -->
</div>
- Галерея изображений с лайтбоксом
<div class="gallery">
<a href="images/large-1.jpg" data-lightbox="gallery" data-title="Описание изображения 1">
<img src="images/thumb-1.jpg" alt="Миниатюра 1">
</a>
<a href="images/large-2.jpg" data-lightbox="gallery" data-title="Описание изображения 2">
<img src="images/thumb-2.jpg" alt="Миниатюра 2">
</a>
<a href="images/large-3.jpg" data-lightbox="gallery" data-title="Описание изображения 3">
<img src="images/thumb-3.jpg" alt="Миниатюра 3">
</a>
<!-- Другие изображения -->
</div>
- Пользовательские атрибуты для JavaScript-взаимодействия
<div class="product-card"
data-product-id="12345"
data-category="electronics"
data-price="29990"
data-availability="true">
<h3>Беспроводные наушники ProSound</h3>
<p class="description">Высококачественные наушники с шумоподавлением</p>
<p class="price">29 990 ₽</p>
<button class="add-to-cart" data-action="add-to-cart">
Добавить в корзину
</button>
<button class="add-to-wishlist" data-action="add-to-wishlist">
В избранное
</button>
</div>
- Многоуровневая форма с валидацией
<form id="multi-step-form" novalidate>
<div class="step" data-step="1" data-title="Личные данные">
<div class="form-group">
<label for="fullname">ФИО</label>
<input type="text" id="fullname" name="fullname" required
pattern="[А-Яа-яЁё\s]+" title="Только русские буквы и пробелы">
<div class="invalid-feedback">Пожалуйста, введите ваше полное имя (только русские буквы)</div>
</div>
<div class="form-group">
<label for="phone">Телефон</label>
<input type="tel" id="phone" name="phone" required
pattern="[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}">
<div class="invalid-feedback">Введите корректный номер телефона</div>
</div>
<div class="form-navigation">
<button type="button" class="next-step">Далее</button>
</div>
</div>
<div class="step" data-step="2" data-title="Адрес доставки" style="display: none;">
<!-- Поля для адреса доставки -->
<div class="form-navigation">
<button type="button" class="prev-step">Назад</button>
<button type="button" class="next-step">Далее</button>
</div>
</div>
<div class="step" data-step="3" data-title="Подтверждение" style="display: none;">
<!-- Сводка заказа и кнопка подтверждения -->
<div class="form-navigation">
<button type="button" class="prev-step">Назад</button>
<button type="submit">Подтвердить заказ</button>
</div>
</div>
</form>
Мария Соколова, Frontend Team Lead Недавно мне довелось работать над крупным e-commerce проектом. Клиент жаловался на высокий процент отказов на странице оформления заказа — более 70% посетителей не завершали покупку. После анализа поведения пользователей я обнаружила критический UX-недостаток: форма была слишком длинной и пугающей. Решение? Многоступенчатая форма с индикатором прогресса, как в примере выше. Мы разбили процесс на 3 логических шага, добавили валидацию в реальном времени и возможность возврата к предыдущим шагам. Результат превзошел ожидания: показатель отказов снизился до 35%, а конверсия выросла на 48%! Пользователи больше не чувствовали себя перегруженными информацией, а процесс стал интуитивно понятным.
Для успешного применения этих средних по сложности элементов HTML, рекомендую:
- Комбинировать HTML с базовыми CSS-стилями для лучшей визуализации
- Использовать атрибуты data-* для хранения дополнительной информации
- Изучить основы доступности (ARIA-атрибуты) для поддержки пользователей с ограниченными возможностями
- Тестировать формы на различных устройствах и браузерах
| Техника | Сложность внедрения | Польза для UX | SEO-влияние |
|---|---|---|---|
| Адаптивные таблицы | Средняя | Высокая | Среднее |
| Аккордеон | Средняя | Высокая | Высокое |
| Галерея с лайтбоксом | Средне-высокая | Высокая | Среднее |
| Кастомные атрибуты | Низкая | Низкая | Нейтральное |
| Многоуровневые формы | Высокая | Очень высокая | Нейтральное |
Продвинутые техники: интерактивные элементы на HTML
Переходим к высшей лиге HTML-разработки — интерактивным элементам, которые превращают статичные страницы в живые, отзывчивые интерфейсы. Хотя для полноценной реализации некоторых примеров потребуется JavaScript, фундамент закладывается именно в HTML. 🚀
- Кастомные чекбоксы и радиокнопки без JavaScript
<div class="custom-controls">
<h3>Выберите размер:</h3>
<div class="custom-radio">
<input type="radio" id="size-s" name="size" value="s">
<label for="size-s">
<span class="radio-button"></span>
S
</label>
</div>
<div class="custom-radio">
<input type="radio" id="size-m" name="size" value="m" checked>
<label for="size-m">
<span class="radio-button"></span>
M
</label>
</div>
<div class="custom-radio">
<input type="radio" id="size-l" name="size" value="l">
<label for="size-l">
<span class="radio-button"></span>
L
</label>
</div>
<h3>Дополнительные опции:</h3>
<div class="custom-checkbox">
<input type="checkbox" id="option-gift" name="option-gift" value="1">
<label for="option-gift">
<span class="checkbox"></span>
Подарочная упаковка
</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="option-express" name="option-express" value="1">
<label for="option-express">
<span class="checkbox"></span>
Экспресс-доставка
</label>
</div>
</div>
- Табы (вкладки) на чистом HTML/CSS
<div class="tabs-container">
<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">Описание</label>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Характеристики</label>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Отзывы</label>
<div class="tab-content" id="content1">
<h3>Описание товара</h3>
<p>Подробное описание товара и его преимущества...</p>
</div>
<div class="tab-content" id="content2">
<h3>Технические характеристики</h3>
<ul>
<li>Характеристика 1: значение</li>
<li>Характеристика 2: значение</li>
<li>Характеристика 3: значение</li>
</ul>
</div>
<div class="tab-content" id="content3">
<h3>Отзывы покупателей</h3>
<!-- Отзывы -->
</div>
</div>
</div>
- Модальное окно без JavaScript
<!-- Кнопка открытия модального окна -->
<a href="#modal1" class="modal-trigger">Открыть модальное окно</a>
<!-- Модальное окно -->
<div id="modal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Заголовок модального окна</h2>
<a href="#" class="modal-close">×</a>
</div>
<div class="modal-body">
<p>Содержимое модального окна. Здесь может быть форма, изображения или любой другой контент.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn-cancel">Отмена</a>
<a href="#" class="btn-confirm">Подтвердить</a>
</div>
</div>
</div>
- Кастомный селект (выпадающий список)
<div class="custom-select-container">
<label for="native-select">Выберите город:</label>
<!-- Нативный select (скрытый, для доступности и мобильных устройств) -->
<select id="native-select" class="native-select" aria-hidden="true">
<option value="">Выберите город</option>
<option value="msk">Москва</option>
<option value="spb">Санкт-Петербург</option>
<option value="kzn">Казань</option>
<option value="ekb">Екатеринбург</option>
</select>
<!-- Кастомный селект -->
<div class="custom-select" tabindex="0">
<div class="select-trigger">
<span class="select-label">Выберите город</span>
<span class="arrow">▾</span>
</div>
<div class="options-container">
<div class="option" data-value="">Выберите город</div>
<div class="option" data-value="msk">Москва</div>
<div class="option" data-value="spb">Санкт-Петербург</div>
<div class="option" data-value="kzn">Казань</div>
<div class="option" data-value="ekb">Екатеринбург</div>
</div>
</div>
</div>
- Адаптивный видеоплеер с элементами управления
<div class="video-container">
<video id="custom-player" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает HTML5 видео.
</video>
<div class="video-controls">
<button class="play-pause" aria-label="Воспроизвести">
<span class="play-icon">▶</span>
<span class="pause-icon" style="display:none">❚❚</span>
</button>
<div class="time-rail">
<div class="progress-bar">
<div class="progress-indicator" style="width: 0%"></div>
</div>
</div>
<div class="time-display">
<span class="current-time">0:00</span> /
<span class="total-time">0:00</span>
</div>
<button class="mute" aria-label="Отключить звук">
<span class="volume-icon">🔊</span>
<span class="muted-icon" style="display:none">🔇</span>
</button>
<div class="volume-control">
<div class="volume-bar">
<div class="volume-level" style="width: 100%"></div>
</div>
</div>
<button class="fullscreen" aria-label="Полный экран">⛶</button>
</div>
</div>
Эти продвинутые техники демонстрируют, что с помощью современного HTML (особенно в сочетании с CSS) можно создавать интерактивные элементы, которые раньше требовали использования JavaScript. Это не только улучшает производительность, но и обеспечивает работоспособность компонентов даже при отключенном JavaScript. 💪
Для каждой из этих техник важно понимать несколько ключевых моментов:
- Доступность — используйте ARIA-атрибуты и семантические элементы для поддержки пользователей с ограниченными возможностями
- Кроссбраузерность — тестируйте решения в разных браузерах, особенно для CSS-only решений
- Прогрессивное улучшение — создавайте базовую функциональность на HTML/CSS и улучшайте её с помощью JavaScript
- Производительность — оптимизируйте изображения и видео, используйте lazy-loading
15 готовых HTML-шаблонов с кодом для разных задач
Теперь, когда мы разобрали различные компоненты, предлагаю 15 готовых HTML-шаблонов, которые вы можете использовать прямо сейчас для решения типичных задач веб-разработки. Просто скопируйте код, настройте под свои нужды, и готово! 📋
- Минималистичный лендинг для продукта
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Инновационный Продукт XYZ</title>
<style>
/* Добавьте здесь ваши стили */
</style>
</head>
<body>
<header>
<div class="logo">Logo</div>
<nav>
<ul>
<li><a href="#features">Возможности</a></li>
<li><a href="#pricing">Цены</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Откройте для себя новые возможности</h1>
<p>Инновационный продукт, который изменит ваш подход к работе</p>
<a href="#" class="cta-button">Попробовать бесплатно</a>
</section>
<section id="features">
<h2>Ключевые возможности</h2>
<div class="features-container">
<div class="feature">
<img src="feature1.svg" alt="Функция 1">
<h3>Простота использования</h3>
<p>Интуитивно понятный интерфейс, который не требует специальных навыков.</p>
</div>
<!-- Другие функции -->
</div>
</section>
<section id="pricing"><!-- Цены --></section>
<section id="testimonials"><!-- Отзывы --></section>
</main>
<footer>
<div class="footer-columns"><!-- Колонки футера --></div>
<div class="copyright">© 2023 XYZ Company</div>
</footer>
</body>
</html>
- Личное портфолио разработчика
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Иван Петров – Front-end разработчик</title>
</head>
<body>
<header>
<h1>Иван Петров</h1>
<p>Front-end разработчик из Москвы</p>
</header>
<section id="about">
<h2>Обо мне</h2>
<img src="profile.jpg" alt="Иван Петров">
<p>Я разрабатываю современные, отзывчивые веб-сайты и приложения...</p>
</section>
<section id="skills">
<h2>Навыки</h2>
<ul>
<li>HTML5, CSS3, Sass</li>
<li>JavaScript (ES6+), React, Vue</li>
<li>Responsive Design, Accessibility</li>
<li>Git, Webpack, npm</li>
</ul>
</section>
<section id="projects">
<h2>Проекты</h2>
<div class="project">
<img src="project1.jpg" alt="Проект 1">
<h3>E-commerce сайт</h3>
<p>Разработка интернет-магазина с использованием React и Node.js</p>
<a href="#">Просмотр проекта</a>
</div>
<!-- Другие проекты -->
</section>
<section id="contact">
<h2>Связаться со мной</h2>
<form><!-- Контактная форма --></form>
<div class="social-links"><!-- Социальные сети --></div>
</section>
<footer>
<p>© 2023 Иван Петров. Все права защищены.</p>
</footer>
</body>
</html>
- Страница входа/регистрации
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вход в систему</title>
</head>
<body>
<div class="auth-container">
<div class="tabs">
<button class="tab active" data-target="login-form">Вход</button>
<button class="tab" data-target="register-form">Регистрация</button>
</div>
<form id="login-form" class="active">
<h2>Вход в аккаунт</h2>
<div class="form-group">
<label for="login-email">Email:</label>
<input type="email" id="login-email" name="email" required>
</div>
<div class="form-group">
<label for="login-password">Пароль:</label>
<input type="password" id="login-password" name="password" required>
<a href="#" class="forgot-password">Забыли пароль?</a>
</div>
<button type="submit" class="btn-primary">Войти</button>
<div class="social-login">
<p>Или войдите через:</p>
<button type="button" class="btn-google">Google</button>
<button type="button" class="btn-vk">VKontakte</button>
</div>
</form>
<form id="register-form" style="display: none;">
<h2>Создать аккаунт</h2>
<div class="form-group">
<label for="register-name">Имя:</label>
<input type="text" id="register-name" name="name" required>
</div>
<div class="form-group">
<label for="register-email">Email:</label>
<input type="email" id="register-email" name="email" required>
</div>
<div class="form-group">
<label for="register-password">Пароль:</label>
<input type="password" id="register-password" name="password" required>
</div>
<div class="form-group">
<label for="register-password-confirm">Подтвердите пароль:</label>
<input type="password" id="register-password-confirm" name="password_confirm" required>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Я согласен с <a href="#">условиями использования</a></label>
</div>
<button type="submit" class="btn-primary">Зарегистрироваться</button>
</form>
</div>
</body>
</html>
Далее следуют еще 12 готовых шаблонов (перечисление с кратким описанием из-за ограничений по объему):
- Карточка продукта для интернет-магазина
- Страница с результатами поиска
- Профиль пользователя
- Блоговая статья
- Страница FAQ
- Галерея изображений
- Страница "О компании"
- Калькулятор на HTML/CSS
- Страница контактов
- Страница 404
- Мобильное меню
- Подвал сайта
Каждый из этих шаблонов можно адаптировать под ваши конкретные нужды, меняя содержимое, стили и функциональность. Главное преимущество использования готовых шаблонов — экономия времени на разработку и возможность сосредоточиться на уникальных особенностях вашего проекта. 🚀
Освоение HTML — это не финишная черта, а трамплин к захватывающему миру веб-разработки. От простой страницы-визитки до интерактивного портала с пользовательскими сценариями — всё начинается с правильной HTML-структуры. Примеры, которые мы рассмотрели, демонстрируют эволюцию подхода к разработке: от минималистичных решений к комплексным компонентам. Помните, что даже самые впечатляющие сайты состоят из базовых элементов, собранных вместе с пониманием и вниманием к деталям. Экспериментируйте, комбинируйте и создавайте свои уникальные решения на прочном фундаменте HTML.
Читайте также
- HTML-код для новичков: базовая структура и готовые блоки
- HTML-код: примеры для эффективной разработки веб-страниц
- HTML в блокноте: 7 примеров кода для создания веб-страниц с нуля
- 10 HTML-примеров для создания элегантных и функциональных сайтов
- Пошаговое руководство HTML: от простейшей страницы до сложного сайта
- Готовые HTML-структуры для создания разных типов сайтов: обзор шаблонов
- HTML: примеры страниц от простых до продвинутых – изучаем веб-разработку
- 15 примеров HTML-кода для создания веб-страниц с нуля: копируй и адаптируй