Компьютерный код HTML

В учебниках и документации часто показывают команды, имена свойств и фрагменты HTML. Если вставить этот текст в обычный абзац, браузер может схлопнуть пробелы и воспринять < как начало настоящего тега. HTML даёт элементы для компьютерного текста, чтобы примеры оставались читаемыми и безопасными. Без них учебная страница может «съесть» отступы сниппета или, хуже, превратить пример <p> в живой тег, который ломает вёрстку самого урока. Эта сессия учит помечать код, клавиши и вывод программы правильной ролью — и кодировать угловые скобки, когда пример — это HTML внутри HTML. Думайте об этих элементах как о смысловых метках: они сообщают браузеру и вспомогательным технологиям, что фрагмент — не обычная проза, и дают моноширинный шрифт по умолчанию, когда это помогает чтению.

Что такое элементы компьютерного кода?

Эти элементы помечают текст, который представляет код, клавиатурный ввод или вывод программы — не обычную прозу. Они помогают браузеру выбрать подходящий шрифт по умолчанию (часто моноширинный для code и pre) и сообщают вспомогательным средствам, что отрезок связан с компьютером. Символы вы по-прежнему пишете сами; теги добавляют смысл и с pre сохраняют раскладку. Практически code выделяет короткий токен в предложении, pre фиксирует пробелы и переводы строк в блоке, kbd отмечает реальные клавиши, которые нажимает пользователь, а samp показывает, что вернула программа или команда. Не выбирайте элемент только потому, что «похоже на код»: выбирайте по роли текста. Так страница яснее для людей, для CSS, который может стилизовать эти элементы, и для вспомогательных технологий, которые озвучивают тип содержимого.

Прямой ответ

Используйте code для короткого фрагмента внутри предложения. Используйте pre, когда пробелы и переводы строк должны сохраниться. Распространённый блочный шаблон — <pre><code>...</code></pre>. Помечайте клавиши через kbd, а пример вывода программы через samp, когда эти роли настоящие. Когда сам пример — HTML, пишите < и > вместо сырых < и >, чтобы браузер случайно не построил живые элементы. Если запомнить только одно правило этой сессии, запомните: показать разметку — не то же самое, что выполнить разметку, а кодирование сущностей — граница между ними. Остальное (строка против блока, клавиатура против вывода) следует той же логике честной семантики.

Элементы одним взглядом

Строковый код

Когда вы упоминаете короткий токен внутри предложения, оберните его в code. Слово остаётся визуально отличимым без принудительного целого блока. В учебниках имена свойств CSS, атрибуты HTML, короткие команды и идентификаторы API появляются среди объясняющих фраз; code — правильное место для таких кусков. Читатель быстро находит технический термин, а шрифт по умолчанию (часто моноширинный) подчёркивает, что это не обычное словарное слово. Блоки pre оставляйте для многострочных листингов — не для одного слова посреди абзаца.

Читаем пример

• Предложение — обычный текст абзаца
• Только имя свойства находится внутри code
• Читатели быстро находят технический токен
• Это не многострочный листинг — для него используйте pre
  Такой шаблон хорошо масштабируется: в одном предложении может быть несколько code без разрыва потока чтения. Частая ошибка — обернуть всю фразу в code или использовать pre для одного термина: оба варианта преувеличивают роль элемента и делают страницу визуально шумной.

Блоки с pre и code

pre означает предформатированный: пробелы и переводы строк сохраняются примерно так, как вы их набрали. Вложение code внутрь pre — ясный шаблон блока кода. В примерах HTML кодируйте угловые скобки. Без pre обычный HTML схлопывает последовательности пробелов и часто превращает переводы строк в один пробел — это уничтожает отступы, которые вы хотите показать ученикам. С pre структура сниппета остаётся читаемой. Связка pre+code сразу сообщает две идеи: «это предформатированный блок» и «содержимое — код». Многие style guides и подсветчики синтаксиса ожидают именно такое вложение.

Почему кодирование важно

Если написать сырой <p> внутри учебной страницы, браузер может создать настоящий абзац вместо показа символов <p>. Кодирование как <p> безопасно отображает пример. Сессия Entities углубляет символьные ссылки; здесь нужен только навык для угловых скобок в HTML-демо. То же относится к <div>, <span>, <a href="..."> и любому другому тегу, который вы хотите показать, а не активировать. Если вставить сырую разметку «просто чтобы посмотреть», документ урока меняет форму: появляются лишние элементы, вёрстка съезжает, и ученик думает, что пример неверен, хотя проблема — отсутствие кодирования. Тренируйте рефлекс: в HTML-примерах сначала < и >, затем проверьте в браузере, что текст выглядит как задумано.

Клавиатурный ввод и пример вывода

Используйте kbd, когда описываете клавиши, которые нажимает пользователь. Используйте samp, когда показываете пример вывода программы или команды. Будьте честны — не помечайте обычные слова как kbd лишь ради моноширинного вида. kbd сообщает «это клавиатурный ввод»; samp — «это то, что программа напечатала или вернула». Если речь о имени файла или свойстве CSS, правильный выбор по-прежнему code. Смешение ролей путает читателей и вспомогательные технологии. В гайдах по горячим клавишам несколько kbd подряд (например Ctrl + S) читаются естественно; в строке результата терминала samp ясно показывает, что текст — вывод, а не инструкция.

Практика в редакторе

1. Напишите предложение, где свойство font-size внутри code.
2. Добавьте блок pre+code с двумя короткими строками HTML с < и >.
3. Добавьте подсказку с kbd для сочетания сохранения.
4. По желанию: добавьте строку samp с вымышленным выводом команды.
5. Сохраните и откройте — убедитесь, что пробелы внутри pre сохранились, а закодированные теги показаны как текст.
6. Временно вставьте сырой <div> в блок без кодирования, обновите страницу, увидьте проблему, затем закодируйте его.
   Эта короткая лаборатория покрывает три главных шаблона сессии: строка, безопасный блок и клавиатура/вывод. Если шаг 6 вас не удивит — отлично, риск уже усвоен. Если вёрстка «разъедется», используйте этот момент как живое доказательство, почему кодирование в HTML-демо не опционально.

Ошибки, которые ломают примеры

• Многострочный код только в code без pre — переводы строк и отступы могут схлопнуться
• Вставка сырого <div> или <p> без кодирования — становится живым элементом
• Использование pre для длинных статей обычной прозы (он для предформатированного компьютерного текста, не для эссе)
• Пометка каждого технического слова через kbd, когда это не клавиатурный ввод
• Забытое закрытие pre или code, из‑за чего следующий текст остаётся в предформатированном стиле
  Эти ошибки часты именно потому, что браузер «помогает»: интерпретирует теги, нормализует пробелы и применяет стили до отсутствующего закрытия. Лечение — семантика плюс кодирование: правильная роль элемента и сущности для углов в HTML-примерах. После того как один раз исправите сниппет, ставший живым элементом, вы редко снова вставите сырую разметку не задумываясь.

Итог

• code помечает короткий строковый компьютерный текст
• pre сохраняет пробелы и переводы строк для блоков
• Сочетание pre и code — обычный многострочный шаблон
• Кодируйте < и > в примерах HTML как < и >
• kbd и samp покрывают клавиатурный ввод и пример вывода, когда эти роли уместны
• Выбирайте элемент по смыслу текста, а не только по шрифту по умолчанию
  С этими привычками учебные страницы показывают команды и сниппеты, не ломая вёрстку и не выполняя примерную разметку случайно. Дальше по курсу продолжайте считать демонстрационный HTML текстом для показа — безопасным, читаемым и семантически честным.