Skip to content
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

Closed
Facundo-Corradini opened this issue Jan 9, 2018 · 16 comments
Closed

[BETA] Applied Visual Design gives a bad idea of semantics #16448

Facundo-Corradini opened this issue Jan 9, 2018 · 16 comments
Labels
help wanted Open for all. You do not need permission to work on these. scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. status: discussing Under discussion threads. Closed as stale after 60 days of inactivity.

Comments

@Facundo-Corradini
Copy link

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

@raisedadead raisedadead added help wanted Open for all. You do not need permission to work on these. beta scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. labels Jan 9, 2018
@vkWeb
Copy link
Member

vkWeb commented Jan 9, 2018

@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 Applied Visual Design: Use the em Tag to Emphasize Text.

@manuhdez
Copy link

manuhdez commented Jan 9, 2018

I would love to help with this issue if needed

@vkWeb
Copy link
Member

vkWeb commented Jan 9, 2018

@manuhdez That's great. Please head over to our Contributing guidelines.
@raisedadead, @systimotic Should we implement this?

@raisedadead
Copy link
Member

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.

@Facundo-Corradini
Copy link
Author

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

@raisedadead
Copy link
Member

Hey there @Facundo-Corradini ! How is it going?

@Facundo-Corradini
Copy link
Author

Facundo-Corradini commented Jan 17, 2018

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
---1.A - will be covered later on in the hypothetical new text-level semantics section
---1.B - Just link a good source on text-level semantics

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
--- 2.A - will be covered later on in the hypothetical new text-level semantics section
--- 2.B - Just link a good source on text-level semantics

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?

@ahmaxed
Copy link
Member

ahmaxed commented Feb 5, 2018

@Facundo-Corradini, wha source do you have in mind for text-level semantics?

@ahmaxed
Copy link
Member

ahmaxed commented Feb 23, 2018

@raisedadead,
I think the challenges in question are the followings:

Set the font-size for Multiple Heading Elements
Set the font-weight for Multiple Heading Elements
Set the font-size of Paragraph Text
Set the line-height of Paragraphs

Until we find a good solution, I think we should differ them until after beta.
I could create a PR and remove them from seed.

@raisedadead
Copy link
Member

I could create a PR and remove them from seed.

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 raisedadead added the status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. label Feb 23, 2018
@ahmaxed
Copy link
Member

ahmaxed commented Feb 23, 2018

@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 : )

@Facundo-Corradini
Copy link
Author

Facundo-Corradini commented Feb 23, 2018

@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 <p> tags and adjusting the font size when trying to indicate some as headers. But that clarification is perfectly taken care of in the introduction of the <h> and <p> elements on the first section, as well as further clarified in Applied Visual Design: Adjust the Size of a Header Versus a Paragraph Tag:

The font size of header tags (h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.


The challenged sections are:

- Use the strong Tag to Make Text Bold: The <strong> element is for content that is of greater importance (such as a warning), while the <b> element is used to draw attention to text without indicating that it's more important. Both are simply bold by default, but their meaning is not the same

- Use the u Tag to Underline Text: This is probably the most complicated.. quoting the W3C recommendation:

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt. (...) In most cases, another element is likely to be more appropriate

As far as I know, in most languages we only want underlines for headers and such, and that should be addressed with styling the <h(x)> tag. Spelling errors is another use case, but we rarely would be in such scenario as deliberately writing and marking spell errors...

- Use the em Tag to Italicize Text:
<em> tag is for emphasis, for instance, if someone likes text semantics but it's not an expert (:p) , you can say "I'm not that into text semantics". The emphasis on the "that" word makes it clearer that, while are interested on it, it will not stop it from using incorrect things every now and then.
<em> is italicized by default, but nothing prevents us from giving the <em> tag whatever style we want. I usually add some bolder font-weight to it too.
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). Those are scenarios where the
<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>

-Use the del Tag to Strikethrough Text:
<del> is intended for deleted content, for instance, when marking content that has been deleted from a previous version of a document, such as git(hub) does with a strikethrough and a red background vs the non-strikethrough and green background for the new/changed parts.
The default output for <del> is a strikethrough, but you shouldn't use <del> every time you want to strikethrough text.
For instance, you might want to use the <s> element instead for things that are not longer relevant, for instance, when marking the reference regular price on a discounted product price tag.
Or just go with a <span> and style it as strikethrough if above definitions doesn't apply to your particular reason to strike through some 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.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
As well as MDN clarifications on use cases for each tag, for instance
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

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 :)

@homerrowsky
Copy link
Contributor

I think the title of the challenge and the use of <em> to italicize is completely wrong and should be renamed to:
Applied Visual Design: Using italic font-style to Italicize Text

And change the text from:

To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.

to

To italicize text, apply the css rule font-style: italic to the element you want to show in italic style.

And so, the use of <em> could have a more adequate appearance in the Applied Accessibility Section with its own challenge.

@ahmaxed
Copy link
Member

ahmaxed commented Aug 29, 2019

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?

@scissorsneedfoodtoo
Copy link
Contributor

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.

@moT01
Copy link
Member

moT01 commented Sep 18, 2020

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 🎉

@moT01 moT01 closed this as completed Sep 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Open for all. You do not need permission to work on these. scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. status: discussing Under discussion threads. Closed as stale after 60 days of inactivity.
Projects
None yet
Development

No branches or pull requests

9 participants