Descubra o HTML, a linguagem de marcação mais usada para criar páginas web. Aprenda seus principais elementos e sua origem.
O HTML está presente em nossas vidas todos os dias, seja ao acessar um e-mail, ler as notícias online ou simplesmente atualizar as redes sociais e visualizar um vídeo no YouTube pelo navegador.
Mas o que significa HTML? Ele é a sigla do inglês Hypertext Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. A maioria das pessoas já viram ou ouviram falar sobre ele, mas não sabem o que de fato ele significa.
Esse é o seu caso? Então continue e a leitura e saiba tudo sobre o assunto!
O que é HTML?
Ele é o responsável por mostrar ao navegador como um conteúdo deve estar estruturado. No caso, é uma linguagem que pega o conteúdo “cru” e organiza na tela. Sem o HTML, a web seria uma espécie de TXT básico, sem a presença de nenhum link sequer.
Porém, não é só de formatação de texto que o HTML vive.
Se a página tem imagens, é ele que especifica onde e como elas serão apresentadas. Se tem tabela, é ele que explica para o navegador como ela é montada.
E mais: ele vai além daquilo que se vê. Se a página contém metadados para outras ferramentas, é o HTML que cuida disso também.
Cada página que existe na Internet é um documento em HTML ou um Documento Dinâmico que gera um HTML para o navegador. A partir do que está escrito no documento, o navegador irá agregar outros elementos na página, como:
- Imagens;
- Sons;
- Vídeos.
Ficou confuso? Vamos dar um exemplo prático para facilitar o entendimento.
Pensando na língua portuguesa, ela serve para estruturar aquilo que você quer dizer. Em uma oração, por exemplo, é preciso geralmente ter um sujeito, um verbo e o predicado.
O HTML também é uma linguagem e você utiliza regras para organizar aquilo que quer dizer e o que a página irá mostrar. Essas regras e elementos semânticos do HTML são chamados de Tags.
As Tags são usadas para formar qualquer objetivo identificável, como:
- Lista;
- Parágrafo;
- Campos de formulários;
- Vídeos;
- Imagens.
O navegador entende essas marcações, que são invisíveis para o usuário normal, e transforma o documento na página que todos nós visualizamos.
Veja mais sobre o HTML no vídeo do Código Fonte TV abaixo:
Quando surgiu o HTML?
HTML (Hypertext Markup Language) é uma linguagem de marcação utilizada para criar e exibir conteúdo na web. A sua evolução começou em 1989, quando Tim Berners-Lee, um cientista da computação britânico que trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear), desenvolveu a ideia da World Wide Web.
A primeira versão do HTML, conhecida como HTML 1.0, foi lançada em 1991. Essa versão incluía tags básicas para formatar o texto, como <h1> para títulos, <p> para parágrafos e <a> para links. Também incluía imagens, embora apenas em preto e branco.
Em 1995, a especificação do HTML foi atualizada para o HTML 2.0, que incluía suporte a tabelas, formulários e framesets (permitindo que diferentes páginas da web fossem exibidas dentro de uma única janela). Nesse mesmo ano, foi lançado o navegador Mosaic, que se tornou popular entre os usuários da web.
Em 1997, o HTML 3.0 foi lançado, trazendo suporte para folhas de estilo (CSS) e elementos multimídia, como vídeo e som. No mesmo ano, a Netscape lançou o navegador Netscape Navigator, que se tornou o navegador mais popular da época.
Em 1999, foi lançado o HTML 4.0, que incluía novos recursos como tabelas avançadas, frames e suporte para scripts do lado do cliente (JavaScript). O HTML 4.0 também incluía a especificação de documentos XHTML (Extensible Hypertext Markup Language), que combinava o HTML com o XML.
Em 2000, o W3C (World Wide Web Consortium) lançou o HTML 4.01, que era uma atualização menor do HTML 4.0, corrigindo alguns erros e inconsistências.
Em 2004, o desenvolvimento do HTML foi retomado com a criação do grupo de trabalho HTML da W3C. Esse grupo de trabalho trabalhou no desenvolvimento do HTML5, que foi lançado em 2014. O HTML5 incluiu muitos novos recursos, como elementos semânticos (como <article> e <section>), suporte para vídeo e áudio, geolocalização e capacidade de armazenamento local.
Desde então, o HTML5 se tornou a versão mais utilizada do HTML e é suportado por todos os principais navegadores da web. Além disso, o HTML5 continua a ser atualizado com novos recursos e funcionalidades para acompanhar as demandas em constante evolução da web.
Principais tags do HTML
As tags do HTML são usadas para criar a estrutura e o conteúdo de uma página da web. Algumas das principais tags do HTML incluem:
<html>– Esta tag é usada para definir o início do documento HTML.<head>– Esta tag é usada para incluir informações sobre a página, como o título da página, meta tags e scripts.<title>– Esta tag é usada para definir o título da página, que aparece na barra de título do navegador.<body>– Esta tag é usada para definir o conteúdo da página, como textos, imagens, vídeos, links e outros elementos.<h1> até <h6>– Essas tags são usadas para criar títulos e subtítulos, com diferentes níveis de importância. Por exemplo:
<h1>Título principal</h1><h2>Subtítulo</h2><h3>Sub-subtítulo</h3>
<p>– Esta tag é usada para criar parágrafos de texto. Por exemplo:
<p>Este é um parágrafo de exemplo.</p>
<a>– Esta tag é usada para criar links para outras páginas da web ou para arquivos no próprio site. Por exemplo:
<a href="https://www.exemplo.com">Link para o Exemplo</a>
<img>– Esta tag é usada para inserir imagens na página. Por exemplo:
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">
<ul> e <li>– Essas tags são usadas para criar listas com marcadores. Por exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Essas são algumas das tags mais comuns do HTML, mas existem muitas outras que podem ser usadas para criar diferentes tipos de conteúdo na web.
HTML é a mesma coisa CSS?
É muito comum as pessoas confundirem, pensando que HTML e CSS são a mesma coisa. O HTML até pode definir alguns poucos elementos de apresentação, mas ele é a linguagem estrutural.
Ou seja, o HTML marca os elementos que serão mostrados em blocos, como os parágrafos, ou aqueles elementos mais importantes no texto, como ênfase ou reforço.
Já o CSS cuida do aspecto puramente visual e explica como o elemento estrutural deverá ser exibido. É onde você diz para o navegador que um título é verde, por exemplo, ou que um parágrafo tem uma distância de 20 pixels em relação ao próximo.
Isso significa que você dá instruções de fonte e outras apresentações que não tenham a ver com a estrutura do conteúdo.
Sempre existiu uma certa confusão entre semântica e apresentação na web. No início, era função do HTML especificar a fonte de um texto, com a Tag <font> ou deixar um texto piscando usando a Tag <font>.
Mas a W3C foi organizando os processos e, gradualmente, forçou a separação maior entre HTML e CSS, fazendo com que algumas Tags não fossem mais usadas.
Hoje em dia, se você quer especificar a fonte usada no seu documento, basta usar o CSS para isso.
Considerações Finais
Nesse artigo você aprendeu sobre o HTML suas principais tags e funcionalidades.
Se você sentiu alguma dificuldade ou então tem alguma sugestão de algo que não foi mencionado, basta deixar aí nos comentários que no futuro podemos trazer atualizações para este artigo. Também indico esses outros materiais relacionados com este assunto:
Até a próxima! :^)