Qual é a função do HTML?

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 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.

Veja o vídeo na pagina completa

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>

Artigos relacionados