HTML

Jul 07, 2023

Andrei L.

7min de leitura

O Que é HTML: O Guia Definitivo para Iniciantes

O Que é HTML: O Guia Definitivo para Iniciantes

A Linguagem de Marcação de Hipertexto (HTML) é uma linguagem de computador que compõe a maior parte das páginas da internet e dos aplicativos online. Um hipertexto é um texto usado para fazer referência a outros textos, enquanto uma linguagem de marcação é composta por uma série de marcações que dizem para os servidores da web qual é o estilo e a estrutura de um documento.

O HTML não é considerado uma linguagem de programação, já que ele não pode criar funcionalidades dinâmicas. Ao invés disso, com o HTML, os usuários podem criar e estruturar seções, parágrafos e links usando elementos, tags e atributos.

Confira abaixo alguns dos usos mais comuns para o HTML:

  • Desenvolvimento web. Os desenvolvedores usam códigos HTML para projetar como um navegador vai exibir os elementos das páginas, como textos, hiperlinks e arquivos de mídia.
  • Navegação na internet. Os usuários podem navegar facilmente e inserir links entre páginas e sites relacionados, já que o HTML é amplamente usado para incorporar hiperlinks.
  • Documentação. O HTML torna possível a organização e a formatação de documentos, de maneira similar ao Microsoft Word.

Também vale notar que o HTML agora é considerado um padrão oficial da internet. O World Wide Web Consortium (W3C) mantêm e desenvolve especificações do HTML, além de providenciar atualizações regulares.

Este artigo vai cobrir o básico sobre HTML, incluindo como ele funciona, seus prós e contras — além de como ele se relaciona com CSS e JavaScript.

Baixe o Guia de Recursos HTML definitivo

O Que É HTML – Vídeo

Como Funciona o HTML

Um site médio inclui diversas páginas HTML diferentes. Por exemplo, ele pode trazer uma página inicial, uma página “sobre” e uma página de contato. Cada uma delas possui um arquivo HTML separado.

Documentos HTML são arquivos que terminam com uma extensão .html ou .htm. Um navegador lê o arquivo HTML e renderiza o seu conteúdo para que os usuários da internet possam vê-lo.

Todas as páginas HTML possuem uma série de elementos, que consistem num conjunto de tags e atributos. Os elementos HTML são os tijolos de construção de uma página da internet. Uma tag diz para o navegador onde um elemento começa e termina, enquanto um atributo descreve as características de um elemento.

As três principais partes de um elemento são:

  • Tag de abertura – usada para dizer onde um elemento começa a ter efeito. A tag é cercada de colchetes angulares para abertura e fechamento. Por exemplo, use a tag de abertura <p> para criar um parágrafo.
  • Conteúdo – essa é a parte que os usuários verão.
  • Tag de fechamento – igual à tag de abertura, mas com uma barra antes do nome do elemento. Por exemplo, </p> para encerrar um parágrafo.

A combinação dessas três partes vai criar um elemento HTML.

<p>É assim que você adiciona um parágrafo no HTML.</p>

Outra parte crucial de um elemento HTML é o seu atributo, que possui duas seções — um nome e um valor de atributo. O nome identifica a informação adicional que um usuário deseja acrescentar, enquanto o valor de atributo fornece mais especificações.

Por exemplo, um elemento de estilo que adiciona a cor roxa e uma fonte da família verdana ficará assim:

<p style="color:purple;font-family:verdana">É assim que você adiciona um parágrafo no HTML.</p>

Outro atributo é a classe HTML, que é mais importante para desenvolvimento e programação. Essa classe de atributo adiciona informações de estilo que podem funcionar em elementos diferentes com o mesmo valor de classe.

Por exemplo, vamos usar o mesmo estilo para um cabeçalho <h1> e para um parágrafo <p>. O estilo inclui cor de fundo, borda, margem e preenchimento — tudo dentro da classe .important. Para termos o mesmo estilo no <h1> e no <p>, adicione class=”important” depois de cada tag de abertura:

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">Isto é um cabeçalho</h1>
<p class="important">Isto é um parágrafo.</p>
</body>
</html>

A maioria dos elementos possui uma tag de abertura e de fechamento, mas alguns não precisam fechar a tag para funcionar. Esse é o caso dos elementos vazios. Eles não usam uma tag de fechamento pois não têm conteúdo:

<img src="/" alt="Imagem">

Essa tag de imagem possui dois atributos — um atributo src (que é um caminho de imagem) e um atributo alt (que é o texto de descrição). Contudo, ele não tem conteúdo nem uma tag de fechamento.

Finalmente, cada documento HTML deve começar com uma declaração <!DOCTYPE> para informar ao navegador qual é o tipo de documento. Com o HTML5, a declaração doctype HTML pública será:

<!DOCTYPE html>

A História do HTML

O HTML foi inventado por Tim Berners-Lee, um físico do centro de pesquisas CERN, na Suíça. Ele surgiu com a ideia de um sistema de hipertexto na internet.

Hipertexto significa um texto que possui referências (links) para outros textos que podem ser acessados imediatamente. Ele publicou a primeira versão do HTML em 1991, consistindo em 18 tags. Desde então, cada versão do HTML vem com novas tags e atributos (modificadores de tags).

Devido a rápida ascensão e popularidade, o HTML é agora considerado um padrão oficial da web.

O maior upgrade da linguagem foi o lançamento do HTML5 em 2014. Diversas novas tags semânticas foram adicionadas que revelam o significado do seu próprio conteúdo, como  <article>, <header>, e <footer>.

Tags e Elementos HTML mais Utilizados

Atualmente, existem 142 tags HTML disponíveis, que permitem a criação de diversos elementos. Mesmo que os navegadores modernos não suportem algumas dessas tags, você ainda vai se beneficiar de aprender sobre os diferentes elementos disponíveis.

Esta seção vai discutir as tags HTML mais usadas e dois elementos principais: os elementos bloco e os elementos em linha (inline).

Elementos Bloco

Os elementos bloco ocupam a largura completa de uma página. Eles sempre iniciam uma nova linha no documento. Por exemplo, um elemento cabeçalho estará numa linha diferente de um elemento parágrafo.

Toda página HTML usa essas três tags:

  • A tag <html> é o elemento raiz que define todo o documento HTML.
  • A tag <head> contém metadados sobre o título e a codificação de caracteres da página.
  • A tag <body> inclui todo o conteúdo que aparece na página.
<html>
 <head>
   <!-- META INFORMAÇÕES --> 
 </head>
 <body>
   <!-- CONTEÚDO DA PÁGINA -->
 </body>
</html>

Outras tags de bloco populares são:

  • Tags de Cabeçalho – elas variam entre <h1> e <h6>, onde h1 tem um tamanho maior, que vai diminuindo até chegar no h6.
  • Tags de parágrafo – são abertas usando a tag <p>.
  • Tags de lista – possuem diferentes variações. Use a tag <ol> para uma lista ordenada, e a tag <ul> para uma lista sem ordem definida. Então, envolva cada item da lista com a tag <li>.

Elementos Em Linha

Um elemento em linha (ou inline) formatam o conteúdo interno de elementos de bloco. Isso inclui a adição de links ou de linhas com ênfase. Os elementos inline são normalmente usados para formatar texto sem quebrar o fluxo do conteúdo.

Por exemplo, uma tag <strong> faz o elemento ser renderizado em negrito, enquanto a tag <em> faz ele aparecer em itálico. Os hiperlinks também são elementos em linha que usam uma tag <a> e um atributo href para indicar o destino do link:

<a href="https://example.com/">Click me!</a>

A Evolução do HTML: Qual a diferença entre HTML e HTML5?

Desde seu lançamento o HTML tem passado por muitas evoluções. O W3C constantemente publica novas versões e atualizações, enquanto que marcas históricas também recebem nomes dedicados.

O HTML4 (comumente referido apenas como “HTML”) foi publicado em 1999, enquanto que a maior e mais recente atualização foi lançada em 2014. Chamada de HTML5, a atualização introduziu diversos novos recursos à linguagem.

Um dos mais aguardados era a incorporação nativa de vídeos e arquivos de áudios. Ao invés de precisar utilizar o Flash Player, agora é possível incorporar vídeos e áudios com as novas tags <audio></audio> e <video></video>. Ele também possui compatibilidade com SVG (vetor gráfico escalável) e MathML para fórmulas científicas e matemáticas.

O HTML5 também introduziu algumas melhorias de semântica. As novas tags semânticas informam ao navegador sobre o significado do conteúdo, o que auxilia tanto os leitores quanto os mecanismos de busca.

As tags semânticas mais populares são <article></article>, <section></section>, <aside></aside>, <header></header>, e <footer></footer>.

Prós e Contras do HTML

Como na maioria das coisas, o HTML possui diversos pontos positivos e negativos.

Prós:

  • Uma linguagem amplamente utilizada com diversos recursos e uma comunidade gigante;
  • Roda em todos os navegadores;
  • Fácil aprendizado;
  • Totalmente grátis e de código-aberto;
  • Marcações limpas e consistentes;
  • Os padrões oficiais da internet são mantidos pelo Consórcio World Wide Web (W3C);
  • Integração fácil com linguagens de back-end como PHP e Node.js.

Contras:

  • Geralmente utilizado para páginas estáticas. Para funcionalidade dinâmicas você provavelmente vai precisar usar JavaScript ou outra linguagem de back-end como PHP;
  • Não permite a implementação de lógica. Por isso todas as páginas precisam ser criadas separadamente, mesmo se utilizarem os mesmos elementos, como cabeçalhos e rodapés;
  • Alguns navegadores demoram para adotar novos recursos;
  • O comportamento do navegador é algumas vezes difícil de prever (ex.: navegadores antigos muitas vezes não renderizam novas tags).

Qual a Relação Entre HTML, CSS e JavaScript?

Mesmo que o HTML seja uma linguagem poderosa, não é o suficiente para criar um site profissional e responsivo. Ele pode ser utilizado apenas para adicionar elementos de texto e criação de estruturas de conteúdo.

Porém o HTML funciona muito bem com outras duas linguagens de front-end: CSS (Cascading Style Sheets), e JavaScript. Juntos eles proporcionam a implementação de funcionalidades avançadas e uma ótima experiência ao usuário.

  • O CSS é responsável pelo estilo como background, cores, layouts, espaçamentos, e animações.
  • O JavaScript permite a adição de funcionalidades dinâmicas como sliders, pop-ups, e galerias de fotos.

Imagine o HTML como uma pessoa nua, o CSS como as roupas, e o JavaScript como os movimentos e ações.

Como Entender o HTML e Melhorar seu Conhecimento

Aprender sobre HTML é um ótimo primeiro passo para quem está interessado em desenvolvimento de sites.

Existem diversos cursos disponíveis na internet para você aprender a programar, mas listamos as três melhores bases de dados para tutoriais de HTML:

  • W3Schools – possui recursos, exemplos e exercícios gratuitos para ajudar no aprendizado de HTML básico. Também tem um tutorial de HTML que custa US$ 95 e você faz no seu próprio ritmo, ganhando um certificado oficial no final.
  • Codecademy – oferece cursos introdutórios gratuitos com tutoriais interativos. A Codecademy usa uma tela divida que mostra automaticamente o resultado da sua programação num artigo HTML. Ela possui conteúdo exclusivo disponível por US$ 19,99/mês.
  • Coursera – oferece vários cursos que oferecem explicações aprofundadas com exemplos reais. O preço de assinatura é de US$ 49/mês, e há um período de 7 dias grátis para teste.

Conclusão

O HTML é a principal linguagem de programação encontrada na internet. Cada página HTML tem uma série de elementos que cria a estrutura dos conteúdos de uma página ou de um aplicativo.

O HTML é uma linguagem amigável para iniciantes, que possui bastante suporte e é principalmente usada para páginas estáticas. O HTML funciona melhor quando usado em conjunto com o CSS para aplicar o estilo e com o JavaScript para implementar funcionalidades. Você pode conferir como linkar o HTML com CSS no nosso blog.

Author
O autor

Andrei L.

Jornalista e conteudista SEO/Localização na Hostinger Brasil. Tem experiência em WordPress e na produção de conteúdos de tecnologia otimizados para conquistar as melhores posições no Google. É fã de games, adora vôlei, ama o inverno e está sempre buscando se aperfeiçoar no Inglês.

Mais de Andrei L.