Школа Апейрона

Проект «Новая вера»

Школа Апейрона

HTML для начинающих: полное руководство с примерами кода

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

Что такое HTML?

HTML — это не язык программирования. Это язык разметки, который описывает структуру документа с помощью тегов. Браузер читает HTML-код и отображает страницу согласно этим инструкциям.
Пример простого HTML-документа:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
Структура HTML-документа
Каждый HTML-документ имеет стандартную структуру:
  1. <!DOCTYPE html> — объявление типа документа (HTML5)
  2. <html> — корневой элемент, содержит весь контент
  3. <head> — метаданные (заголовок, кодировка, стили)
  4. <body> — видимый контент страницы

 

Основные теги HTML

Заголовки

HTML предоставляет 6 уровней заголовков:
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
Правила использования:
  • На странице должен быть только один <h1>
  • Заголовки должны идти по порядку (не прыгать с h2 на h4)
  • Используйте заголовки для структуры, не для размера текста

Параграфы и текст

<p>Это параграф текста.</p>
<p>Это <strong>важный текст</strong> (жирный).</p>
<p>Это <em>выделенный текст</em> (курсив).</p>
<p>Это <a href=»https://example.com»>ссылка</a>.</p>

Списки

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
</ol>

Изображения

<img src=»photo.jpg» alt=»Описание изображения» width=»600″ height=»400″>

Атрибут alt обязателен — это описание для поисковиков и людей с нарушениями зрения.

Семантические теги HTML5

Семантические теги описывают смысл контента, а не его внешний вид:
<header> — шапка сайта или раздела
<nav> — навигационное меню
<main> — основное содержимое страницы
<article> — самостоятельная статья
<section> — тематический раздел
<aside> — боковая панель
<footer> — подвал сайта или раздела
Пример семантической структуры:
<body>
<header>
<nav>…</nav>
</header>
<main>
<article>
<h1>Заголовок статьи</h1>
<p>Текст статьи…</p>
</article>
<aside>
<h3>Похожие статьи</h3>
</aside>
</main>
<footer>
<p>&copy; 2026 Школа Апейрона</p>
</footer>
</body>

Формы в HTML

<form action=»/submit» method=»POST»>
<label for=»name»>Имя:</label>
<input type=»text» id=»name» name=»name» required>

<label for=»email»>Email:</label>
<input type=»email» id=»email» name=»email» required>

<button type=»submit»>Отправить</button>
</form>

Типы полей ввода:
  • text — текстовое поле
  • email — email с валидацией
  • password — пароль
  • number — число
  • date — дата
  • checkbox — флажок
  • radio — переключатель
  • submit — кнопка отправки

Лучшие практики HTML

  1. Используйте семантические теги — <article> вместо <div class="article">
  2. Заполняйте атрибут alt у всех изображений
  3. Один H1 на страницу — остальные заголовки по иерархии
  4. Валидируйте код — используйте validator.w3.org
  5. Доступность (a11y) — используйте <label> для форм

Практическое задание

Создайте страницу «Обо мне» с:
  • Заголовком H1 с вашим именем
  • Параграфом о себе
  • Списком навыков
  • Ссылками на соцсети
  • Формой обратной связи
  • Семантической структурой

Заключение

HTML — это фундамент веб-разработки. Изучите теги, семантику, формы и таблицы — это база, на которой строится всё остальное.

Метки:

Вам может также понравиться...

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

© 2026 Школа Апейрона. Все права защищены.

Политика ПДн · Оферта · Возврат · Правила · Реквизиты