A tecnologia avança a passos largos. Frameworks, técnicas, tipos de servidor, metodologias, padrões novos surgem todos os anos. Ainda assim, o bom e velho HTML continua sendo fundamental para a criação de websites, blogs, e-commerce, sistemas web e outras aplicações na internet. Tudo termina sendo renderizado como HTML. A linguagem de marcação é responsável por definir a estrutura e o conteúdo de uma página web, permitindo que o navegador possa exibi-la de forma adequada para o usuário.
Com a evolução do HTML, a linguagem ganhou novos recursos, como suporte a vídeos, áudios, gráficos vetoriais, geolocalização, entre outros. Esses recursos permitem que os desenvolvedores criem aplicações mais complexas e ricas em conteúdo, tornando a experiência do usuário na web cada vez mais interativa.
O HTML foi criado trinta anos atrás e sua última grande atualização (HTML 5) foi lançada em 2014. Com décadas de estrada, existem atributos que permanecem obscuros. São funcionalidades que são suportadas pelos navegadores, mas que poucos conhecem. Listamos aqui sete deles e talvez seja uma boa ideia ampliar seu arsenal e adotar alguns desses atributos no seu próximo projeto.
1) Atributo label para <optgroup>
Vamos abrir os trabalhos com um atributo pouco usado para uma tag pouco usada: <optgroup>. Se você tem uma lista enorme de itens nas opções de um menu drop-down <select>, é possível agrupá-las em categorias visíveis usando o elemento <optgroup>.
As categorias podem ser nomeadas usando seu atributo label. Desta forma, cada <optgroup> tem um atributo label que define um título para cada grupo – mas esses títulos não podem ser selecionados pelo usuário. Como uma dica bônus, você também pode usar o atributo disabled em um <optgroup> para desabilitar todas as opções naquela seção do menu drop-down <select>.
Exemplo:
<select>
<option>Selecione seu prato principal</option>
<optgroup label="Massa">
<option>Macarronada</option>
<option>Lasanha</option>
<option>Nhoque</option>
</optgroup>
<optgroup label="Frutos do Mar">
<option>Bobò de camarão</option>
<option>Peixe frito</option>
<option>Paella</option>
</optgroup>
<optgroup label="Carnes">
<option>Medalhão</option>
<option>Churrasco</option>
<option>Linguiça defumada</option>
</optgroup>
</select>2) Atributo loading para o elemento <iframe>
O atributo loading veio para as imagens para resolver um problema que costumava ser solucionado com JavaScript, o famoso lazy loading que atrasava o carregamento de um longo conjunto de imagens ou de imagens que ficavam abaixo da área de visualização do usuário. Entretanto, por melhor que tenha sido sua chegada para o elemento <img>, o fato é que esse mesmo atributo também pode ser utilizado no elemento <iframe>, com o mesmo propósito.
Infelizmente, o recurso ainda não é suportado pelo Firefox. Porém, considerando-se a sua desafortunada penetração no mercado de apenas 2,76%, o uso do atributo loading para <iframe> nem chega a ser um empecilho. Ainda mais se considerarmos que ele será apenas ignorado pelo Firefox, sem consequências maiores para o usuário.
Exemplo:
<iframe src="/pagina.html" width="300" height="250" loading="lazy">
3) Atributos para listas ordenadas
As listas ordenadas usando o elemento <ol> são muito comuns. O que nem todos sabem é que o comportamento da numeração dessa lista pode ser determinado por atributos específicos:
- o atributo reversed, para numerar os itens em ordem reversa (de alto para baixo em vez do padrão de baixo para cima);
- o atributo start, para definir o número inicial;
- o atributo type, para definir se serão utilizados números, letras ou numerais romanos;
- o atributo value, para especificar um número personalizado em um item específico da lista .
Desta forma, listas ordenadas são muito mais flexíveis do que se podia imaginar.
Exemplo:
<ol reversed start="30" type="1">
<li>A Viagem (1994)</li>
<li>Explode Coração (1995)</li>
<li>O Rei do Gado (1996)</li>
<li>A Indomada (1997)</li>
<li value="99">A Padroeira (2001)</li>
<li>O Clone (2002)</li>
<li>Senhora do Destino (2004)</li>
<li>Cobras & Lagartos (2006)</li>
</ol>Perceba que, a partir de A Padroeira (2001), a lista acima muda a numeração para “99”, porque esse valor foi setado no tributo. Logo em seguida, a numeração regressiva retoma seguindo esse novo parâmetro.
4) Atributo form para campos de formulário
As boas práticas recomendam que você encapsule todos os inputs de seu formulário dentro das tags <form> e </form>. Na verdade, muitos desenvolvedores sequer sabem que é possível fazer de outra maneira e existem aqueles que abrem a tag logo depois do <body> e fecham logo antes </body>, tornando a página inteira um grande formulário, sem necessidade.
O fato é que campos de input podem existir soltos na página, desde que contenham o atributo form com o valor do formulário ao qual eles estão vinculados.
Exemplo:
<form id="meuFormulario" action="/form.php"> <input id="nome"> <button type="submit"> </form> <input type="email" form="meuFormulario">
5) Atributo integrity para o elemento <script>
A questão das dependências na cadeia de suprimento se tornou uma questão de segurança. Todo cuidado é pouco para não se comprometer uma aplicação. O próprio HTML conta com uma ferramenta para dar uma força na hora de assegurar a origem de um script externo. O atributo integrity permite que um navegador verifique o script obtido para garantir que o código nunca seja carregado se a fonte tiver sido manipulada.
O navegador passa um hash para o servidor e depois compara os resultados.
Exemplo:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"> </script>
6) Atributo decoding para o elemento <img>
Esse atributo foi introduzido nas especificações relativamente recente, mas é poderoso para quem se preocupa com renderização de página, CLS e LCP. Adicionar o atributo decoding a um elemento de imagem fornece uma instrução de decodificação de imagem ao navegador. O tempo que leva para carregar a imagem não muda, porém a maneira como ela é “interpretada” (e, portanto, seu conteúdo se torna visível na tela) é determinada pelo atributo decoding.
Esse atributo é semelhante ao uso do atributo async em scripts. Os valores são:
- sync: Decodifica a imagem sincronamente, que é como os navegadores geralmente fazem;
- async: Decodifica a imagem de forma assíncrona para evitar atrasos na apresentação de outros conteúdos;
- auto: O padrão que permite ao navegador usar seu próprio método interno de decodificação.
Exemplo:
<img src="/images/exemplo.png" alt="Exemplo" decoding="async">
7) Atributo download para o elemento <a>
Links são ferramentas ancestrais do HTML e uma das razões para sua nomenclatura. Sem links, não existiriam Hyper-Texts. Parece um recurso óbvio e dominado por todos, mas o atributo download é mais obscuro. Ele permite que o desenvolvedor determine que, quando um link é clicado, ele deve ser baixado em vez de visitado.
Sem um valor, o atributo download apenas força o download da página vinculada. Alternativamente, é possível fornecer um valor que o navegador usa como nome de arquivo sugerido para o recurso baixado.
Exemplo:
<a href="/dfaadfalçfja.pdf" download>Baixar PDF</a> <!--apenas baixa o arquivo, ele não é aberto no navegador--> <a href="/dfaadfalçfja.pdf" download="documento.pdf">Baixar PDF</a> <!--não apenas baixa o arquivo, sem que ele seja aberto no navegador, como também sugere o nome mais amigável de "documento.pdf"-->
