Post History

86%

+11 −0

Q&A HTML tags versus CSS classes: is one preferred over the other for the same styling?

As a general rule of thumb, CSS defines presentation, while the HTML should express semantic meaning and document structure. The HTML spec is clear that the <code> element represents a fragm...

posted 3y ago by Canina‭ · edited 2y ago by Canina‭

Answer

#7: Post edited by

Canina‭ · 2022-05-02T19:09:15Z (over 2 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that **when a semantically appropriate HTML tag exists, to use that** and then *apply CSS to style the rendering* in whatever manner is preferred.
You can, of course, apply CSS classes to `<code>` to differentiate between different *types* of code and present them differently. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; border: 0.2em solid red; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code class="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* actually making this dangerous is left as an exercise to the reader */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even **if the browser fails to load or parse the CSS** for some reason, it still knows that *this is computer code* and should be rendered appropriately.
Also, while it's easy to focus on user agents that are visually focused web browsers, because that is what most of us likely use most of the time to interact with web content, **there are also many user agents that *aren't* primarily visual.** For example, **a screen reader** or other form of text-to-speech synthesis would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that user agent), but would probably have a good idea of the manner in which a `<code>` element is special. Therefore, even absent any media-specific styling, it would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.
Another case of a specialized user agent might be **a search engine crawler and indexer**, which may treat `<code>` (or `<dfn>`, or `<s>`, or `<cite>`, or any of a number of others) somehow differently compared to other text on the page. A search engine indexer might perhaps, for example, choose to de-emphasize `<s>` content when ordering search results according to the search query because [such content is no longer accurate or is no longer relevant](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element).
While it's possible to get the same *presentation* using, say, `` and appropriate CSS, just as in the case with `<code>`, doing so deprives non-visual user agents of the *signal* value of using the proper HTML tag to indicate the semantic meaning and only then styling that one as desired.
(As a bit of an aside, all of this is also why it's also preferable to, for example, use `` and `` instead of `` and `` respectively; although most visual browsers will likely render them similarly by default, the former specify *semantics*, while the latter have historically specified *presentation*. A text-to-speech synthesis may or may not recognize that the author intended heavy emphasis when using ``, but that is exactly what `` is specified to signal. Using proper *semantic* markup avoids the issue of the speech synthesis putting undue emphasis on a selected menu item just because it's displayed in boldface to visually indicate its status as selected, or putting unchanged emphasis on something that the author intended to be emphasized.)

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that **when a semantically appropriate HTML tag exists, to use that** and then *apply CSS to style the rendering* in whatever manner is preferred.
You can, of course, apply CSS classes to `<code>` to differentiate between different *types* of code and present them differently. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; border: 0.2em solid red; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code class="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* actually making this dangerous is left as an exercise to the reader */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even **if the browser fails to load or parse the CSS** for some reason, it still knows that *this is computer code* and should be rendered appropriately.
Also, while it's easy to focus on user agents that are visually focused web browsers, because that is what most of us likely use most of the time to interact with web content, **there are also many user agents that *aren't* primarily visual.** For example, **a screen reader** or other form of text-to-speech synthesis would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that user agent), but would probably have a good idea of the manner in which a `<code>` element is special. Therefore, even absent any media-specific styling, it would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.
Another case of a specialized user agent might be **a search engine crawler and indexer**, which may treat `<code>` (or `<dfn>`, or `<s>`, or `<cite>`, or any of a number of others) somehow differently compared to other text on the page. A search engine indexer might perhaps, for example, choose to de-emphasize `<s>` content when ordering search results according to the search query because [such content is no longer accurate or is no longer relevant](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element).
There are also **[translation engines](https://seirdy.one/2020/11/23/website-best-practices.html#posh-helps-translation-engines)**, both those built into browsers and those hosted as online services; proper semantic HTML will greatly help those in much the same ways that it helps text-to-speech synthesis.
While it's possible to get the same *presentation* using, say, `` and appropriate CSS, just as in the case with `<code>`, doing so deprives non-visual user agents of the *signal* value of using the proper HTML tag to indicate the semantic meaning and only then styling that one as desired.
(As a bit of an aside, all of this is also why it's also preferable to, for example, use `` and `` instead of `` and `` respectively; although most visual browsers will likely render them similarly by default, the former specify *semantics*, while the latter have historically specified *presentation*. A text-to-speech synthesis may or may not recognize that the author intended heavy emphasis when using ``, but that is exactly what `` is specified to signal. Using proper *semantic* markup avoids the issue of the speech synthesis putting undue emphasis on a selected menu item just because it's displayed in boldface to visually indicate its status as selected, or putting unchanged emphasis on something that the author intended to be emphasized.)

#6: Post edited by

Canina‭ · 2021-08-19T20:34:57Z (about 3 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to, for example, use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
~~You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:~~
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
~~code.dangerous { color: red !important; }~~
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code class="whole-program dangerous">
~~#include <stdlib.h>~~
~~int main(void) {~~
/* this really WOULD BE dangerous if a few changes were made */
~~return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");~~
}
</code>
~~One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.~~
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that **when a semantically appropriate HTML tag exists, to use that** and then *apply CSS to style the rendering* in whatever manner is preferred.
You can, of course, apply CSS classes to `<code>` to differentiate between different *types* of code and present them differently. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; border: 0.2em solid red; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code class="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* actually making this dangerous is left as an exercise to the reader */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even **if the browser fails to load or parse the CSS** for some reason, it still knows that *this is computer code* and should be rendered appropriately.
Also, while it's easy to focus on user agents that are visually focused web browsers, because that is what most of us likely use most of the time to interact with web content, **there are also many user agents that *aren't* primarily visual.** For example, **a screen reader** or other form of text-to-speech synthesis would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that user agent), but would probably have a good idea of the manner in which a `<code>` element is special. Therefore, even absent any media-specific styling, it would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.
Another case of a specialized user agent might be **a search engine crawler and indexer**, which may treat `<code>` (or `<dfn>`, or `<s>`, or `<cite>`, or any of a number of others) somehow differently compared to other text on the page. A search engine indexer might perhaps, for example, choose to de-emphasize `<s>` content when ordering search results according to the search query because [such content is no longer accurate or is no longer relevant](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element).
While it's possible to get the same *presentation* using, say, `` and appropriate CSS, just as in the case with `<code>`, doing so deprives non-visual user agents of the *signal* value of using the proper HTML tag to indicate the semantic meaning and only then styling that one as desired.
(As a bit of an aside, all of this is also why it's also preferable to, for example, use `` and `` instead of `` and `` respectively; although most visual browsers will likely render them similarly by default, the former specify *semantics*, while the latter have historically specified *presentation*. A text-to-speech synthesis may or may not recognize that the author intended heavy emphasis when using ``, but that is exactly what `` is specified to signal. Using proper *semantic* markup avoids the issue of the speech synthesis putting undue emphasis on a selected menu item just because it's displayed in boldface to visually indicate its status as selected, or putting unchanged emphasis on something that the author intended to be emphasized.)

#5: Post edited by

Canina‭ · 2021-08-19T16:18:45Z (about 3 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to, for example, use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
~~<code style="whole-program dangerous">~~
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to, for example, use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code class="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

#4: Post edited by

Canina‭ · 2021-08-19T16:16:36Z (about 3 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to, for example, use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

#3: Post edited by

Canina‭ · 2021-08-19T16:11:44Z (about 3 years ago)

Copy Link

Raw

Markdown

~~As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.~~
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code.filename { font-weight: bold; }
~~code.whole-program { font-size: 80%; }~~
code.dangerous { color: red !important; }
~~@media aural code.dangerous { /* whatever makes sense */ }~~
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
~~One benefit of this is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.~~
There are also user agents that aren't primarily visual; for example, a screen reader would have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore would have a much better chance of doing something reasonable with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure. (As a bit of an aside, this is why it's preferable to use `` and `` instead of `` and `` respectively; although most browsers will likely render them similarly by default, the former specify *semantics*, while the latter specify *presentation*.)
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code { font-family: monospace; }
code.filename { font-weight: bold; }
code.whole-program { white-space: pre; font-size: 80%; }
code.dangerous { color: red !important; }
@media speech { code.dangerous { /* whatever makes sense */ } }
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this approach is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would likely have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is in a way meaningful to that UA), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore even absent any media-specific styling would have a much better chance of doing something *reasonable* with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

#2: Post edited by

Canina‭ · 2021-08-19T10:38:59Z (about 3 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code.filename { font-weight: bold; }
code.whole-program { font-size: 80%; }
code.dangerous { color: red !important; }
@media aural code.dangerous { /* whatever makes sense */ }
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
~~/* this really WOULD BE dangerous if the "boot" was lowercase */~~
~~return system("/bin/rm -rf /BOOT/*");~~
}
</code>
One benefit of this is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore would have a much better chance of doing something reasonable with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.
The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.
The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via ``.
Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.
You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:
code.filename { font-weight: bold; }
code.whole-program { font-size: 80%; }
code.dangerous { color: red !important; }
@media aural code.dangerous { /* whatever makes sense */ }
and then select among those as necessary in the HTML using something like
<code style="whole-program dangerous">
#include <stdlib.h>
int main(void) {
/* this really WOULD BE dangerous if a few changes were made */
return ssyysstteemm("/bin/true /bin/rm -rf /BOOT/*");
}
</code>
One benefit of this is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.
There are also user agents that aren't primarily visual; for example, a screen reader would have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore would have a much better chance of doing something reasonable with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

#1: Initial revision by

Canina‭ · 2021-08-19T10:01:37Z (about 3 years ago)

Copy Link

Raw

Markdown

As a general rule of thumb, CSS defines *presentation*, while the HTML should express *semantic meaning* and document structure.

The HTML spec is clear that [the `<code>` element represents a *fragment* of computer code](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element), and even goes as far as to say that this could be pretty much anything from an element name or a file name to a "computer program". So to use `<code>` for a variable name (of which function parameters are generally one case) would seem to be *semantically* correct.

The alternative would be to apply a class, either to the `<td>` element as you discuss in the question, or to a portion of its contents for example via `<span>`.

Although I don't have anything formal to back it up, my preference tends to be that *when a semantically appropriate HTML tag exists, to use that* and *apply CSS to style the rendering* in whatever manner is preferred.

You can also apply CSS classes to `<code>` to differentiate between different *types* of code. For example, you could have CSS classes along the lines of:

    code.filename { font-weight: bold; }
    code.whole-program { font-size: 80%; }
    code.dangerous { color: red !important; }
    @media aural code.dangerous { /* whatever makes sense */ }

and then select among those as necessary in the HTML using something like

    <code style="whole-program dangerous">
        #include <stdlib.h>
        int main(void) {
            /* this really WOULD BE dangerous if the "boot" was lowercase */
            return system("/bin/rm -rf /BOOT/*");
        }
    </code>

One benefit of this is that even if the browser fails to load the CSS for some reason, it still knows that *this is computer code* and should be rendered appropriately.

There are also user agents that aren't primarily visual; for example, a screen reader would have no idea of the manner in which a `<td class="code">` is special (unless the CSS indicates how it is), but would probably have a good idea of the manner in which a `<code>` element is special, and therefore would have a much better chance of doing something reasonable with `<code>` than with `<td class="code">`. This might be less of a concern for technical documentation, but for some types of content, it can potentially make a significant difference for the person consuming the content.

Communities

Post History