HTML é um acrônimo para HyperText Markup Language (linguagem de marcação de hipertexto). É a linguagem de marcação padrão para a criação de páginas na web.

HTML não é uma linguagem de programação, embora muita gente confunda, é uma linguagem de marcação que define estruturalmente um conteúdo. O HTML consiste em uma série de elementos pré-definidos, chamadas de tags, que são utilizadas para separar, organizar e exibir o conteúdo conforme programado. As tags permitem criar um hiperlink; uma imagem; um título; aumentar ou diminuir a fonte e muito mais.

Breve história do HTML

O HTML foi criado originalmente pelo físico britânico Tim Berners-Lee, também criador do procolo HTTP. Na época a linguagem ainda não era uma especificação e sim uma coleção de ferramentas para resolver um problema de pessoal de Tim: a comunicação e compartilhamento de pesquisas entre ele e seus colegas.

As primeiras versões do HTML foram definidas com regras sintáticas flexíveis e com o passar do tempo, a utilização do HTML aumentou, sendo necessário tornar a sintaxe mais definida e padronizada.

As primeiras especificações formais da linguagem surgiram na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicação foi esboçada por Tim Berners-Lee e Dan Connolly, tendo sua primeira versão publicada em 1993, dois anos depois, em 1995 a versão 2.0 desenvolvida por um grupo de trabalho da Internet Engineering Task foi publicada. Desde 1996, as especificações do HTML são mantidas pela World Wide Web Consortium (W3C) e em 2000 a linguagem tornou-se uma norma internacional (ISO/IEC 15445:2000). A recomendação HTML 4.01 foi publicada no final de 1999 pelo W3C e a versão HTML5, a qual utilizamos hoje, foi publicada em 2008.

VersãoAno
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014
HTML5.12016 e 2017 (2ª ed.)
HTML5.22017
Fonte: Wikipedia

Estrutura do HTML

Abaixo podemos ver uma estrutura básica do HTML5:

<!doctype html>

<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Título da Página</title>
</head>

<body>
  <h1>Título do Texto</h1>
  <p>Parágrafo</p>
  <img src="examplo_de_imagem.jpeg" />
</body>
</html>

Tags HTML

Como falamos anteriormente a estrutura do HTML é baseada em tags pré-definidas. Você pode criar, embora não muito comum, suas próprias tags HTML. As tags são basicamente divididas em: nível de bloco (block-level) e em linha (inline).

  1. Tags do tipo block-level costumam ocupar todo espaço disponível e “pulam” uma linha. Títulos (H1, H2, …) são um bom exemplo de tags block.
  2. Tags do tipo inline apenas ocupam espaço conforme o necessário e normalmente não começam uma nova linha no documento. Elas servem normalmente para enfatizar algum conteúdo dentro do documento. Como as tags de link (<a><a/>) e de negrito (<strong><strong/>).

Tags Block-level

Existem três tags no nível do bloco que todo documento HTML precisa ter: <html><head>, e <body>.

  • A tag <html></html> é o elemento de nível mais alto que envolve todas as páginas HTML.
  • A tag <head></head> contém as informações meta, como o título da página, descrição, etc.
  • A tag <body></body> inclui todo o conteúdo que aparece na página.
<html>
  <head>
    <!-- INFORMAÇÕES META -->  
  </head>
  <body>
    <!-- CONTEÚDO DA PÁGINA -->
  </body>
</html>
  • As tags de título têm 6 níveis. Elas variam de <h1></h1> a <h6></h6>, onde h1 é o título de nível mais alto, normalmente o título da página, e h6 é o de nível mais baixo.
  • Os parágrafos são delimitados por <p></p> .
  • Divisões são seções de conteúdo maiores que normalmente contêm vários títulos, parágrafos e outros elementos menores. Podemos marcá-los usando a tag <div></div> ou <section></section>.
  • Existem também as tags para listas, elas podem ser ordenadas <ol></ol> ou não ordenadas <ul></ul>. Os itens individuais de uma lista devem estar entre a tag <li></li>. Por exemplo, é assim que uma lista básica não ordenada se parece em HTML:
<ul>
    <li>Item da Lista 1</li>
    <li>Item da Lista 2</li>
    <li>Item da Lista 3</li>
</ul>

Tags inline

Muitas tags inline são usadas para formatar o texto. Por exemplo, uma tag <strong></strong>renderizaria um elemento em negrito, enquanto as tags <i></i> mostrariam em itálico.

Os hiperlinks também são elementos inline que exigem tags e atributos href para indicar o destino do link:

<a href="https://marquesfernandes.com.br">Link para meu blog!</a>

Imagens também são elementos inline. Você pode adicionar um usando sem nenhuma marca de fechamento. Mas você também precisará usar o atributo src para especificar o caminho da imagem, por exemplo:

<img src="/images/example.jpg" alt="Example image">

HTML5, na prática!

Agora que aprendemos sobre o que é e como funciona o HTML, podemos pôr em prática o uso de algumas tags para criar uma página web básica:

See the Pen O que é HTML? by Henrique Marques Fernandes (@shadowlik) on CodePen.

5 2 votos
Nota do Artigo
Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x