Freecodecamp: [BETA] Applied Visual Design dá uma ideia ruim de semântica

@ Facundo-Corradini Você está certo - obrigado por relatar isso. Você se sentirá confortável consertando isso? Se sim, por favor, consulte nossas diretrizes de contribuição . Você pode renomear o título para Applied Visual Design: Use the em Tag to Emphasize Text .

Eu adoraria ajudar com esse problema, se necessário

@manuhdez Isso é ótimo. Consulte nossas diretrizes de contribuição .
@raisedadead , @systimotic Devemos implementar isso?

Hi @ Facundo-Corradini, agradece por levantar a preocupação e reservar um tempo para analisar o desafio.

Você pode nos ajudar com algumas sugestões de mudanças que devem ser feitas no palavreado que ajuda a esclarecer a importância dessa diferença?

Eu concordo, a linguagem atual pode colocar conceitos incorretos na aprendizagem.

Coisa certa. Deixe-me trabalhar em uma proposta, depois vou carregá-la e, se você concordar, posso trabalhar nas alterações.

Não é tão simples, pois a seção trata de Design Visual, não de semântica. Então, talvez devêssemos chamar a seção de "texto em itálico" e explicar o caso de uso para cada tag

Olá @ Facundo-Corradini! Como vão as coisas?

Ei pessoal,

Tenho pensado em como fazer isso e trabalhado no currículo para ver onde ele se encaixa melhor. Mas não há uma maneira realmente fácil de sair disso. Qualquer tag que selecionarmos deixará de fora casos de uso para os outros, e tentar espremer os diferentes casos para cada estilo em um único desafio parecerá restrito. A seção trata de design visual aplicado de qualquer maneira, não de semântica.

Uma vez que algumas das semânticas estruturais são abordadas na seção de acessibilidade, talvez a adição de alguma semântica em nível de texto seja o caminho a percorrer. Ou talvez como um tempo limite mais tarde na seção de design visual aplicado. Mas não tenho certeza se ainda estamos dentro do prazo para as mudanças curriculares (acredito que não, não é?)

Portanto, as opções seriam:

0 - Deixe o desafio como está

1- Altere o título para "enfatizar texto ..." e explique que existem outras maneiras de colocar o texto em itálico, que
--- 1.A - será abordado mais tarde na nova seção de semântica de nível de texto hipotética
--- 1.B - Basta vincular uma boa fonte sobre semântica em nível de texto

2- Alterar todos os desafios de design visual em relação ao estilo do texto, como sublinhados, tachados, espessura da fonte e itálico em uma tag neutra, como span, e transformá-los em desafios baseados em CSS, explicando que existem diferentes tags que aplicam o estilo por padrão, que novamente
--- 2.A - será abordado mais tarde na nova seção de semântica de nível de texto hipotética
--- 2.B - Basta vincular uma boa fonte sobre semântica em nível de texto

Estou inclinado a pensar que a melhor solução é 2A, com 1A sendo um bom compromisso.

Ainda sendo realista, provavelmente 1B é o caminho. Um título que faz sentido, com uma descrição que aborda o problema e um link para os melhores campistas mergulharem ... sem a necessidade de alterar os desafios reais ou o currículo

Pensamentos?

@ Facundo-Corradini, que fonte você tem em mente para a semântica em nível de texto?

@raisedadead ,
Acho que os desafios em questão são os seguintes:

Defina o tamanho da fonte para vários elementos de cabeçalho
Defina a espessura da fonte para vários elementos de cabeçalho
Defina o tamanho da fonte do texto do parágrafo
Defina a altura da linha dos parágrafos

Até encontrarmos uma boa solução, acho que devemos diferenciá-los até depois do beta.
Eu poderia criar um PR e removê-los da semente.

Eu poderia criar um PR e removê-los da semente.

Quer dizer removê-los agora, se sim. Acho que é melhor deixá-los como estão para que possamos coletar mais feedback.

@raisedadead removendo-os por agora e adicionando-os após a versão beta quando forem reformulados ou categorizados com mais precisão. Se eles derem uma ideia errada da semântica, talvez não devêssemos deixar os campistas examiná-los e aprender conceitos incorretamente:)

@ahmadabdolsaheb desculpe de alguma forma eu perdi as notificações

As que você citou (tamanho da fonte, espessura da fonte e altura da linha) não estão diretamente relacionadas à semântica. Exceto se estiver fazendo algo estranho, como ter todos os seus textos como tags <p> e ajustar o tamanho da fonte ao tentar indicar alguns como cabeçalhos. Mas esse esclarecimento é perfeitamente atendido na introdução dos elementos <h> e <p> na primeira seção, bem como mais esclarecido em _Projeto Visual Aplicado: Ajuste o Tamanho de um Cabeçalho versus um Tag de parágrafo_:

O tamanho da fonte das tags de cabeçalho (h1 a h6) geralmente deve ser maior do que o tamanho da fonte das tags de parágrafo. Isso torna mais fácil para o usuário entender visualmente o layout e o nível de importância de tudo na página. Use a propriedade font-size para ajustar o tamanho do texto em um elemento.

As seções desafiadas são:

- Use a tag forte para deixar o texto em negrito: o elemento <strong> é para conteúdo de maior importância (como um aviso), enquanto o elemento <b> é usado para chamar a atenção para o texto sem indicando que é mais importante. Ambos estão simplesmente em negrito por padrão, mas seu significado não é o mesmo

- Use a tag u para sublinhar o texto: esta é provavelmente a mais complicada .. citando a recomendação W3C:

O elemento u representa um intervalo de texto com uma anotação não textual não articulada, embora explicitamente renderizada, como rotular o texto como um nome próprio em texto chinês (uma marca de nome próprio chinês) ou rotular o texto como um erro ortográfico. (...) Na maioria dos casos, outro elemento é provavelmente mais apropriado

Pelo que eu sei, na maioria dos idiomas, queremos apenas sublinhados para cabeçalhos e coisas assim, e isso deve ser resolvido com o estilo da tag <h(x)> . Erros de ortografia é outro caso de uso, mas raramente estaríamos em um cenário como escrever e marcar erros ortográficos deliberadamente ...

- Use a tag em para colocar o texto em itálico:
<em> tag é para ênfase, por exemplo, se alguém gosta de semântica de texto, mas não é um especialista (: p), você pode dizer "Eu não _that_ em semântica de texto". A ênfase na palavra "aquela" deixa mais claro que, embora estejamos interessados ​​nela, não os impedirá de usar coisas incorretas de vez em quando.
<em> está em itálico por padrão, mas nada nos impede de dar à tag <em> qualquer estilo que desejamos. Eu geralmente adiciono alguma espessura de fonte mais ousada a ele também.
Da mesma forma, nem todo texto em itálico se destina a fornecer ênfase. Pense em definições, palavras técnicas ou aquelas escritas em uma língua estrangeira (normalmente expressões latinas). Esses são cenários onde o
<i> tag é a escolha certa.
Ou mesmo <cite> elementos podem ser a maneira certa de mostrar texto em itálico, ao fazer referência ao nome de uma obra ou autor, normalmente usado junto com um <q> ou <blockquote>

-Use a del Tag para rasurar o texto :
<del> destina-se a conteúdo excluído, por exemplo, ao marcar o conteúdo que foi excluído de uma versão anterior de um documento, como git (hub) com tachado e um fundo vermelho vs não tachado e fundo verde para as peças novas / alteradas.
A saída padrão para <del> é tachado, mas você não deve usar <del> toda vez que quiser tachar o texto.
Por exemplo, você pode querer usar o elemento <s> vez de coisas que não são mais relevantes, por exemplo, ao marcar o preço normal de referência em uma etiqueta de preço de produto com desconto.
Ou simplesmente escolha <span> e estilize-o como tachado se as definições acima não se aplicarem ao seu motivo específico para riscar algum texto.

Todas essas seções são, no entanto, essenciais para o Design Visual Aplicado.

Portanto, minha recomendação não é excluir nem adiar, mas mantê-los como estão e adicionar um pouco de esclarecimento sobre as seções comprometidas, talvez vinculadas a uma fonte externa sobre semântica em nível de texto.

Minha fonte favorita de semântica em nível de texto é a recomendação do W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
Bem como esclarecimentos MDN sobre casos de uso para cada tag, por exemplo
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Pode ser um pouco técnico demais, então posso cuidar de pesquisar algumas opções mais amigáveis ​​para novatos, ou escrever uma para mim mesmo no blog do freeCodeCamp se você quiser :)

Acho que o título do desafio e o uso de <em> para itálico estão completamente errados e devem ser renomeados para:
Projeto visual aplicado: usando o estilo de fonte itálico para itálico do texto

E mude o texto de:

Para enfatizar o texto, você pode usar a tag em. Isso exibe o texto em itálico, pois o navegador aplica o CSS do estilo de fonte: itálico; para o elemento.

para

Para colocar o texto em itálico, aplique a regra css _font-style: italic_ ao elemento que deseja mostrar em itálico.

E assim, o uso de <em> poderia ter uma aparência mais adequada na Seção Acessibilidade Aplicada com seu próprio desafio.

Obrigado a todos por seus comentários. Estaremos nos afastando do currículo baseado em disciplinas e esperamos ter uma descrição melhor da semântica no próximo currículo baseado em projetos.

@scissorsneedfoodtoo , pensamentos?

Obrigado @Facundo-Corradini por suas explicações detalhadas e outros por ponderar. Muitos dos projetos ainda estão sendo desenvolvidos e serão lançados em uma base contínua assim que forem testados. Pode valer a pena manter esse problema em aberto por enquanto, caso alguém possa atualizar as descrições nos desafios de design visual atuais.

Fechando isso como obsoleto. Se alguém quiser continuar a conversa, fique à vontade para deixar uma mensagem e podemos reabrir. Obrigado e feliz programando a todos 🎉