Freecodecamp: [BETA] Applied Visual Design gives a bad idea of semantics

Created on 9 Jan 2018  ·  16Comments  ·  Source: freeCodeCamp/freeCodeCamp

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.

\ tag is for emphasis, the fact that it applies italics by default is almost a coincidence. But nothing prevents us from giving the \ 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 \ tag is the right choice.
Or even \ elements might be the right way to showcase italicized text, when referencing the name of a work or author, normally used together with a \ or \

Same thing for \ and \

I understand it's a very basic level introduction, so probably teaching them to use \ and \ 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

help wanted learn discussing

Most helpful comment

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.

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

I would love to help with this issue if needed

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

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
---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?

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

@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.

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

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.

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 🎉

Was this page helpful?
0 / 5 - 0 ratings
bleepcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners.
Source for this page: Source

Popular programming languages
Popular GitHub projects
More GitHub projects

© 2021 bleepcoder.com - Contact
Made with in the Dominican Republic.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.