Artigos HTML Qual é a função do HTML?
Você ainda não é assinante?

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 utilizada unicamente para estruturar o conteúdo das páginas. Ou seja, não cabe a ela definir características visuais ou comportamentos, pois 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 significados. 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.

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>