`code` element clarifiction

Tell us what’s happening:

I am currently working on building my first technical document page, and for user story number 6, it is asking for the use of five code elements. This is the first time I have come across this element. I have been reading up on it, but I am confused as to their functionality. I am unsure as to why I want to put this in my code. (besides it being a user story).

Thanks

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0.

Link to the challenge:

1 Like

The <code> element is a “semantic tag”, that indicates the content is, as the name implies, a fragment of computer code. It’s like <em> or <strong> that way, in that it has its own default styling – in this case, the text inside of <code> will use a monospace font.

The reason to use semantic tags like <code> and not just a <div> with a class is partly for notational shorthand (it’s shorter to type and clearer to read) and partly to help alternative user agents like screen readers, which might switch to a different mode when reading out code (I’m not aware of screen readers that do this for code, but they do treat other semantic tags differently). For <code> in particular, a javascript-based syntax highlighting application can target code elements without having to know about any particular class names.

3 Likes