Discussion on: Stop using so many divs! An intro to semantic HTML

[Oyebanji Jacob Mayowa]

Awesome post!

you have a dangling </div> in the last HTML code block. :)

[Ken Bellows]

Oh no! 😫 Hahaha, thanks for pointing that out! Fixed it

[PauGuillamon]

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 ;)

[Ken Bellows]

Thanks, fixed!

[programmerabhi]

Which tag should I use to display the code?

[Ken Bellows]

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.