HTML и CSS: основы для владельца сайта

Зачем владельцу сайта знать HTML и CSS

Вам не нужно становиться программистом. Но понимание основ HTML и CSS поможет: общаться с разработчиками на одном языке, вносить мелкие правки без привлечения специалиста, понимать ограничения и возможности веб-разработки, контролировать качество работы подрядчика.

HTML: структура страницы

HTML (HyperText Markup Language) — язык разметки, определяющий структуру веб-страницы. HTML не программирование — это описание: «вот заголовок, вот абзац, вот изображение».

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

• <h1>–<h6> — заголовки (H1 — главный, H6 — наименее значимый). Для SEO важно: один H1 на странице с ключевым словом
• <p> — абзац текста
• <a href="url"> — ссылка
• <img src="url" alt="описание"> — изображение. Alt-тег обязателен для SEO и доступности
• <ul>/<ol> — маркированный/нумерованный список
• <div> — блок-контейнер (для группировки элементов)
• <span> — строчный контейнер (для стилизации части текста)
• <form> — форма для отправки данных
• <table> — таблица

Семантическая разметка

Современный HTML использует семантические теги, которые описывают смысл контента:

• <header> — шапка сайта
• <nav> — навигация
• <main> — основной контент
• <article> — самостоятельная статья
• <section> — тематический раздел
• <footer> — подвал сайта

Семантика помогает поисковым системам лучше понимать структуру страницы.

CSS: внешний вид страницы

CSS (Cascading Style Sheets) — язык стилей, определяющий внешний вид HTML-элементов: цвета, шрифты, размеры, отступы, расположение.

Основные свойства

• color — цвет текста
• background-color — цвет фона
• font-size — размер шрифта
• font-family — шрифт
• margin — внешний отступ
• padding — внутренний отступ
• width/height — ширина и высота
• display: flex — Flexbox для гибких раскладок
• display: grid — CSS Grid для сложных сеток

Единицы измерения

• px — пиксели (фиксированный размер)
• % — проценты от родителя
• rem — относительно размера корневого шрифта (лучше для адаптивности)
• vw/vh — проценты от ширины/высоты окна

Что полезно уметь владельцу сайта

• Найти элемент через Инспектор браузера (F12 в Chrome) и понять его стили
• Изменить текст или ссылку в HTML-редакторе WordPress
• Понять, почему элемент отображается не так, как задумано
• Вставить код счётчика аналитики в нужное место
• Добавить простую CSS-стилизацию (цвет кнопки, размер текста)

Ресурсы для изучения

• htmlacademy.ru — интерактивные курсы на русском (рекомендуем)
• developer.mozilla.org — официальная документация MDN (на русском)
• webref.ru — справочник по HTML и CSS
• YouTube-каналы — «Фрилансер по жизни», «Веб-кадеми»

Хотите разобраться в технических аспектах вашего сайта? Обращайтесь в DZ Digital — объясним простым языком и поможем с любыми доработками.