P
pro·school.ru
Каталог школ

Теги и разметка веб-страницы

💻 Информатика · 5 класс

Как браузер узнаёт, что показывать

Страницы в Интернете выглядят аккуратно: есть крупные заголовки, абзацы, выделенные жирным слова, списки и картинки. Но откуда браузер знает, что одна строка — это заголовок, а другая — обычный текст? Дело в том, что страницу заранее размечают специальными пометками — тегами. Тег — это служебная команда разметки, которая сообщает браузеру, как показать тот или иной кусочек текста.

Разметка — это как пометки редактора на полях рукописи: «это сделать заголовком», «это выделить жирным». Только пометки для браузера записывают тегами, а не словами.

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

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

Назначение тегаЧто он задаёт на странице
ЗаголовокКрупный заголовок раздела
АбзацОтдельный абзац текста с отступом
ВыделениеЖирный или наклонный текст
СписокПеречень пунктов друг под другом

Разобранный пример

Пусть открывающий и закрывающий теги абзаца записаны для наглядности как [абзац] и [/абзац]. Тогда разметка

[абзац]Привет, мир![/абзац]

заставит браузер показать на странице только слова

Привет, мир!

оформленные как один абзац. Сами пометки [абзац] и [/абзац] на экране не появятся — они нужны лишь браузеру, чтобы понять, как оформить текст.

Правило: у большинства тегов есть пара — открывающий и закрывающий. Если забыть закрывающий тег, браузер может показать страницу неправильно: например, весь текст после открытого тега станет заголовком.

Зачем нужна разметка

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

Любая страница в Интернете, которую вы открываете, на самом деле собрана из текста и тегов. Браузер читает эту разметку и по ней рисует знакомую красивую страницу. Поэтому веб-страницы можно открыть на любом устройстве с браузером, и они везде будут понятны.

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

Кратко о главном

  • Веб-страницу размечают тегами, чтобы задать вид текста.
  • Тег — служебная команда разметки в угловых скобках.
  • Теги обычно парные: открывающий и закрывающий с косой чертой.
  • Сами теги на странице не видны, браузер лишь применяет их.
  • Разметка отделяет текст от оформления и работает на любом устройстве.