Как правильно верстать блоки кода и его отдельные элементы

Указание языка кода для элемента <code>

Фрагмент компьютерного кода обычно помещается в элемент <code>. Фрагментом может быть всё, что каким-либо образом связано с программным обеспечением компьютера: HTML-элемент, название файла, название программы и тому подобные вещи. Одиночным (см. далее) элементом <code> оформляются небольшие куски кода, находящиеся непосредственно в обычном тексте. Например:

<p>The <code>code</code> element represents a fragment of computer code.</p>

Для вёрстки блоков кода применяется конструкция <pre><code>:

<p>Программа <code>foo-bar</code> выглядит так:</p>

<pre><code>
var foo = 'bar';
alert( foo ); // bar
</code></pre>

В этом случае все пробельные символы в коде будут печататься как есть, так как по умолчанию для элемента <pre> в CSS определено свойство white-space со значением pre.

Для вёрстки блоков компьютерного вывода и ввода пользователя используются, в сочетании с <pre>, элементы <samp> и <kbd> соответственно:

<pre>

	<samp>Хотите?</samp>

	<kbd>Да.</kbd>

	<samp>Получите!</samp>

</pre>

Указание языка кода для элемента <code>

Если вы хотите как-то обозначить язык, которому принадлежит код, то это лучше сделать так:

<p>The <code class="language-html">code</code> element represents a fragment of computer code.</p>


<p>Программа <code>foo-bar</code> выглядит так:</p>

<pre><code class="language-javascript">
var foo = 'bar';
alert( foo ); // bar
</code></pre>

То есть с помощью атрибута class и соответствующего его значения, начинающегося с language-.

Одна из целей указания языка с помощью атрибута class и его соответствующего значения, начинающегося с language-* — подсветка синтаксиса; в частности, например, это используется популярной JavaScript-библиотекой Prism.

02.12.2015