Algumas dicas de HTML

(por Belen Albeza – )

Há um tempo atrás escrevi um artigo com algumas dicas de CSS, agora é hora de dar uma polida em nosso HTML! Neste artigo eu vou compartilhar algumas dicas e conselhos sobre o código HTML. Algumas destas orientações serão mais adequadas para iniciantes – como construir adequadamente parágrafos, usar títulos, ou melhorar formas, mas vamos também discutir SVG sprites para ícones, um tema um pouco mais avançado.

 

Texto

Parágrafos

A maioria de nossa escrita é estruturada em parágrafos, e há um elemento HTML para isso: <p>. Não use a tag de quebra de linha <br> para separar blocos de textos em pseudo-parágrafos, uma vez que as quebras de linha não são feitas para isso.

Evite:

Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly beans muffin donut marzipan oat cake. 

<br>

Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding chocolate cake cheesecake toffee.

Recomendado:

<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly beans muffin donut marzipan oat cake.</p>

<p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding chocolate cake cheesecake toffee.</p>

 

Um uso legítimo para quebras de linha seria, por exemplo, quebrar versos de um poema ou canção:

<p>So close, no matter how far<br> 
Couldn’t be much more from the hearth<br>
Forever trusting who we are<br>
And nothing else matters</p>

 

Títulos

Títulos tags, de <h1> a <h6>, têm uma classificação implícita que lhes foi atribuída, a partir de 1 (mais importante) até 6 (menos importante).

Para lidar com a semântica corretamente, escolha uma classificação para o título em ordem sequencial, e não apenas pelo tamanho que o navegador irá considerar para processar o título. Você pode – e deve! – usar CSS para isso, e eleger uma classificação apropriada, alternativamente.

Evite:

<article>
<h1>Monkey Island</h1>
<h4>Look behind you! A three-headed monkey!</h4>
<!-- ... -->
</article>

Recomendado:

<article>
<h1>Monkey Island</h1>
<h2>Look behind you! A three-headed monkey!</h2>
<!-- ... -->
</article>

 

Outra coisa a ter em conta é como criar subtítulos ou linhas de tag para acompanhar títulos. A recomendação W3C é usar a marcação de texto normal em vez de um título com classificação inferior.

Evite:

<header>
<h1>Star Wars VII</h1>
<h2>The Force Awakens</h2>
</header>

 

Recomendado:

 <header>
<h1>Star Wars VII</h1>
<p>The Force Awakens</p>
</header>

 

Formulários

Placeholders

O atributo placeholder nos elementos de formulário <input> vai permitir que você mostre um valor exemplo que é apagado automaticamente assim que o usuário digita algo no campo. Placeholders são destinados a mostrar exemplos de formatação válidos para um campo.

Infelizmente, com freqüência, encontramos uma série de placeholders que atuam como elementos <label>, informando que o campo é, em vez de servir como um exemplo de um valor de entrada válido. Esta prática não é acessível, e você deve evitá-la.

Evite:

 

<input type="email" placeholder="Your e-mail" name="mail">

 

Recomendado:

<label>
Your e-mail: 
<input type="email" placeholder="darth.vader@empire.gov" name="mail">
</label>

 

Teclados em dispositivos móveis

É crucial que sejam fornecidas dicas de digitação para pessoas que navegam a partir de um dispositivo móvel, como um celular ou um tablet. Podemos facilmente conseguir isso, escolhendo a digitação correta para nossos elementos <input>.

Por exemplo, type=”number” vai fazer um dispositivo móvel exibir o teclado numérico em vez do teclado alfanumérico regular. O mesmo vale para type=”email”, type=”tel”, etc.

Evite:

<label>Phone number: <input type="text" name="mobile"></label>

 

Recomendado:

<label>Phone number: <input type="tel" name="mobile"></label>

 

Aqui está uma comparação: à esquerda, o teclado que aparece ao usar type=”text”; à direita, o teclado para type=”tel”.

keyboard comparison

 

Imagens

Diga oi para arquivos SVG! Você pode não só usar gráficos vetoriais em tags <img> como esta:

<img src="acolyte_cartoon.svg" alt="acolyte">

 

Como também pode usar sprites SVG para implementar ícones do vetor em seu site, em vez de usar um tipo de Web Font – que é um truque, e pode não produzir resultados perfeitos. Isso ocorre porque os navegadores tratam ícones Web Font como texto e não como imagens. E há outros problemas potenciais, como bloqueadores de conteúdo/propaganda que incapacitam o download de Web Fonts. Caso queira saber mais sobre isso, assista a esta palestra de Sarah Semark sobre por que usar SVG para ícones é melhor do que usar Web Font. Você também pode ler mais sobre esta técnica em CSS-Truques.

A ideia de sprites SVG é muito semelhante à CSS sprites. A implementação consiste em fundir todos os seus ativos SVG em um único arquivo de imagem. No caso de SVG, cada ativo é envolto em uma tag <symbol>, como esta:

<svg>
<symbol id="social-twitter" viewBox="...">
<!-- actual image data here -->
</symbol>
</svg>

Em seguida, o ícone pode ser usado em seu HTML com uma tag <svg> como esta, então apontamos para a ID do símbolo no arquivo SVG:

<svg class="social-icon">
<use xlink:href="icons.svg#social-twitter" />
</svg>

 

Será que a criação de uma sprite sheet SVG parece entediante? Bem, é por isso que existem ferramentas como o gulp-svgstore para automatizar o processo e gerar uma sprite sheet de seus arquivos de ativos individuais.

E lembre-se, uma vez que estamos usando a tag <svg> em vez de <img> para incluir a imagem, podemos usar CSS para aplicar estilos. Assim, todas as coisas legais que você pode fazer com ícones Web Font, podem ser feitas com esses ícones SVG também!

.social-icon {
 fill: #000;
 transition: all 0.2s;
}

.social-icon:hover {
 fill: #00f;
}

 

No entanto, CSS possui algumas limitações: quando se usa SVG desta forma, com <use> vinculado a <symbol>, a imagem fica injetada no Shadow DOM e perdemos alguns recursos CSS. Neste caso, não podemos escolher a dedo para quais elementos do SVG aplicar o estilo, e algumas propriedades (por exemplo, preenchimento) só serão aplicadas aos elementos que as têm indefinidas. Mas ei, você também não pode fazer isso com ícones Web Font!

Na demo abaixo, você pode ver um exemplo de sprite SVG em ação. Quando você passa o mouse sobre a imagem, o fogo da tocha irá mudar a sua cor através de CSS.

 

Espero que essas dicas tenham sido úteis. Se você tiver alguma dúvida, ou caso deseje compartilhar suas próprias dicas, por favor deixe um comentário!

Sobre Belén Albeza

Belén é uma engenheira e desenvolvedora de jogos trabalhando no Mozilla Developer Relations. Ela se preocupa com os padrões web, código de alta qualidade, acessibilidade e desenvolvimento de jogos.