[BETA] Applied Visual Design gives a bad idea of semantics #16448
It seems the sections about "text styling" are giving a totally wrong idea of semantics. Titles like "Use the em Tag to Italicize Text" really gives a really bad idea of using semantic tags for presentation purposes.
<em> tag is for emphasis, the fact that it applies italics by default is almost a coincidence. But nothing prevents us from giving the <em> tag whatever style we want. In the same way, not every italicized text is meant to provide emphasis. Think of definitions, technical words, or those written in a foreign language (normally Latin expressions). There’s scenarios where the humble <i> tag is the right choice.
Same thing for <strong> and <b>
I understand it's a very basic level introduction, so probably teaching them to use <em> and <strong> is somewhat better(I'm more convinced in the strong/b case... the em/i one is not so simple), but planting wrong ideas from the beginning might not be the better route.
The text was updated successfully, but these errors were encountered:
Hi @Facundo-Corradini thanks for raising the concern and taking the time to review the challenge.
Can you please help us with some suggested changes that should be done to the verbiage that helps clarify the importance of this difference?
I agree, the current verbiage may put up incorrect concept into learning.
Sure thing. Let me work on a proposal, then I'll upload it and if you agree I can work in the changes.
It's not so simple, as the section is actually dealing with Visual Design, not semantics. So maybe we should just call the section "italicize text" and explain the use case for each tag
Been thinking how to go with this and working through the curriculum to see where it would fit better. But there's no really easy way out of this. Any tag we would select will leave out use cases for the others, and trying to squeeze the different cases for each style on a single challenge will feel cramped . The section is dealing with applied visual design anyway, not semantics.
Since some of the structural semantics are covered in the accessibility section, maybe adding some text-level semantics there would be the way to go. Or perhaps as a timeout later on in the applied visual design section. But I'm not sure if we are still on time for curriculum changes (I believe we are not, are we?)
So options would be:
0 - Leave the challenge as is
1- Change the title to "emphasise text..." and explain there are other ways to make text italicised, which
2- Change all visual design challenges regarding text-styling such as underlines, strike-through, font-weight and italics into a neutral tag such as span, and turn them into CSS-based challenges, explaining that there are different tags that apply the style by default, which again
I'm inclined to think the best solution is 2A, with 1A being a really good compromise.
Yet being realistic, probably 1B is the way. A title that makes sense, with a description that addresses the issue, and a link for the best campers to dive into... without needing to change the actual challenges or the curriculum
Set the font-size for Multiple Heading Elements
Until we find a good solution, I think we should differ them until after beta.
@ahmadabdolsaheb sorry somehow I missed the notifications
The ones you quoted (font-size, font-weight, and line-height) are not directly related to semantics. Except if doing something weird, like having all your texts as
The challenged sections are:
- Use the strong Tag to Make Text Bold: The
- Use the u Tag to Underline Text: This is probably the most complicated.. quoting the W3C recommendation:
As far as I know, in most languages we only want underlines for headers and such, and that should be addressed with styling the
- Use the em Tag to Italicize Text:
-Use the del Tag to Strikethrough Text:
All those sections are, nonetheless, essential for Applied Visual Design.
So my recommendation is not deleting nor deferring, but keep them as is and add a little clarification on the compromised sections, perhaps linked to an external source on text-level semantics.
My favourite source for text-level semantics is the W3C recommendation.
Might be a little too technical though, so I can take care of searching for some more newbie-friendly options, or write one myself at freeCodeCamp blog if you'd like to :)
I think the title of the challenge and the use of
And change the text from:
And so, the use of
Thank you @Facundo-Corradini for your detailed explanations and others for weighing in. Many of the projects are still being developed, and will be released on a rolling basis once they've been tested. It might be worth keeping this issue open for now, in case someone can update the descriptions in the current visual design challenges.