HTML - это язык разметки: с его помощью ты помечаешь что на странице заголовок, что обычный текст, а что картинка. Сам HTML ничего не вычисляет и не решает - этим занимается браузер: он читает твою разметку сверху вниз и превращает её в страницу, которую ты видишь на экране.
В этом уроке
Попробуй прямо в этом окне: сотри строчку с (<p>) целиком и посмотри, что изменится справа - именно так браузер реагирует на любую правку кода.
Что означает аббревиатура HTML
HTML расшифровывается как HyperText Markup Language - (язык гипертекстовой разметки). Ключевое слово здесь (разметка): с её помощью ты помечаешь содержимое страницы - где заголовок, где абзац, где ссылка. Сам HTML ничего не решает и не додумывает - он только расставляет метки а показывает всё это уже браузер.
Правильное ожидание от HTML: он покажет ровно то, что ты в него вписал, и ни капли больше.
<h1>Главное меню</h1> - это тег говорит браузеру: (это заголовок).
Неправильное ожидание - что браузер сам (поймёт) смысл текста без тега:
ГЛАВНОЕ МЕНЮ - для человека это выглядит как заголовок но для браузера это обычный текст, никак не выделенный.
Из чего состоит HTML-код
Основной строительный блок HTML - тег: метка в угловых скобках, например <p>. У большинства тегов есть пара - открывающий и закрывающий, а всё что между ними называется элементом. Про сами атрибуты тегов и вложенность одних тегов в другие подробно поговорим в следующем уроке - здесь важно только увидеть саму пару (открыл - закрыл).
<p>Текст абзаца.</p> - тег открыт и закрыт, браузер точно знает, где абзац заканчивается.
<p>Текст абзаца. - закрывающего тега нет; браузеру приходится самому угадывать, где остановиться.
Как браузер превращает код в страницу
Браузер читает HTML-код по порядку, сверху вниз, и по ходу чтения строит из тегов страницу: увидел <h1> - показывает крупный жирный заголовок, увидел <p> - начинает новый абзац. Если весь код закрыт и вложен аккуратно, результат предсказуем.
<p>Первый абзац.</p><p>Второй абзац.</p> - оба абзаца закрыты, граница между ними чёткая.
<p>Первый абзац.<p>Второй абзац.</p> - первый <p> не закрыт; браузер сам (поймёт), где начинается второй абзац, но в более сложной разметке такая догадка иногда ошибается.
<p> вообще не было закрывающей пары: его писали один раз, как разделитель между абзацами, - примерно как <br> сейчас. Современные браузеры до сих пор по привычке терпимо относятся к пропущенному </p> - это наследие тех самых черновиков.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ждать, что страница обновится сама после правки кода на настоящем сайте | В отличие от песочницы в этом уроке, на живом сайте правки нужно сохранить и опубликовать - иначе браузер покажет старую версию | Сохранять/публиковать изменения, а потом обновлять страницу, чтобы увидеть результат |
| Писать заголовок ЗАГЛАВНЫМИ БУКВАМИ вместо тега | Браузер и поисковики не понимают, что это заголовок - для них это обычный текст | Использовать настоящий тег <h1>-<h6> вместо капса |
| Не закрывать теги, «раз и так работает» | Страница выглядит нормально сейчас, но при усложнении вёрстки браузер начнёт угадывать не так, как нужно | Всегда закрывать парные теги, даже если браузер прощает ошибку |
| Думать, что текст без тегов - то же самое, что текст в теге | Без тега браузер не видит границ смыслового блока - несколько кусков текста могут слипнуться в одну строку | Оборачивать в тег каждый смысловой блок, даже совсем короткий |
Шпаргалка
| Термин | Значение |
|---|---|
| HTML | HyperText Markup Language - язык разметки: описывает, что на странице чем является |
| Тег | Метка вида <p>, которая показывает браузеру, что перед ним |
| Элемент | Открывающий тег + содержимое + закрывающий тег, например <p>Текст</p> |
| Браузер | Программа, которая читает HTML и рисует из него страницу на экране |
| Разметка | Указание «что чем является» (заголовок, абзац, картинка) - за внешний вид страницы отвечает уже CSS |
Коротко: отвечаем на вопросы
Нужно ли устанавливать что-то особенное, чтобы писать HTML?
Нет - достаточно любого текстового редактора и браузера. Специальные редакторы кода удобнее, но это отдельная тема, о ней ещё будет урок в этом курсе.
Можно ли посмотреть HTML-код любого сайта?
Да - почти в любом браузере можно нажать правой кнопкой по странице и выбрать пункт вроде «Просмотреть код страницы», чтобы увидеть исходный HTML любого сайта в интернете.
Можно ли писать HTML вообще без закрывающих тегов?
Формально браузер часто «простит» пропущенный тег и всё равно покажет страницу. Но полагаться на это не стоит: результат становится непредсказуемым по мере усложнения вёрстки.
Что будет, если написать тег с ошибкой, например открыть h1, но забыть его закрыть?
Страница обычно всё равно откроется - браузер постарается сам понять, где заканчивается блок, но не всегда угадает так, как было задумано.
