1. HTML для начинающих. Введение — тег, анатомия тега, поток документа, вложенность, атрибуты

Александр Ламков, frontend-инженер ВКОНТАКТЕ, представляет себя и приветствует зрителей на своем образовательном канале. Платформа ориентирована на обмен знаниями и инсайтами, связанными с технологиями.

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

HTML, аббревиатура от HyperText Markup Language, является необходимым знанием для каждого разработчика веб-интерфейса. Он служит основой веб-страниц, создавая их структуру и макет с помощью разметки. Этот язык позволяет разработчикам эффективно проектировать и организовывать контент на веб-сайтах.

Теги являются основными элементами веб-контента, включая текст, заголовки, ссылки, кнопки, изображения и многое другое. Каждый тег определяет назначение своего содержимого и обеспечивает базовый внешний вид, определяемый стилем браузера по умолчанию. Браузеры, такие как Chrome и Safari, могут отображать эти теги по-разному из-за их уникальных стилей по умолчанию.

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

Одиночные теги, такие как тег поля ввода, отличаются от парных тегов тем, что для них не требуется закрывающий аналог. Они могут быть написаны в двух синтаксических вариантах: один из них напоминает начальную часть парного тега, а другой - с косой чертой перед последней угловой скобкой (например, ). Хотя оба они функционально идентичны, рекомендуется использовать второй синтаксис, поскольку он улучшает читаемость при сканировании по разметке, содержащей множество тегов.

Документооборот в формате HTML - это последовательность тегов и содержимого, отображаемых в браузере. Браузеры обрабатывают HTML-код слева направо, сверху вниз, создавая поток, который определяет порядок отображения элементов на странице. Такое логическое расположение помогает понять, как элементы отображаются визуально.

HTML допускает вложение тегов друг в друга, то есть один тег может содержать другой внутри себя. Это вложение может продолжаться бесконечно, создавая иерархическую структуру элементов. Например, тег article может включать в себя тег div, который, в свою очередь, содержит дополнительный контент или теги.

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

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

Значения HTML-атрибутов могут быть заключены в двойные кавычки или существовать отдельно, без знака равенства и значения, например, атрибут 'disabled'. Эти атрибуты помещаются в открывающий тег таких элементов, как links () или самозакрывающиеся теги.

Атрибуты для ввода и img-тегов могут быть записаны как в одной строке, так и в нескольких строках, разделенных пробелами. Выбор зависит исключительно от удобочитаемости; если из-за большого количества атрибутов строка выходит за пределы экрана, предпочтительнее разбить их на отдельные строки.

HTML содержит глобальные атрибуты, такие как "class", применимые практически ко всем тегам, которые необходимы для стилизации CSS. Эти универсальные атрибуты обеспечивают гибкость дизайна и функциональность различных элементов. Напротив, существуют специфические или узконаправленные атрибуты, такие как "HP", которые служат специализированным целям в определенных контекстах.

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

Каждая HTML-страница имеет фундаментальную структуру верхнего уровня, которую легко запомнить. Эта базовая структура включает в себя такие важные элементы, как объявление doctype, html-теги, раздел head для метаданных и раздел body для содержимого. Эти компоненты составляют основу любой веб-страницы.

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

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

Атрибут 'lang' во второй строке HTML-кода определяет язык текстового содержимого этого тега. При применении к тегу HTML он указывает язык для всего содержимого веб-страницы. Это помогает браузерам правильно понимать и обрабатывать лингвистическую информацию по всей странице.

Элемент head на HTML-странице содержит метаданные, включая атрибут language. Для русскоязычной страницы атрибут 'lang' имеет значение "ru", в то время как для англоязычных страниц он может быть указан по-другому. Заголовок также содержит важную служебную информацию, такую как мета-теги и значки.

Мета-тег - это отдельный самозакрывающийся HTML-элемент, используемый для определения метаданных для веб-страниц. Он предоставляет важную информацию, такую как кодировка сайта, описания для поисковых систем, ключевые слова и настройки области просмотра, необходимые для совместимости с мобильными устройствами, с помощью настроек CSS. Хотя существует множество вариантов использования мета-тега, обязательными считаются только два: указание кодировки символов и определение базовых метаданных.

Заголовки страниц определяют название, отображаемое на вкладках браузера. Они необходимы для идентификации нескольких открытых страниц проекта и навигации между ними. Копирование параметров заголовка из других проектов может упростить этот процесс, обеспечивая согласованность в различных веб-приложениях.

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

Мы рассмотрели основные теоретические концепции HTML, и следующий шаг предполагает переход к практическому применению, непосредственно изучая теги. Подписка обеспечивает доступ к новым материалам по мере их выхода.