HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц. Он состоит из различных элементов, которые указывают браузерам, как отображать контент. Один из наиболее важных навыков для начинающего фронтенд-разработчика — это умение создавать базовый HTML шаблон. Давайте рассмотрим, как это сделать.

Основная структура 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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
    <h1>Добро пожаловать на мой сайт!</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a></li>
        <li><a href="#contact">Контакты</a></li>
    </ul>
</nav>
<main>
    <section id="home">
        <h2>Главная секция</h2>
        <p>Это пример базового HTML шаблона.</p>
    </section>
    <section id="about">
        <h2>О нас</h2>
        <p>Здесь будет информация о нас.</p>
    </section>
    <section id="contact">
        <h2>Контакты</h2>
        <p>Здесь будет информация для связи.</p>
    </section>
</main>
<footer>
    <p>&copy; 2025 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>

Разбор структуры

<!DOCTYPE html> — Эта строка сообщает браузеру, что документ написан на HTML5.
<html lang="ru"> — Корневой элемент документа. Атрибут lang указывает, на каком языке написан документ (в данном случае на русском).
<head> — Этот элемент содержит метаданные, которые не отображаются прямо на странице, такие как кодировка, заголовок страницы и ссылки на стили.
<meta charset="UTF-8"> — Устанавливает кодировку документа в UTF-8, что позволяет корректно отображать текст на разных языках.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Этот метатег необходим для правильного отображения на мобильных устройствах.
<title> — Заголовок страницы, который отображается в вкладке браузера.
<link rel="stylesheet" href="styles.css"> — Связывает внешний CSS файл для стилизации страницы.
<body> — Основное содержимое страницы, которое видит пользователь. Здесь мы создаем различные элементы, такие как заголовки, параграфы, разделы и меню навигации.

Заключение

Этот базовый HTML шаблон можно использовать как основу для создания более сложных веб-страниц. Вы можете добавлять больше секций, элементы формы, изображения и другие интересные функции, изучая HTML и CSS в дальнейшем. Хорошее понимание основ поможет вам в дальнейшем освоении frontend-разработки.

Предыдущий вопрос

Что такое кэширование приложений?

Следующий вопрос

Что такое мигающий текст?

Содержание:

Основная структура HTML документа

Разбор структуры

Заключение

Редактировать