HTML и CSS для начинающих: основные теги и свойства на примерах

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

Ниже — базовый набор тегов и свойств, которого хватит для первой полноценной страницы. Все примеры можно сразу проверять в браузере: создайте файл index.html, откройте его двойным щелчком и правьте код, обновляя вкладку.

Минимальный каркас HTML-документа

Страница начинается с указания типа документа, а дальше идёт обёртка html с двумя частями: head — служебные данные для браузера и поисковиков, и body — всё, что видит посетитель.

• <!DOCTYPE html>
• <html lang=»ru»>
• <head>
• <meta charset=»utf-8″>
• <title>Моя первая страница</title>
• </head>
• <body>
• <h1>Привет, мир</h1>
• </body>
• </html>

Строку с кодировкой указывайте первой в head: без неё русский текст превратится в набор непонятных символов. А содержимое title — это то, что человек увидит во вкладке браузера и в результатах поиска, поэтому название должно быть осмысленным.

Тег, атрибут и элемент: разбираемся в терминах

Тег — это команда в угловых скобках. Большинство тегов парные: открывающий и закрывающий со слэшем. Всё вместе с содержимым называется элементом. Атрибут уточняет поведение тега и всегда пишется в открывающем: <a href=»page.html»>. Некоторые теги одиночные — например, img или meta, закрывать их не нужно.

Основные теги для текста

Заголовки и абзацы

Заголовки бывают шести уровней — от h1 до h6. Они задают иерархию: h1 — главный на странице и обычно один, h2 — разделы, h3 — подразделы. Обычный текст разбивается на абзацы тегом p, а крупные смысловые блоки — на секции. Не пропускайте уровни: прыжок с h1 сразу на h4 сбивает и людей, и поисковых роботов.

Выделение слов

Для смыслового выделения служат два тега: strong делает текст жирным, em — курсивом. Это не то же самое, что b и i: последние просто меняют начертание, а первые подчёркивают важность фрагмента.

Списки

Маркированный список собирается из ul и li, нумерованный — из ol и li. Вложенность допускается: дочерний список помещается внутрь одного из li, а не между элементами.

Ссылки и изображения

Ссылка создаётся тегом a, адрес задаётся в атрибуте href. Чтобы ссылка открывалась в новой вкладке, добавляют target=»_blank» — и вместе с ним rel=»noopener» ради безопасности.

Изображение вставляют через img: у него два обязательных атрибута — src (путь к файлу) и alt (описание). Пустой alt оставляют только для декоративных картинок, во всех остальных случаях он помогает и доступности, и индексации.

Блочные и строчные элементы

Блочные элементы занимают всю доступную ширину и начинают новую строку — это div, p, h1. Строчные идут в потоке текста — span, a, img. Если нужен контейнер без смысловой нагрузки, берите div; если нужно выделить часть строки под стилизацию — span.

Как подключить CSS

Есть три способа: атрибут style прямо в теге, тег style в head и отдельный файл. Первые два подходят для быстрых правок, но рабочий вариант — третий: в head добавляют строку <link rel=»stylesheet» href=»style.css»>, и все стили живут в отдельном файле. Так разметка остаётся чистой, а оформление можно переиспользовать на десятках страниц.

Селекторы: как выбрать нужный элемент

• p — по имени тега, правило применится ко всем абзацам;
• .card — по классу, самый рабочий инструмент;
• #header — по идентификатору, он на странице уникален;
• .card h2 — вложенный селектор, ищет заголовок внутри карточки;
• a:hover — состояние при наведении курсора.

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

Свойства CSS, которые дают 80% результата

Цвет и текст

За цвет отвечают color и background-color, за шрифт — font-family, font-size, line-height. Значения задают в пикселях, процентах или единицах rem, где 1rem равен размеру шрифта корневого элемента.

Блочная модель

Каждый элемент — это прямоугольник из четырёх слоёв: содержимое, внутренний отступ padding, рамка border и внешний отступ margin. Чтобы ширина считалась вместе с внутренними отступами и рамкой, в начале стилей прописывают box-sizing: border-box — это избавляет от половины проблем с вёрсткой.

Оформление

Скругления задаёт border-radius, тень — box-shadow, раскладку элементов — display: flex. Последнее свойство стоит освоить в первую очередь: с ним центрирование и колонки перестают быть болью.

Практика: собираем карточку

Разметка карточки — это контейнер, заголовок, абзац и ссылка. Всё содержимое получает классы, чтобы стили не задели лишние элементы:

• <div class=»card»>
• <h3>Урок 1</h3>
• <p>Знакомство с HTML</p>
• <a class=»btn» href=»#»>Открыть</a>
• </div>

Стили для неё помещаются в несколько строк: .card получает фон, внутренний отступ, скругления и тень; .btn — цвет фона, отступы, скругление и text-decoration: none, чтобы убрать подчёркивание. Сначала пишите разметку, потом оформление — так проще понять, чего не хватает.

Частые ошибки новичков

• незакрытые парные теги и перепутанный порядок вложенности;
• несколько h1 на одной странице;
• стили прямо в тегах вместо внешнего файла и классов;
• абсолютные адреса картинок вместо относительных;
• пропущенная точка с запятой или скобка в CSS — правило просто не сработает.

Что делать дальше

Освоив эти теги и свойства, вы уже можете сверстать простую страницу-визитку. Дальше двигайтесь по нарастающей: откройте инструменты разработчика клавишей F12 и посмотрите, как устроены знакомые сайты, повторите понравившийся блок в своём файле, а затем возьмите учебный макет и соберите его от начала до конца. Практика на реальных макетах даёт больше, чем десять прочитанных статей.