Scribd
Carregar
8 visualizações9 páginas

Boas Práticas de Front-End HTML

O documento apresenta boas práticas de Front-End, abordando a estruturação de páginas HTML, inserção de textos e criação de formulários. Destaca a importância de usar CSS para personalizar elementos, como a tag <hr>, e recomenda evitar o uso excessivo da tag <br> para manter a semântica. Além disso, explica o uso da tag <label> para associar rótulos a elementos de formulário, melhorando a acessibilidade e a interação do usuário.

Enviado por

SIMOES
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
8 visualizações9 páginas

Boas Práticas de Front-End HTML

O documento apresenta boas práticas de Front-End, abordando a estruturação de páginas HTML, inserção de textos e criação de formulários. Destaca a importância de usar CSS para personalizar elementos, como a tag <hr>, e recomenda evitar o uso excessivo da tag <br> para manter a semântica. Além disso, explica o uso da tag <label> para associar rótulos a elementos de formulário, melhorando a acessibilidade e a interação do usuário.

Enviado por

SIMOES
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Front-End

1
BOAS
PRÁTICAS
HTML Estruture páginas

Insira textos

Crie formulários

Confira boas práticas da


comunidade de Front-End por
assunto relacionado às aulas.

3
Estruture Diretiva “http-equiv.”:
O uso da diretiva "http-equiv" não é tão comum quanto

páginas antes, pois muitos recursos específicos foram substituídos


por soluções mais modernas e adequadas, como o uso de
JavaScript ou cabeçalhos HTTP apropriados no servidor.
Portanto, é recomendável procurar alternativas
atualizadas antes de usar essa diretiva.

4
Insira Tag <hr>:
Essa tag também pode receber atributos opcionais para

textos personalizar sua aparência. Alguns atributos comuns


incluem:
• size: especifica a altura da linha horizontal. Por
exemplo, <hr size="2"> cria uma linha mais alta do que
<hr size="1">.
• color: define a cor da linha. Você pode especificar uma
cor usando um valor hexadecimal (#RRGGBB) ou um
nome de cor pré-definido. Por exemplo, <hr
color="#FF0000"> define a linha como vermelha.
• width: define a largura da linha horizontal. Pode ser
especificada em pixels (por exemplo, <hr width="200">)
ou em porcentagem da largura da janela do
navegador (por exemplo, <hr width="50%">).

Vale ressaltar que, embora a tag <hr> seja amplamente


suportada pelos navegadores, é importante usar estilos
CSS para personalizar a aparência da linha horizontal, em
vez de depender exclusivamente dos atributos da tag.
Isso permite um controle mais preciso sobre a aparência
e o layout da linha. 5
Insira Tag <br>
O uso excessivo da tag <br> pode prejudicar a semântica

textos e a estrutura correta do seu documento HTML. Para criar


espaçamento vertical entre elementos ou parágrafos, é
recomendado o uso de estilos CSS, como margens ou
preenchimentos, em vez de depender exclusivamente da
tag <br>.

6
Crie A tag <label>:
Essa tag pode ser usada de duas maneiras principais:

formulários 1) Rótulo vinculado a um elemento de formulário


Nesse caso, o rótulo é associado a um elemento de
formulário específico usando o atributo for e o ID do
elemento. Quando o rótulo é clicado, o foco é transferido
para o elemento associado. Exemplo:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">

Nesse exemplo, o rótulo "Nome:" está associado ao campo de


entrada de texto por meio do atributo for com o valor "nome".
Quando o rótulo é clicado, o campo de entrada de texto
recebe o foco.

7
Crie A tag <label>:
Essa tag pode ser usada de duas maneiras principais:

formulários 2) Rótulo envolvendo um elemento de formulário:


Nesse caso, o elemento de formulário é incluído diretamente
dentro da tag <label>. Isso significa que o rótulo abrange
visualmente o elemento de formulário, facilitando a
interação. Exemplo:

Selecione uma opção:


<label>
<select name="opcao">
<option value="opcao1">Opção 1</option>
<option value="opcao2">Opção 2</option>
</select>
</label>

Nesse exemplo, o rótulo "Selecione uma opção:" envolve o


elemento <select>, que exibe um menu suspenso com duas
opções.

8
Bons estudos!

Você também pode gostar