🔥 ОСНОВНЫЕ HTML-ТЕГИ: ШПАРГАЛКА ДЛЯ НОВИЧКА

Разбираем самые нужные теги — что делают и где использовать. Сохраняй, пригодится.

—

🎯 КАРКАС СТРАНИЦЫ

<header> — шапка сайта или раздела. Туда ставят лого, меню, заголовок.

<main> — главный контент страницы. Должен быть один на страницу.

<footer> — подвал. Копирайт, контакты, ссылки внизу.

<nav> — навигация. Всё, что относится к меню и ссылкам по сайту.

<section> — смысловой раздел. Например: "Наши услуги", "Отзывы".

<article> — самостоятельная статья или запись. Пост в блоге, новость.

<aside> — боковая панель. Сайдбар, реклама, доп. информация.

—

📝 ТЕКСТ И ЗАГОЛОВКИ

<h1> до <h6> — заголовки по важности. h1 — один на страницу, самый главный.

<p> — абзац текста. Всё, где много текста подряд.

<span> — строчный элемент. Для стилизации части текста, не создаёт новый блок.

<strong> — важный текст. Обычно жирный, для акцентов.

<em> — акцент. Обычно курсив, для интонации.

<br> — перенос строки. Стихи, адреса, там где нужен разрыв.

—

🔗 ССЫЛКИ И ИЗОБРАЖЕНИЯ

<a> — ссылка. Куда ведёт, открывается ли в новом окне.

<img> — картинка. Обязательно добавлять alt — описание для тех, у кого не загрузилась.

<figure> — группа для медиа. Картинка + подпись внутри.

<figcaption> — подпись к картинке. Ставится внутри figure.

—

📋 СПИСКИ

<ul> — маркированный список. Просто перечень с точками.

<ol> — нумерованный список. Где важен порядок (топы, инструкции).

<li> — элемент списка. Ставится внутри ul или ol.

—

📊 ТАБЛИЦЫ (только для табличных данных!)

<table> — контейнер таблицы.

<tr> — строка таблицы.

<td> — ячейка с данными.

<th> — ячейка-заголовок (жирная, по центру).

—

📝 ФОРМЫ — ОСОБОЕ ВНИМАНИЕ

<form> — контейнер формы. Сюда заворачиваешь все поля.

<input> — поле ввода. Типы: text, email, tel, password, number.

<label> — подпись к полю. Обязательно связывать с input (через for или оборачивая).

<textarea> — многострочный текст. Для комментариев, сообщений.

<button> — кнопка. Для отправки формы или действия.

<select> — выпадающий список. Варианты внутри через option.

<option> — элемент выпадающего списка.

<checkbox> и <radio> — чекбоксы и радиокнопки (тоже input с type).

—

⚡ ПРОДВИНУТЫЕ (НО ОЧЕНЬ ПОЛЕЗНЫЕ)

<details> — раскрывашка без JavaScript. Внутри summary + текст.

<summary> — заголовок для details. То, что видно всегда.

<datalist> — автодополнение. Подсказки при вводе в input.

<progress> — индикатор прогресса. Загрузка, заполнение анкеты.

<picture> — адаптивные картинки. Можно подкладывать разные изображения под экраны.

—

📌 ГЛАВНОЕ:

• Не пихай везде <div> — используй семантические теги
• В формах всегда связывай <label> и <input>
• У картинок всегда должен быть alt
• <h1> — только один на странице

Сохраняй пост, чтобы не потерять. В следующей части разберу CSS-свойства, которые реально нужны в работе.

Какой тег используете чаще всего? 👇

#html #верстка #шпаргалка #обучение #фронтенд