Pular para o conteúdo

Programando Soluções

4 dicas de HTML

dicas de html

Introdução

Essas dicas de HTML podem ajudar no dia a dia do desenvolvimento web.

São dicas simples, porém que fazem a diferença.

Atributo title

Esse atributo pode ser utilizado para algumas coisas.

A primeira delas é para colocar um tooltip, que é uma dica extra de texto sobre algum elemento.

Outra ponto é a acessibilidade, que um leitor de tela pode ser capaz de ler esse atributo e indicar ao usuário.

E por fim também pode ser utilizado para SEO (search engine optimize).

E para utilizá-lo, basta colocar esse atributo no elemento desejado, veja um exemplo do atributo na tag <p>.

<p title="Melhor blog de programação">Programando Soluções</p>

Atributo download

É possível criar um botão de download diretamente com HTML.

Para isso na tag <a> que é um link por padrão, você pode colocar o atributo download, e assim que esse botão for clicado, será feito o download do que está referenciado no link.

Por exemplo um PDF ou uma imagem, pode ser baixada diretamente, sem redirecionar a outra tela.

<a href="curriculo.pdf" download>Baixar</a>

Atributo contenteditable

É possível tornar um parágrafo editável somente com um atributo.

Eu já precisei utilizar esse recurso em uma tabela, onde era possível manipular o valor clicando diretamente na célula que receberia a edição.

Porém é possível utilizar também em parágrafos, caso seja um parágrafo onde o usuário pode editar.

Esse atributo é o contenteditable, é necessário colocar esse atributo e especificar como true.

<p contenteditable="true"> Esse texto pode ser editado, basta clicar em cima </p>

Accordion básico

Accordion é um recurso que pode ser utilizado para exibir uma parte de um texto, e ao clicar em cima, exibir mais detalhes.

O caso de uso que mais vejo isso é para FAQs de sites, aquela sessão onde tem perguntas frequentes, que você pode clicar sobre uma pergunta e aparece uma resposta.

Isso é um accordion, e antes era preciso utilizar CSS para criar esse efeito, agora é possível fazer nativamente com HTML.

Claro que para dar um estilo melhor, você ainda precisa de CSS, porém agora tem a possibilidade de fazer só com HTML.

<details>
  <summary>Dicas de HTML</summary>
  <p>Essas dicas de HTML são interessantes, é possível criar um accordion, botão de download e muito mais.</p>
</details>

Conclusão

Essas dicas de HTML, são simples, porém podem te ajudar no dia a dia.

Para ver outros canais onde o posto conteúdo sobre HTML veja os Links do Programando Soluções.

Referências

https://www.w3schools.com/tags/att_global_title.asp

https://www.a11yproject.com/posts/title-attributes/#:~:text=HTML%20title%20attributes%20are%20often,and%20possibly%20not%20even%20used.

https://www.w3schools.com/tags/att_a_download.asp

https://www.w3schools.com/tags/tag_summary.asp

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/contenteditable

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok