Для стандартизации вывода текста внутри браузера был разработан язык разметки HTML, описывающий правила оформления текстовых данных. Несмотря на долгое развитие языка, базовые концепции не поменялись даже спустя более 20 лет. В первом модуле разберём основные концепции HTML: тег, атрибут, вложенность тегов и научимся базовым возможностям по разметке текста с помощью параграфов.
HTML разметка
HTML (HyperText Markup Language) — язык для разметки гипертекста. По своим функциям, HTML — набор правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. Язык появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
Даже эта страница является текстом, который описан с помощью HTML и обработан браузером. Технологии шагнули далеко вперёд, но концепция использования HTML для разметки текста остаётся неизменной и спустя много лет.
Вот пример HTML разметки:
HTML: Теги
Для определения браузером типа элемента, который нужно вывести на страницу, в HTML существуют специальные конструкции — теги. С помощью тегов можно создать параграф, заголовок, секцию текста, а также быстро менять их.
В HTML параграфы обозначаются специальной конструкцией <p></p> внутри которой вставляется нужный текст. Это делается между <p> и </p>. Такие теги называются парными, так как у них есть открывающая и закрывающая часть. Помимо парных тегов существуют непарные, у них нет закрывающей части, так как внутрь ничего не помещается.
Таких параграфов на странице может быть несколько — это не уникальный элемент.
Используя CSS можно менять эти стили и добавлять новые. Изучению этого языка посвящён отдельный курс на сайте.
Текст в HTML
Внутри браузера или другой программы, которая может обрабатывать HTML, текст выводится на основе указанных тегов. Без них браузер не поймёт, как правильно вывести текст.
Посмотрим на пример текста и попробуем вывести его используя разметку тегами и без этого.
Текст:
Если вставить текст на страницу без использования тегов, то получим такой результат:
Вложенность тегов
Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.
Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
Для определения списка используется тег <ul>, который указывает, что это маркированный список. Внутри располагаются теги <li>, определяющие элементы нашего списка.
Атрибуты HTML
Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером.
При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью атрибутов — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут="значение", где:
- Атрибут — название атрибута. Для появления всплывающей подсказки использовался атрибут title
- Значение — значение атрибута. Оно может быть разным, в зависимости от самого атрибута. В примере, в качестве значения, использовался текст, который должен быть выведен при наведении на элемент
Разметка примера со всплывающей подсказкой:
Атрибут title можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются глобальными, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут colspan, который указывает на объединение ячеек в таблицах. Его использование вне таблиц не имеет никакого смысла.
Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей CSS, встречается атрибут class, задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по CSS, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу
У одного тега может быть указано сразу несколько атрибутов. Тогда они записываются последовательно, при этом порядок указания не имеет значения:
Информация для статьи взята из сайта