Язык программирования HTML, или язык гипертекстовой разметки, отвечает за структуру страницы сайта. Изначально он создавался для обмена научной и технической информацией. HTML задумывался для создания и форматирования структуры документа. Информация должна была одинаково отображаться в различных браузерах, поэтому в Консорциуме Всемирной паутины W3C разработали единый стандарт языка HTML, куда входит описание допустимых тегов и особенности их использования. Текущая версия стандарта – HTML5.1. Все современные браузеры стремятся к поддержке актуальных стандартов.

Из чего состоит язык HTML

С помощью языка программирования HTML создается разметка веб-страницы и ее деление на смысловые блоки. Язык CSS – это правила для описания внешнего вида и расположения этих элементов в документе, написанном на HTML. В процессе отрисовки страницы браузер считывает файлы с разметкой и оформлением, объединяет полученную информацию и выдает конечный результат в виде сайта.

Каждая веб-страница наполняется контентом – текстами, изображениями и интерактивными элементами. Текст на странице должен легко читаться пользователем, поэтому нужна структура: выделение заголовков, разделение на абзацы, цитаты, расстановка акцентов на смысловых частях, наличие списков для удобства восприятия информации. Язык программирования HTML оформляет эти элементы при помощи специальных меток – тегов. Эти метки могут быть одиночными или парными.

Способ написания тегов

Каждый тег состоит из открывающей и закрывающей треугольной скобки, между которыми находится его буквенное значение. Например, для задания адреса ссылки используется тег . Названием тега чаще всего становится сокращение от названия его функции на английском языке. Всего их около 100. Программирование HTML для начинающих не включает в себя обязательного требования знать все. Наиболее часто в разметке используется не более 20% всех существующих тегов.

Парные теги

Веб-страница состоит из информации, которая должна быть представлена в удобном для пользователя виде. При HTML-программировании с нуля важно это учитывать. Специальные теги для разметки и структурирования текста облегчают визуальное восприятие большого объема информации. С их помощью выделяют смысловые разделы, расставляют акценты и упрощают понимание текста. Например, парный тег

выделяет параграф или абзац. Он состоит из открывающей и закрывающей части. Первая часть располагается в начале выделяемого элемента, а вторая – в конце. В закрывающем теге перед буквенной частью ставится знак «/». Правильное написание тега параграфа выглядит так:

абзац

. Контент, заключенный в тег

, выделяется отступами. Для выделения длинных цитат применяется парный тег

. У него есть свое визуальное оформление – вокруг элемента создаются отступы, сам текст заключается в кавычки. Важный участок контента, на котором делается акцент, выделяют при помощи тега .

Одиночные теги и комментарии

Парные теги используются для выделения участков текста, а при помощи одиночных добавляются декоративные объекты, например, картинки. У одиночных тегов нет закрывающей части. До появления нового стандарта HTML5 после букв ставился знак «/». Но теперь использование слэша стало необязательным. Одиночные теги применяются для элементов оформления. Например, тег

---

- одиночный, применяется для разрыва строки и переноса элемента на новую строку. Тег

---

встречается при разметке стихов и песен. При программировании сайта HTML, используют специальный тег, который помогает скрыть часть кода – комментарий. Закомментированный код не отображается браузером, что удобно использовать для проверки работоспособности того или иного участка разметки. Комментарий записывается так: .

Особенности разметки заголовков

Для выделения в тексте заголовков различного уровня в HTML-программировании применяются парные теги от

до

. Тегом

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

в документе считалось недопустимым, но с появлением новых стандартов это уже не критическая ошибка. Единственное замечание: тег

не стоит использовать для увеличения шрифта простого текста. Для изменения размеров шрифта применяется CSS. Язык CSS состоит из селекторов и свойств. Селектор выбирает элемент на странице, а свойство описывает эффект, который к нему применяется. Подзаголовки выделяются тегами

.

Атрибуты HTML-тегов

Иногда браузеру необходимо сообщить дополнительную информацию о содержимом тега или задать ему дополнительные свойства. Например, для того, чтобы изображение появилось на странице, нужно указать ссылку на него. Для этой цели используются атрибуты тегов. Они задаются в открывающем теге через пробел и состоят из двух частей: названия и значения, и никак не выделяются на странице. Значение атрибута записывается после символа «=» в двойных кавычках. Например, для тега цитаты используется два: class и cite, а для ссылок – href.

Атрибуты class и id

Атрибут class – универсальный и очень часто применяется в верстке. Он может задаваться всем существующим тегам в языке HTML. Классы используются для описания свойств элементов при помощи CSS. Атрибут cite используется только для тега

. Его значение - источник цитаты. Cite сообщает поисковым системам, кто автор изречения. Другой распространенный атрибут – id или идентификатор, который также используется при оформлении элементов при помощи CSS. Они также универсальны и применяются к любым тегам, но создание селекторов по id считается плохим тоном в верстке. Идентификатор может быть на странице только один, поэтому в коде ему будет присваиваться наибольшая специфичность. Атрибуты class и id похожи по описанию и действию, но служат для абсолютно разных целей. Id помогает задать тегу уникальное имя, на которое затем можно ссылаться. Атрибут Class - один из самых важных для языков программирования HTML и CSS. С его помощью в CSS применяются стили. Классов у тега может быть несколько, они задаются через пробел и помогают управлять внешним видом элемента.

Атрибуты для ссылок и изображений

Ссылка задается парным тегом с атрибутом href, в котором прописывается адрес, куда она должна вести. На странице можно разместить ссылку со значением атрибута href, в котором будет прописан id элемента. Значение указывается через знак #: Название ссылки. Такие ссылки называются якорными. С их помощью можно переместиться в определенную область внутри одной страницы. Для одиночного тега вставки изображений обязательными атрибутами являются src и alt. Первый задает путь к картинке, а второй – ее описание, которое отображается браузером, если она не загрузилась.

Простейшая структура HTML-страницы

Каждая страница, написанная на языке программирования HTML, начинается с декларации типа документа или «доктайпа». Она используется браузером для определения версии HTML. В новой спецификации «доктайп» выглядит так: . Ранее использовалась более сложная запись. Далее на странице располагаются как минимум три основных тега:

• - контейнер для содержимого страницы;
• - хранилище информации, которая облегчает браузеру работу с данными;
• - хранилище контента страницы.

В теге находится