Разметка — JS: Последовательности

• Языки разметки: Markdown и HTML
• Базовые элементы HTML
• Особенности
• Интерфейс

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

Языки разметки: Markdown и HTML

Набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

Мы не просто пишем какой-то текст, но и хотим его разметить для того, чтобы потом автоматически преобразовать в необходимое нам визуальное представление. Большинство людей пользовалось программой Microsoft Word, в которой как раз этим и занимаются: выделяют текст жирным, делают его подчёркнутым, разбивают на абзацы и т.д. При этом данная программа является примером механизма, где вы не видите те самые символы и последовательности, которые вставляются в текст. Вы видите сразу результат. Эти символы и последовательности существуют где-то внутри.

Есть и прямой способ, когда вы создаёте настоящий текст, в который вставляются маркеры. Это достаточно важно с точки зрения программных манипуляций. Microsoft Word, в конце концов, скрыто от вас, делает то же самое. Один из самых простых и распространённых языков разметки — это Markdown. Исходник текста при этом выглядит вот так:

## Языки разметки: Markdown и HTML

> Набор символов или последовательностей,
> вставляемых в текст для передачи информации
> о его выводе или строении.

Заголовок, который здесь выводится, обозначается двумя решётками, что соответствует заголовку второго уровня. Символ > обозначает цитату. И если она пишется подряд, то превращается в единую цитату, отображается с отступом от левой границы документа и чуть более крупным шрифтом. В Markdown есть много других способов вывести ту или иную информацию заголовками, абзацами, списками и т.д. При этом разметка текста происходит крайне просто. Нужно только запомнить маркеры и использовать их. Markdown встречается повсеместно. Почти все редакторы в интернете используют Markdown. Раздел Обсуждения на Хекслете, где можно что-то спросить, о чём-то поговорить, написать комментарий, тоже поддерживает Markdown. Это очень удобно. Например, если нужно выделить или вставить код. Не все об этом знают, но я надеюсь, что с этого момента, вы будете использовать данные возможности.

Markdown — не единственный способ размечать текст.

Более распространённым является HTML. Но это не значит, что они друг друга заменяют, просто их используют в разных ситуациях.

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

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

Часто новички и те, кто начинают вникать в эту тему, говорят программировать на HTML. Если вы попробуете поискать данную формулировку в интернете, то увидите, что есть статьи, где такое словосочетание встречается. На самом деле оно в корне не верно, потому что невозможно программировать на не Тьюринг полной системе. И HTML — это всего лишь способ оформлять текст, просто набор тегов, которые надо запомнить. И, естественно, с помощью HTML вы не можете описать какие-то программы.

Это касается и более сложных систем, которые не полны по Тьюрингу.

<h3>Язык разметки: Markdown, HTML, ...</h3>
<blockquote>Следует отметить, что язык
разметки неполон по Тьюрингу и
обычно не считается языком программирования.</blockquote>

<p>
  <b>HTML</b>
</p>

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

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

Базовые элементы HTML

<!-- Комментарий -->
<hr>
<h1>Заголовок</h1> <!-- h1 может быть только один -->
<p>Параграф</p>
<blockquote>Цитата</blockquote>
<ul>
  <li>Первый элемент</li>
  <li>Второй элемент<li>
</ul>

У HTML очень много разных элементов. В примере показаны только некоторые из базовых.

• Например, HTML поддерживает комментарии — одиночный тег, который оформляется <!-- --> и не отображается на итоговой странице.
• Есть одиночный тег <hr>. Он проводит горизонтальную черту.
• Заголовок <h1>. Причём заголовок первого уровня может быть только один в документе HTML. Если вы их сделаете несколько, браузер всё равно их отобразит. Парсится и отображается любой, даже не валидный HTML, т.е. семантически у нас не может быть двух заголовков первого уровня, а синтаксически можно просто забыть закрывающий тег и всё равно всё будет работать. Эта особенность, в том числе, позволила HTML стать очень популярным, но и сделала браузеры очень сложными в части реализации работы с не валидным HTML-кодом.
• Есть тег <p> — параграф, достаточно очевидное имя.
• <blockquote> — это цитата.
• Списки <ul>, которые внутри используют элементы <li>.

Особенности

• Логическая (h1) / Визуальная разметка (b)
• Форматирование html не влияет на внешний вид
• Иерархическая структура

Во-первых, разметка делится на два типа: логическая и визуальная.

• Логическая разметка (можно говорить ещё семантическая) определяет смысловую структуру. Когда мы пишем h1, мы имеем в виду именно заголовок первого уровня, не указывая, как он будет выглядеть. Это говорит о том, чем является этот кусок текста. А то, как он выглядит, зависит от многих факторов.
• Визуальная разметка определяет то, как должен выглядеть элемент. Например, есть тег b. Расшифровывается как bold (англ. жирный). Он не несёт никакого семантического смысла. Это просто указание, что кусок текста внутри данного тега должен быть отображён жирным.

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

HTML — иерархическая структура: элементы могут входить в элементы: <p>Раз <b>Два</b> Три</p>.

Интерфейс

Теперь давайте рассмотрим интерфейс нашей библиотеки, которая позволит нам строить HTML. Пока мы не будем работать с иерархическим способом задания (это следующий этап), будем работать только с плоским.

import {
  make, append, toString, node
} from 'hexlet-html-tags';

const html1 = make();
const html2 = append(html1, node('h1', 'hexlet'));
const p1 = node('p', 'hello, world');
const html3 = append(html2, p1);

// <h1>hexlet</h1>
// <p>hello, world</p>
toString(html3);

Итак, у нас есть четыре базовых функции.

• make — это конструктор, с помощью которого мы создаём html, структуру. По сути вызов make возвращает список, в который мы будем постепенно добавлять теги.
• Давайте посмотрим способ добавления тега. Для этого используется функция append, которой мы передаём созданный HTML.
• Далее используем ещё одну функцию node, которая создаёт ноду, элемент нашего html-документа. Она принимает на вход два параметра. Имя тега и body, т.е. контент, который будет внутри этого тега. Как видите, нам не надо никаких закрывающих тегов. При выводе они будут добавляться автоматически.
• И toString — функция позволяющая распечатывать содержимое списка тегов.

Из кода видно, что это неизменяемая структура, так как нам пришлось создать html2 после вызова append, потому что изменения html1 не происходит. Далее мы создаём ещё один элемент — абзац p1, добавляем в него текст hello, world, "аппендим" его и получаем html3.

Если с помощью toString мы выведем наш html, то увидим вполне красивую разметку.

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»