<code>

Тег <code> используется для вывода фрагментов программного кода.

        
          
          <code>  const element = document.getElementById('some-id')</code>
          <code>
  const element = document.getElementById('some-id')
</code>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <code> по умолчанию строчный и браузеры не применяют к тексту внутри него никакого форматирования, кроме font-family: monospace, и не подсвечивают синтаксис. Они не анализируют содержимое и не делают никаких предположений, на каком языке программирования написан вставленный код.

Изначально <code> предназначен для вывода информации во фразовом контексте. Например, мы можем вставить код в середину предложения.

        
          
          <p>Пожалуй, <code>i</code> — самое часто встречающееся имя переменной.</p>
          <p>Пожалуй, <code>i</code> — самое часто встречающееся имя переменной.</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если мы хотим вывести блок кода, то нужно дополнительно использовать тег <pre> для вывода кода с сохранением форматирования.

        
          
          <pre><code>  for(let i = 0; i < 10; i++){    console.log(i)  }</code></pre>
          <pre><code>
  for(let i = 0; i < 10; i++){
    console.log(i)
  }
</code></pre>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если мы хотим красивого форматирования и подсветки синтаксиса, мы должны использовать сторонние инструменты и дополнительно пометить код, например, при помощи атрибута class. Для этого обычно используются библиотеки, такие как highlight.js и prism.js.

Например, они генерируют HTML приблизительно такого вида:

        
          
          <pre class="block-code font-theme font-theme--code" data-lang="html">  <code class="block-code__highlight">    <span class="token keyword">const</span>    element    <span class="token operator">=</span>    <span class="token dom variable">document</span>    <span class="token punctuation">.</span>    <span class="token method function property-access">getElementById</span>    <span class="token punctuation">(</span>    <span class="token string">'#some-id'</span>    <span class="token punctuation">)</span>  </code></pre>
          <pre class="block-code font-theme font-theme--code" data-lang="html">
  <code class="block-code__highlight">
    <span class="token keyword">const</span>
    element
    <span class="token operator">=</span>
    <span class="token dom variable">document</span>
    <span class="token punctuation">.</span>
    <span class="token method function property-access">getElementById</span>
    <span class="token punctuation">(</span>
    <span class="token string">'#some-id'</span>
    <span class="token punctuation">)</span>
  </code>
</pre>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А пользователи его увидят так:

        
          
          const element = document.getElementById('some-id')
          const element = document.getElementById('some-id')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот пример кода был обёрнут в теги <pre> и <code> (вы можете проверить это, выбрав фрагмент в инспекторе элементов), а подсветку синтаксиса обеспечила библиотека prism.js.

У <code> есть встроенная роль code. Хотя скринридеры пока не рассказывают о ней пользователям и не изменяют режим взаимодействия с таким содержимым, роль добавляет тегу семантический вес.

<code> используется для вывода любой информации, которая может быть обработана компьютером как программный код. Помимо непосредственно кода, сюда также относятся названия файлов, конфигурационные файлы, XML-элементы и т. д.