Что такое HTML

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

Зачем это знать

Нейросеть отдаёт готовый код. Дальше вы его куда-то вставляете — и если что-то пошло не так, надо хотя бы понимать, на что смотреть. Пяти минут хватит, чтобы разговаривать с ней на одном языке.

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

Как устроен тег

Тег — одна пометка. Почти всегда их два: открывающий и закрывающий, между ними содержимое.

Часть тегов закрывать нечего — у них нет содержимого. Так пишутся картинка <img>, перенос строки <br>, черта <hr> и служебные <meta>.

Скелет страницы

У любой страницы один и тот же каркас. Пишется один раз, дальше не трогается.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>

  <h1>Привет!</h1>
  <p>Это моя первая страница.</p>

</body>
</html>

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

• <!DOCTYPE html> — «дальше современный HTML». Всегда первой строкой, всегда одинаково.
• <html lang="ru"> — страница целиком, язык русский.
• <head> — служебная часть, на экране её не видно.
• <meta charset="UTF-8"> — кодировка. Без неё русский текст превращается в кракозябры.
• <meta name="viewport"…> — показывать страницу по ширине экрана телефона.
• <title> — название во вкладке браузера и в результатах поиска. Это не заголовок на странице.
• <body> — всё, что человек видит. Дальше работа идёт только здесь.

Теги, которые встречаются чаще всего

Тегов в HTML около сотни, в обычной статье работают полтора десятка. Этой таблицы хватит, чтобы прочитать почти любую страницу.

Теги со смыслом

Страницу можно собрать целиком из <div> — она будет выглядеть так же. Но <div> ничего не значит, и программы такую страницу не понимают. Для частей страницы есть теги со значением.

<body>
  <header>    <!-- шапка: логотип и меню -->
    <nav>…</nav>
  </header>

  <main>      <!-- главное содержимое, одно на страницу -->
    <h1>Что такое HTML</h1>
    <aside>…оглавление…</aside>
    <article>…этот текст…</article>
  </main>

  <footer>…</footer>
</body>

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

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

Что просить у нейросети

Основную работу делает она. От вас — понятная задача и проверка результата. Рабочая заготовка запроса:

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

Как проверить, что получилось

Браузер прощает почти всё и достраивает пропущенное сам, поэтому «выглядит нормально» ещё не значит «сделано верно». Три способа увидеть правду, все бесплатные.

• Валидатор validator.w3.org — вставить код и посмотреть список ошибок. Их должно быть ноль.
• Ctrl + U — показать разметку любого сайта, в том числе этого. Увидели интересное решение — посмотрели, как сделано.
• F12, вкладка «Элементы» — то, что браузер в итоге понял из вашей разметки.

Дальше — CSS: тот же текст, но с цветом, размерами и раскладкой. А потрогать руками можно на мануале про хлебные крошки: два десятка строк разметки — и готовый кусок сайта.