O Que É 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).

De acordo com o Elemento de Referência do HTML, do Mozilla Developer Network, atualmente existem 140 tags HTML, mesmo que algumas delas já estejam obsoletas (não mais suportadas pelos navegadores).

Devido a rápida ascensão e popularidade, o HTML é agora considerado um padrão oficial da web. As especificações do HTML são mantidas e desenvolvidas pelo Consórcio World Wide Web (W3C). Você pode conferir a última versão da linguagem no site do W3C.

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

Como o HTML Funciona?

Documentos HTML são arquivos com as extensões .html ou .htm. Eles podem ser visualizados com qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox). O navegador faz a leitura do arquivo e renderiza seu conteúdo para visualização dos usuários.

Geralmente sites comuns possuem diversas páginas HTML. Por exemplo: homepages, páginas explicando o propósito do site, e páginas de contato teriam documentos HTML distintos.

Cada página HTML consiste em uma série de tags (também chamadas de elementos), que podem ser consideradas os blocos de construção das páginas. Elas criam uma hierarquia que estrutura o conteúdo entre seções, parágrafos, cabeçalhos e outros blocos de conteúdo.

A maioria dos elementos HTML utilizam as sintaxe de abertura e fechamento como <tag> e </tag>.

Abaixo temos um exemplo de como os elementos HTML podem ser estruturados:

  1. <div>
  2. <h1>Cabeçalho principal</h1>
  3. <h2>Subtítulo de impacto</h2>
  4. <p>Parágrafo um</p>
  5. <img src=”/” alt=”Image”>
  6. <p>Parágrafo dois com <a href=”https://example.com”>hyperlink</a></p>
  7. </div>
  • O elemento superior é uma divisão (<div></div>) que pode ser utilizada para marcar seções de conteúdo maiores.
  • Contém um cabeçalho (<h1></h1>), subtítulo (<h2></h2>), dois parágrafos (<p></p>), e uma imagem (<img>).
  • O segundo parágrafo inclui um link (<a></a>) com um atributo href que contém a URL de destino.
  • A tag de imagem também possui dois atributos: src para o caminho da imagem e alt para a descrição da imagem.

Revisão das Tags HTML mais Utilizadas

As HTML tags possuem dois tipos principais: elementos bloco e elementos em linha.

  1. Elementos bloco utilizam todo o espaço disponível e começam uma nova linha no documento. Cabeçalhos e parágrafos são bons exemplos de elementos bloco.
  2. Elementos em linha utilizam apenas o espaço necessário e não criar uma quebra de linha. Eles geralmente são utilizados para formatar os elementos dentro de um elemento bloco. Links e strings enfatizadas são bons exemplos de elementos em linha.

Tags de Elementos Bloco

Os três elementos bloco que todo documento HTML precisa conter são <html>, <head>, e <body>.

  1. A tag <html></html> é o elemento de maior nível que está em todas as páginas HTML.
  2. A tag <head></head> possui informações do meta como o título e charset da página.
  3. Finalmente, a tag <body></body> engloba todos os elementos que são mostrados na página.
  1. <html>
  2. <head>
  3. <!– META –>
  4. </head>
  5. <body>
  6. <!– CONTEÚDO DA PÁGINA –>
  7. </body>
  8. </html>
  • Os cabeçalhos possuem 6 níveis no HTML. Eles englobam desde <h1></h1> até <h6></h6>, onde o h1 é o maior nível e h6 o menor. Parágrafos possuem as tags <p></p>, enquanto os blockquotes (ou elementos HTML de citação de blocos) utilizam a tag <blockquote></blockquote>.
  • Divisões são seções de conteúdo maiores que geralmente possuem parágrafos, imagens, de vez em quando blockquotes, e outros elementos menores. Podemos marcá-los com as tags <div></div>. Um elemento div pode conter outro elemento div dentro.
  • Você também pode utilizar as tags <ol></ol> para listas ordenadas e <ul></ul> para desordenadas. Itens individuais da lista devem conter as tags <li></li>. Por exemplo, uma lista não ordenada fica assim no HTML:
  1. <ul>
  2. <li>Item da lista 1</li>
  3. <li>Item da lista 2</li>
  4. <li>Item da lista 3</li>
  5. </ul>

Tags de Elementos em Linha

Muitos elementos em linhas são utilizados na formatação de textos. Por exemplo, uma tag <strong></strong> renderiza um elemento em negrito, enquanto as tags <em></em> mostram em itálico.

Hyperlinks também são elementos em linha que utilizam as tags <a></a> e o atributo href para indicar a destinação do link:

  1. <a href=”https://exemplo.com/”>Clique aqui!</a>

Imagens também são elementos em linha. Você pode adicionar uma com a tag <img> sem a necessidade de fechamento. Mas você também precisa utilizar o atributo src para especificar o caminho da imagem, por exemplo:

  1. <img src=”/images/exemplo.jpg” alt=”Imagem exemplo”>

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

Então… O que é HTML?

O HTML é a principal linguagem de marcação da internet. Ele roda nativamente em todos os navegadores e é mantido pelo Consórcio World Wide Web (W3C).

Você pode utilizá-lo para criar estruturas de conteúdos de sites e aplicações web. É o mais básico das tecnologias de front-end que serve como base de estilização com CSS e funcionalidades implementadas com JavaScript.