Что такое HTML и что с ним делать в 2022 году?

воскресенье, 17 июля 2022 г.

Термин «front-end» может охватывать многие сферы. Объём обязанностей фронтенд-разработчиков варьируется от компании к компании и может случиться так, что программист при смене места работы или проекта с обычной должности возвращается на позицию Junior - именно из-за незнания определённой технологии. Однако некоторые технологии настолько распространены в мире фронтенда, что их изучение можно рекомендовать каждому. HTML является одним из таких случаев.

Что такое HTML?
Само название HTML является акронимом (аббревиатурой), то есть словом, полученным в результате сокращения двух или более слов. Таким образом, HTML является аббревиатурой от языка гипертекстовой разметки, и отдельные термины в аббревиатуре означают:
- HyperText. Гипертекст — это способ организации лексики, то есть непротиворечивых и автономных единиц текста (и изображения). Компоновка гипертекста не линейна и не структурирована, пользователь имеет полную свободу навигации между лексиками с помощью гиперссылок (ссылок). Хотя аналогия со ссылками в электронных документах естественна, гипертекстовая структура документа встречается и в других местах. Один из самых популярных примеров — «Игра в классики» Хулио Кортасара. Структура этого романа предполагает различные возможности прочтения: от начала до конца как стандартно, так и альтернативным способом, указанным автором, что, однако, может быть вкладом в собственное исследование.
- Markup Language. Разметки — это соответствующий формат документа, который, помимо содержимого, содержит описательную информацию, выраженную в виде тегов. Существует несколько классов языков разметки (презентационных, процедурных и описательных), и в рамках одного языка могут существовать вариации.
Итак, HTML — это язык гипертекстовой разметки, описывающий структуру документа с помощью семантических тегов. HTML-документ после предварительного парсинга может отображаться в веб-браузере, но он используется не только для этого. Программы чтения с экрана (то есть вспомогательные программы, используемые, например, слепыми и слабовидящими людьми) также обрабатываются путём чтения структуры веб-сайта.
Семантика — ключевое слово в случае с HTML, поэтому весь следующий пост будет посвящен этой теме.

Двойные стандарты HTML
Если вы хотите узнать, как правильно использовать преимущества той или иной технологии, проще всего посмотреть её документацию. В случае же с HTML дело обстоит не так очевидно: рядом функционируют (сосуществуют) два стандарта (хотя работа над совместной конвенцией началась ещё в прошлом году).
Первый — это HTML Living Standard, созданный WHATWG (Рабочая группа по технологиям гипертекстовых веб-приложений), т. е. организацией, объединяющей создателей веб-браузеров (не всех) и охватывающей то, что было реализовано в этих браузерах. За вторым стандартом следит W3C (Консорциум World Wide Web) — ассоциация, определяющая стандарты для веб-сайтов, основанная создателем первого веб-браузера.
На протяжении многих лет между руководствами существовали более или менее существенные различия, включая доступность веб-сайтов. Однако в последнее время организации приблизились к консенсусу и начали процесс выработки общих решений.

Является ли HTML языком программирования?
Существует несколько способов определения языков программирования (например, по функциям, назначению или синтаксическим конструкциям), но, как правило, не вычислительные языки не считаются языками программирования. Одним из таких случаев является HTML.

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

<p>Тут текст</p>

Элементы также могут содержать атрибуты, такие как уникальный идентификатор или идентификатор класса, которые можно использовать для стилизации CSS:

<div class="element" id="element1">Первый элемент</div>

Есть элементы, у которых нет содержимого и закрывающего тега (пустые элементы), например элемент, используемый для встраивания изображений:

<img src="ссылка до изображения">

Отдельные элементы HTML могут быть встроены внутрь других (вложенность элементов). Однако вы не можете пересекать элементы друг с другом, то есть закрывать внешний элемент до закрытия внутреннего элемента.

<div><p>Контент</p></div>

Структура HTML-документа
Чтобы HTML-документ корректно отображался браузером, он должен содержать определенные элементы. Пример файла .html может выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок</title>
</head>
<body>
<h1>HTML Документ</h1>
</body>
</html>

где:
- doctype - преамбула HTML, необходимая для обратной совместимости; если doctype не указан, браузер может отображать страницу в другом режиме, несовместимом с некоторыми спецификациями,
- html — охватывает все содержимое страницы (корневой элемент), также должен содержать информацию о языковой версии документа через атрибут lang,
- head — заголовок страницы, содержит метаданные о документе, может включать каскадные таблицы стилей или код JavaScript,
- meta charset — элемент, который устанавливает набор символов, используемый для отображения страницы,
- title - заголовок страницы, отображаемый на панели вкладок в браузере и в поисковых системах,
- body - это содержимое страницы, которое будет отображаться в окне браузера,
- h1 - заголовок основной страницы, который, в отличие от других заголовков (h2, h3 и т. д.), должен появляться на странице только один раз.

Как насчёт использования HTML в 2022 году?
В нескольких местах в Интернете я натыкался на бешеные новости о том, что твёрдое понимание HTML во времена React и Angular не имеет смысла. Я вообще не понимаю этих постулатов по той простой причине, что JavaScript-фреймворки тоже используют HTML. В случае с React это часто синтаксис JSX, но по-прежнему основанный на HTML.
Кроме того, front-end чарты довольно быстро меняют свои рейтинги (хотя в последнее время он все равно стабилизировался) и может оказаться, что в скором времени произойдет сдвиг от фреймворков в пользу HTML в чистом виде.

Александр

Fullstack-разработчик в Москве

Профессиональная разработка веб-приложений на Node.js с использованием Express. Создание, продвижение, поддержка и обслуживание Веб-проектов. Эффективно, прибыльно.