3 Etiquetas HTML úteis que talvez não soubesse que existiam

Os programadores front-end têm de estar intimamente familiarizados com Etiquetas HTML uma vez que este é o seu ambiente natural no dia a dia. Aposto que todos conhecem algumas etiquetas básicas, tais como , , e assim por diante. Mas, por exemplo, sabia que pode sugerir um momento de quebra de palavras utilizando apenas HTML, sem CSS?

WBR

Vamos supor que está a trabalhar num sítio Web ou numa aplicação para um cliente alemão. Como sabe, as palavras em alemão podem ser muito longas. Por isso, tem o design com algum conteúdo de texto que tem de reproduzir em código e este conteúdo tem de surgir em momentos muito específicos. Aqui entra o para o ajudar.

Biscoitos de Natal

É isso mesmo! Com uma etiqueta tão simples, pode manipular o conteúdo do texto como quiser.

Mas e o suporte do browser? Bem, é bastante bom, para ser honesto. A maioria dos browsers compreende esta etiqueta, mas o Opera no Android e o Safari no iOS podem ter problemas.

MEDIDOR

Imagine que está a criar uma aplicação de gestão de armazenamento em disco. Precisa de mostrar na interface do utilizador a quantidade de armazenamento ainda disponível e quer torná-lo o mais acessível possível. Este é um caso de uso perfeito para o tag. Ela só vai mostrar o valor dentro de um intervalo definido. Outra coisa legal sobre essa tag são seus atributos:

• baixo → quando o valor atual é inferior ao valor baixo definido, a barra do medidor fica vermelha;
• ótimo → quando os valores actuais são superiores ao valor ótimo do atributo, a barra do contador fica verde;
• alto → quando o valor alto é inferior ao valor máximo e superior ao valor ótimo, a barra do contador fica cor de laranja. Caso contrário, fica verde.

Talvez também conheça uma etiqueta semelhante, que é progresso. Então, qual é a diferença entre elas? A etiqueta de progresso deve ser utilizada para tarefas em curso. Por outras palavras, utilize a etiqueta de progresso quando estiver a lidar com uma tarefa específica. Com a etiqueta de contador, deve ser utilizada para mostrar a utilização do disco ou da memória. Outra diferença é que a etiqueta de contador não é suportada pelo IE e essa é, de facto, a única desvantagem desta etiqueta.

DEL e INS

Já alguma vez se perguntou como criar um indicador acessível de partes de conteúdo eliminadas e adicionadas (diff no GitHub ou notificações por correio eletrónico do Jira quando o bilhete foi atualizado)? Só precisa de envolver o conteúdo eliminado com oetiqueta. Por exemplo: <del><p>Apenas conteúdo eliminado</p></del>. Para mostrar apenas a parte adicionada do conteúdo, pode utilizar a função exatamente da mesma forma. Esta etiqueta tem também dois atributos:

• cite → uri de um recurso que explica porque é que esta parte foi adicionada;
• datetime → data e hora da alteração.

Há, evidentemente, muito mais úteis etiquetas em HTML . Recomendo vivamente a utilização de todos eles quando for possível e adequado. Os seus clientes e utilizadores de aplicações agradecer-lhe-ão esta abordagem. Mas tenha cuidado, porque algumas etiquetas podem estar obsoletas. Pode sempre certificar-se de que uma etiqueta menos comum que pretende utilizar ainda é válida e tem um bom suporte em Documentação MDN.