Veja nesse artigo
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.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