Что такое HTML и чем он отличается от CSS — объясню простыми словами и на примерах

В интернете всё отображается в браузере: сайты, страницы, кнопки, тексты. Но браузер не «угадывает», что вы хотели. Он получает разметку и стили и собирает страницу по вашим правилам.

HTML (HyperText Markup Language — язык разметки гипертекста) отвечает за смысл и структуру: где заголовок, где абзац, где кнопка, где ссылка.
CSS (Cascading Style Sheets — каскадные таблицы стилей) отвечает за внешний вид: какой цвет, размер, отступы, шрифт, расположение.

Как устроена веб-страница: два слоя

Представьте страницу как школьный тетрадный лист.

• HTML — это как «что где написано»: название темы, текст, список, картинка, форма.
• CSS — это как оформление: цвет ручки, размер букв, поля, выравнивание.

Браузер сначала читает HTML, чтобы понять из чего состоит страница. Потом применяет CSS, чтобы как именно это выглядит.

Важно: HTML и CSS часто идут вместе, но их роли разные. Если вы попробуете сделать оформление без CSS, получится хаос. Если сделать структуру без HTML, браузер не поймёт, что является заголовком, ссылкой или кнопкой.

Что делает HTML: структура и смысл

HTML состоит из тегов (команд в угловых скобках, например <p>). Теги оборачивают контент и говорят браузеру: “это абзац”, “это заголовок”, “это ссылка”.

Минимальный набор смысловых вещей обычно такой:

• заголовок страницы — <h1>
• подзаголовки — <h2>, <h3>
• абзац текста — <p>
• ссылка — <a>
• изображения — <img>
• список — <ul> и элементы <li>

Вот короткий пример: это пока без красоты, но уже понятно, что есть что.

<!doctype html>
<html>
  <head></head>
  <body>
    <h1>Мой мини-сайт</h1>
    <p>Здесь живёт текст.</p>
    <a href="https://example.com">Ссылка</a>
  </body>
</html>

Пояснение по строкам:

• <!doctype html> — говорит браузеру: “используем современный HTML”.
• <html>...</html> — весь документ.
• <head>...</head> — место для настроек (метаданные, шрифты и т.д.), можно пока пустым.
• <body>...</body> — то, что пользователь видит на странице.
• <h1>... — главный заголовок.
• <p>... — абзац.
• <a href="...">... — ссылка, href это адрес.

Что делает CSS: внешний вид

CSS задаёт правила, как отображать элементы HTML. Делается это через селекторы (как выбрать нужный HTML-элемент) и свойства (что изменить).

Например:

• сделать заголовок красным
• увеличить размер текста
• добавить отступы
• убрать подчёркивание у ссылок

Добавим оформление к тому же документу. CSS можно писать прямо в файл HTML внутри <style>.

<!doctype html>
<html>
  <body>
    <h1 class="title">Мой мини-сайт</h1>
    <p class="text">Здесь живёт текст.</p>
    <a class="link" href="https://example.com">Ссылка</a>

    <style>
      .title { color: darkblue; font-size: 28px; }
      .text { line-height: 1.6; }
      .link { color: #444; text-decoration: none; }
    </style>
  </body>
</html>

Пояснение:

• class="title" — помечаем элемент, чтобы CSS мог его найти.
• .title { ... } — селектор по классу. Точка в начале означает “класс”.
• color, font-size, line-height, text-decoration — свойства стиля.

CSS не “объясняет смысл”. Он только меняет отображение уже существующей структуры.

Мини-страница целиком: собираем вместе

Теперь соберём страницу, чтобы было видно логику “HTML = смысл, CSS = вид”.

Идея такая:

1. Сначала пишем HTML: заголовок, текст, кнопка, карточка.
2. Потом добавляем CSS: цвета, отступы, выравнивание.

Пример (можете сохранить как index.html и открыть в браузере):

<!doctype html>
<html>
  <body>
    <div class="card">
      <h1 class="title">Добро пожаловать</h1>
      <p class="text">Это мини-страница: HTML задаёт структуру, CSS — оформление.</p>
      <a class="button" href="#">Понятная кнопка</a>
    </div>

    <style>
      .card { padding: 16px; border: 1px solid #ddd; border-radius: 10px; width: 360px; }
      .title { margin: 0 0 10px 0; font-size: 24px; }
      .text { margin: 0 0 14px 0; color: #333; line-height: 1.5; }
      .button { display: inline-block; padding: 10px 14px; background: #2f6fed; color: white; border-radius: 8px; text-decoration: none; }
    </style>
  </body>
</html>

Что здесь важно как новичку:

• div.card — контейнер (обёртка), чтобы стилизовать блок целиком.
• h1, p, a — это разные смыслы, их не нужно подменять “просто текстом”.
• CSS использует классы .card, .title, .text, .button, чтобы применять стили точечно.

Если вам интересно двигаться дальше, хороший следующий шаг — пройти материал по связке именно для старта: Основы HTML. Он поможет закрепить, какие теги для чего нужны, и не путать структуру с оформлением.

В каком порядке учить: короткий путь без лишнего

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

1. HTML-основа: учитесь тегам, которые вы реально используете (заголовки, абзацы, ссылки, изображения, списки, формы). Поймите, что HTML — про смысл.
2. Базовый CSS: сначала цвета, шрифты, отступы, выравнивание. Потом — блочная модель (как элементы занимают место).
3. Практика “страница за страницей”: делайте простые макеты: визитка, карточка товара, мини-блог. Не пытайтесь сразу делать “как в Instagram”.
4. Переход к более удобному формату: потом можно вынести CSS в отдельный файл и подключать его из HTML. Это следующий этап, когда вам уже понятно, что происходит.

Чего избегать:

• Не учите CSS раньше HTML “на уровне ощущений”. Вы будете стилизовать, не понимая, что именно стилизуете.
• Не копируйте готовый код без понимания структуры. Лучше перепечатать и объяснить себе: “это заголовок, это ссылка, это карточка”.
• Не гонитесь за сложными эффектами. В начале важнее научиться собирать страницу и контролировать базовую разметку.

И честный момент: чтобы получать “первую осмысленную страницу” достаточно пары вечеров. Чтобы уверенно делать разные макеты — нужно больше практики, обычно несколько недель регулярных упражнений.

С чего начать прямо сейчас

1. Создайте файл index.html, вставьте туда пример из раздела “Мини-страница целиком” и попробуйте поменять текст.
2. Добавьте ещё один абзац в HTML и оформите его CSS через новый класс (например, .note).
3. Сделайте маленькую вариацию: измените цвета и отступы, но не трогайте структуру — проверьте, как меняется только оформление.

Если хотите, скажите, какой тип страницы вам интереснее всего (лендинг, портфолио, блог, страница с карточками) — подскажу, с какого мини-проекта начать.