DEV Community

loading...

Discussion on: 10 HTML Elements You Didn't Know You Needed

Collapse
fluffy profile image
fluffy

So, one big thing I'd mention on this article in general is that you're using images to show the code, which isn't very accessible. It would be much better to use fenced code blocks (three backticks); for example,

<blockquote cite="http://example.com/">
    It was the best of times, it was the worst of times.
</blockquote>

The code for the above being:

`​``html
<blockquote cite="http://example.com/">
    It was the best of times, it was the worst of times.
</blockquote>
``​`
Collapse
emmabostian profile image
Collapse
inkones profile image
Ines Kondor

Thanks a lot for the hint - is there an equivalent for this "trick" in HTML, please?

Collapse
fluffy profile image
fluffy • Edited

The three-backticks stuff is specific to Markdown, although it's usually handled by a library such as Pygments, which you can certainly use on its own as well.

YOu can also use the <pre><code>...</code></pre> tag to preformat stuff although that won't do syntax highlighting and you'll need to convert < to &lt;. (Technically you only need <pre> but that's a visual tag while <code> is the semantic tag to say what the text represents.)

Thread Thread
inkones profile image
Ines Kondor

Thank you very much for your quick response.

Yes, it is the need to convert the angle brackets plus also keeping the indentation/readability intact that is kind of odd to do still "manually" in 2020. (Am sure there are online converters or we could write one ourelves, but still ... hoping for a more efficient way)