How to mark up a code snippet in HTML

Suppose, we want to mark up the following multi-line snippet of JavaScript code:

function hello(name) {
    return "Hello, " + name;
}
A JavaScript function that greets a user Joe with "Hello, Joe!"

Out of habit, let's start by wrapping it in a pre tag.

<pre>
function hello(name) {
    return "Hello, " + name;
}
</pre>
Mark up a code snippet with pre tag only. Looks good enough, but not conveyed good enough.

However, the HTML spec defines pre as

The pre tag represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

So, a pre tag can contain anything which conveys its semantic meaning at least partly through how its text is formatted, like a code snippet, a poem, or an ascii art.

Clearly, pre tag is not enough to represent a code snippet. How do we distinguish a code snippet from other pre-formatted content? By marking up the snippet with code, and then wrapping it in a pre tag.

<pre>
<code>
function hello(name) {
    return "Hello, " + name;
}
</code>
</pre>
Mark up a multi-line code snippet with code tag, and then wrap that code tag in a pre tag

Now, how do we convey that the language of the code snippet is JavaScript?

HTML spec has an answer to that too:

There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.

In short, assign to the code tag a class named language-name of the programming language.

<pre>
<code class="language-javascript">
function hello(name) {
    return "Hello, " + name;
}
</code>
</pre>
A code tag containing a JavaScript snippet should be given a class named language-javascript.

There is still one improvement left, which applies to pre tag in general.

Conveying formatting of a text can be difficult to a visually-challenged user, just like conveying an image is.

In order to assist such a user with an alternate description, wrap such semi-accessible content in a figure tag, and put the alternate description in a figcaption tag.

<figure>
<pre>
<code class="language-javascript">
function hello(name) {
    return "Hello, " + name;
}
</code>
</pre>
<figcaption>A code tag containing a JavaScript snippet should be given a class named language-javascript. </figcaption>
</figure>
Wrap a pre tag in a figure tag, and put a figcaption tag inside the figure tag that provides an alternate description to the contents of the pre tag