Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I agree with everyone, very nice and useful post! Especially for me, who I'm not a web developer but I sometimes do some side and personal projects that imply web development!
As a side note, there's still one extra </div> in the code sample in The whole shebang: <article> section ;)
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
For semantics purposes, use the <code> tag. For display purposes, to make it looks like code, it depends:
If it's an inline code snippet in the middle of a sentence, you can just use the <code> tag: The <code>while(condition)</code> loop is useful for loops with an unknown number of iterations
If it's an independent block of code, possibly with multiple lines, and you don't need syntax highlighting, you can wrap your <code> tag in the "preformatted text" tag, <pre>:
Below is an example of a while loop used to walk a graph of nodes:
<pre><code>
const queue = [rootNode]
const prev = new Map()
const visited = new Set()
while (queue.length > 0) {
const node = queue.shift()
for (const child of node.children) {
if (visited.has(child)) {
continue
}
visited.add(child)
prev.set(child, node)
queue.push(child)
}
}
</code></pre>
If you are worried about syntax highlighting, you should still wrap the whole thing in a <code> tag, but you're probably going to want to bring in a library that does the very hard work of parsing and highlighting your code, like Prism or highlight.js.
Bottom line, though, no matter what extra stuff you're doing for display purposes, code should always be wrapped in a <code> tag.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Awesome post!
you have a dangling
</div>
in the last HTML code block. :)Oh no! 😫 Hahaha, thanks for pointing that out! Fixed it
I agree with everyone, very nice and useful post! Especially for me, who I'm not a web developer but I sometimes do some side and personal projects that imply web development!
As a side note, there's still one extra
</div>
in the code sample inThe whole shebang: <article>
section ;)Thanks, fixed!
Which tag should I use to display the code?
For semantics purposes, use the
<code>
tag. For display purposes, to make it looks like code, it depends:If it's an inline code snippet in the middle of a sentence, you can just use the
<code>
tag:The <code>while(condition)</code> loop is useful for loops with an unknown number of iterations
If it's an independent block of code, possibly with multiple lines, and you don't need syntax highlighting, you can wrap your
<code>
tag in the "preformatted text" tag,<pre>
:<code>
tag, but you're probably going to want to bring in a library that does the very hard work of parsing and highlighting your code, like Prism or highlight.js.Bottom line, though, no matter what extra stuff you're doing for display purposes, code should always be wrapped in a
<code>
tag.