Guia HTML

DevCast: Qual é a função do HTML?

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (74)  (1)

Se você programa para a web ou pretende ingressar nessa área, é fundamental saber usar corretamente a linguagem HTML. Nesse DevCast conversamos sobre qual é a função dessa linguagem na programação web atualmente.

A função do HTML (Hypertext Markup Language) na programação web sofreu alterações ao longo dos anos e hoje essa linguagem deve ser utilziada unicamente para estruturar o conteúdo das páginas. Ou seja, não cabe a ela definir características visuais ou comportamentos, isso deve ser feito usando CSS e JavaScript.

Além disso, o uso das tags semânticas também dá ao documento HTML uma carga de meta significado. Por exemplo: ao usar a tag <main> você está definindo o conteúdo principal da página; ao usar a tag <nav> você está indicando que o conteúdo é uma seção de navegação - e assim por diante.

Nesse DevCast conversamos sobre essa divisão de funções e demonstramos como um arquivo HTML deve ser escrito atualmente.

13:51

Seja um assinante MVP e acesse este conteúdo completo.

Consulta rápida

Como o objetivo do HTML não é definir aparência visual, não devemos ter no documento atributos como bgcolor ou tags como <font>. O trecho de código abaixo demonstra um documento com esses problemas:

<body bgcolor="#009FB7">
    <div>
        <form action="login.php" method="post">
            <label><font face="Lato">Usuário</font></label>
            <input type="text" name="login">
            <label><font face="Lato">Senha</font></label>
            <input type="password" name="senha">
            <input type="submit" value="Acessar">
        </form>
    </div>
</body>        

O correto, nesse caso, é ter no código HTML apenas a estrutura do documento, e toda formatação visual e implementação de comportamento serem feitas via CSS e JavaScript:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <div id="form-container">
        <form action="login.php" method="post">
            <label>Usuário</label>
            <input type="text" name="login" id="txt-login">
            <label>Senha</label>
            <input type="password" name="senha" id="txt-senha">
            <input type="submit" value="Acessar" id="btn-acessar">
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

Sugestão de próximo conteúdo:

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?