Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Post History

77%
+5 −0
Q&A What class attributes can we (usefully) use in HTML tags?

Following up on Markup documentation? and What html tags can we use in posts?: I see that the site supports <section> tags in posts, and that these can have a class attribute. Recently I sa...

1 answer  ·  posted 1y ago by Karl Knechtel‭  ·  edited 1y ago by Karl Knechtel‭

#6: Post edited by user avatar Karl Knechtel‭ · 2023-08-05T19:36:31Z (about 1 year ago)
Add reference per trichoplax's comment
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently (and following a little experimentation), with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based off CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently (and following a little experimentation), with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines [is necessary](https://meta.codidact.com/posts/287279) in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based off CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
#5: Post edited by user avatar Karl Knechtel‭ · 2023-08-05T16:47:37Z (about 1 year ago)
fix typo
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently (and following a little experimentation), with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently (and following a little experimentation), with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based off CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
#4: Post edited by user avatar Karl Knechtel‭ · 2023-08-05T16:46:27Z (about 1 year ago)
add yellow is-warning example
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently, with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently (and following a little experimentation), with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage', 'baked beans']`
  • </section>
  • <section class='notice is-warning'>
  • ### Iffy meal
  • `[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
#3: Post edited by user avatar Karl Knechtel‭ · 2023-08-04T14:20:07Z (over 1 year ago)
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently, with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b16decode('277370616D272C20'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b16decode('277370616D272C20'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently, with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
#2: Post edited by user avatar Karl Knechtel‭ · 2023-08-04T14:17:25Z (over 1 year ago)
improve cuisine
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently, with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(__import__('base64').b16decode('5B'+('277370616D272C20'*42)+'5D'))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(__import__('base64').b16decode('5B'+('277370616D272C20'*42)+'5D'))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
  • Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):
  • I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.
  • Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)
  • Apparently, with Markdown source like
  • ```
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b16decode('277370616D272C20'*42))`
  • </section>
  • ```
  • We can get a result like:
  • <section class='notice is-success'>
  • ### Pleasant meal
  • `['eggs', 'bacon', 'sausage']`
  • </section>
  • <section class='notice is-danger'>
  • ### Dangerous meal
  • `eval(b'[%s]'%__import__('base64').b16decode('277370616D272C20'*42))`
  • </section>
  • (For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)
  • There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.
  • Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?
#1: Initial revision by user avatar Karl Knechtel‭ · 2023-08-04T14:14:19Z (over 1 year ago)
What class attributes can we (usefully) use in HTML tags?
Following up on [Markup documentation?](https://meta.codidact.com/posts/275860) and [What html tags can we use in posts?](https://meta.codidact.com/posts/277420):

I see that the site supports `<section>` tags in posts, and that these can have a `class` attribute.

Recently I saw [an answer](https://software.codidact.com/posts/289228/289234#answer-289234) on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old [feature request on meta.SO](https://meta.stackoverflow.com/questions/328632/add-visual-difference-for-negative-code-examples) get reopened just today for something similar...)

Apparently, with Markdown source like
```
<section class='notice is-success'>

### Pleasant meal
`['eggs', 'bacon', 'sausage']`
</section>
<section class='notice is-danger'>

### Dangerous meal
`eval(__import__('base64').b16decode('5B'+('277370616D272C20'*42)+'5D'))`
</section>
```

We can get a result like:

<section class='notice is-success'>

### Pleasant meal
`['eggs', 'bacon', 'sausage']`
</section>
<section class='notice is-danger'>

### Dangerous meal

`eval(__import__('base64').b16decode('5B'+('277370616D272C20'*42)+'5D'))`
</section>

(For these examples, the blank line above the `###` lines appears to be necessary in order to get the expected `<h3>` formatting. Also, a blank line is needed after the `</section>` tag to make *this* paragraph work properly.)

There is nowhere to define custom CSS for this, so I assume it is working based of CSS classes already defined in the page.

Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides `<section>`)?