New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BETA] Applied Visual Design gives a bad idea of semantics #16448
Comments
@Facundo-Corradini You're right - thanks for reporting this. Will you be comfortable fixing this? If yes then please head over to our Contributing guidelines. You can rename the title to |
I would love to help with this issue if needed |
@manuhdez That's great. Please head over to our Contributing guidelines. |
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 |
Hey there @Facundo-Corradini ! How is it going? |
Hey guys, 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 Thoughts? |
@Facundo-Corradini, wha source do you have in mind for text-level semantics? |
@raisedadead, Set the font-size for Multiple Heading Elements Until we find a good solution, I think we should differ them until after beta. |
Do you mean remove them now, If yes. I think they are best left as it is so that we are able to collect more feedback. |
@raisedadead removing them for now and adding them after beta when they are reworded or categorized more precisely. If they give the wrong idea of semantics, maybe we should not let campers go through them and learn concepts incorrectly : ) |
@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:
to
And so, the use of |
Thank you everyone for your feedback. We will be moving away from subject based curriculum, and we look forward to have a better description of semantics in the upcoming project based curriculum. @scissorsneedfoodtoo, thoughts? |
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. |
Closing this as stale. If anyone wants to continue the conversation, feel free to leave a message and we can reopen this. Thanks and happy coding everyone 🎉 |
Challenge Name
https://beta.freecodecamp.org/en/challenges/applied-visual-design/use-the-em-tag-to-italicize-text
Issue Description
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.
Or even <cite> elements might be the right way to showcase italicized text, when referencing the name of a work or author, normally used together with a <q> or <blockquote>
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.
https://www.w3.org/TR/html5/textlevel-semantics.html#the-em-element
The text was updated successfully, but these errors were encountered: