O que é HTML?

O HTML é a linguagem base da internet, permitindo a criação e organização de conteúdo em páginas web. Criada entre o final da década de 80 e início de 90, a linguagem é composta por um conjunto de elementos chamados “tags”.

Na prática, o HTML é usado na construção de sites e aplicações, definindo a disposição de textos, imagens, links e outros elementos multimídia, tornando possível a navegação e interação online.

Neste artigo, entenderemos o que é HTML, sua origem, como funciona e sua importância no desenvolvimento web moderno. Vamos começar?

1 – O que é HTML?

O HTML (HyperText Markup Language , que em português significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para criar e estruturar páginas web, sendo considerada a linguagem base de toda a internet.

Como o próprio nome indica, o HTML é uma linguagem de marcação que permite que suas regras de marcação sejam aplicadas em documentos hipertexto. Um documento do tipo hipertexto possui trechos do seu texto que fazem referência a outros textos, internos ou externos aquele documento. Esse trechos são chamados de links e são eles que permitem uma navegação dinâmica e fluída entre diferentes conteúdos na internet.

Executado através de navegadores web (browsers), o HTML permite criar páginas web que exibem textos, imagens, vídeos, links e outros elementos multimídia nas páginas que acessamos em nosso dia a dia.

É valido ressaltar que o HTML não é uma linguagem de programação como, por exemplo, JavaScript e Python, pois, não possui a capacidade de construir lógicas de execução. Como dito anteriormente, ele é uma linguagem de marcação utilizada para descrever o conteúdo e a estrutura de uma página web.

Por essa razão, o HTML precisa ser combinado com outras linguagens para entregar uma página web funcional. Geralmente, o CSS (Cascading Style Sheets) é utilizado para estilização e formatação das páginas e o JavaScript ou PHP para criar interatividade e funções dinâmicas. 

2 – Quando surgiu o HTML?

O HTML foi criado no final da década de 1980 pelo físico e cientista da computação britânico Tim Berners-Lee, quando ele trabalhava no CERN, um avançado centro de pesquisas científicas localizado na Suíça.

Tim Berners-Lee procurava uma forma de facilitar a comunicação e colaboração entre pesquisadores localizados em diferentes partes do mundo. Como resultado de suas pesquisas foi desenvolvida uma linguagem de marcação para criar documentos digitais que poderiam ter links para conectar diferentes textos.

Essa linguagem recebeu o nome de HTML e a publicação de sua primeira especificação ocorreu em 1991, tornando-se, desde então, a base para a World Wide Web. Ao longo dos anos, a linguagem evoluiu significativamente, com diversas versões lançadas para acompanhar os avanços tecnológicos da internet.

Atualmente, a versão mais utilizada é o HTML5, lançada em meados de 2014. Essa versão trouxe melhorias como suporte a áudios e vídeos, elementos semânticos, recursos de acessibilidade, e muitos outros recursos que auxiliam na construção de aplicações web modernas.

Além disso, o HTML se tornou um padrão oficial da internet. Sua documentação e especificação são mantidas pelo W3C (World Wide Web Consortium), um consórcio internacional de empresas, órgãos governamentais e organizações independentes, responsável por definir os padrões da World Wide Web.

3 – Como funciona o HTML?

O HTML é composto por um conjunto de elementos chamados “tags” (etiquetas), as quais são responsáveis por delimitar e organizar o conteúdo de uma página web. Cada tag possui uma função específica e contêm atributos que modificam o seu comportamento.

Documentos HTML possuem extensão .html ou .htm, e possuem a seguinte estrutura básica:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro HTML</title>
</head>
<body>
    <h1>Bem-vindo ao HTML!</h1>
    
    <p>HTML é a linguagem base para criar páginas da web. Ele estrutura o conteúdo e trabalha em conjunto com o CSS e JavaScript para criar sites interativos.</p>
    
    <h2>Elementos básicos do HTML:</h2>
    
    <ul>
        <li><strong>&lt;h1&gt; a &lt;h6&gt;</strong>: Definem títulos e subtítulos.</li>
        <li><strong>&lt;p&gt;</strong>: Define parágrafos de texto.</li>
        <li><strong>&lt;a&gt;</strong>: Cria links.</li>
        <li><strong>&lt;img&gt;</strong>: Exibe imagens.</li>
        <li><strong>&lt;ul&gt; e &lt;li&gt;</strong>: Criam listas.</li>
    </ul>

    <p>Quer aprender mais? Visite o <a href="https://www.w3schools.com/html/" target="_blank">site da W3Schools</a>.</p>

    <img src="https://via.placeholder.com/300" alt="Exemplo de imagem">
</body>
</html>

O resultado do código acima é esse aqui:

Exemplo de código HTML que demonstra a montagem da estrutura de uma página web.
Fonte: o autor

Apesar de sua simplicidade, o código acima apresenta de forma concisa a estrutura básica de um documento HTML. Essa linguagem organiza os conteúdos da página na tela, mas sem aplicar nenhum tipo de estilização ou interatividade. Isto acontece porque o HTML tem apenas papel estrutural: sua responsabilidade é definir a disposição dos elementos na tela, independentemente do tamanho ou finalidade da página web.

Assim, para tornar um site visualmente atraente e interativo, o HTML precisa ser combinado com outras tecnologias, como o CSS, que define o estilo e a aparência dos elementos, e o JavaScript, que adiciona interatividade e funcionalidades dinâmicas.

3.1 – Entendendo a estrutura do código

A fim de melhorar nossa compreensão sobre HTML, vamos analisar a estrutura do código apresentado acima e entender melhor o papel de cada tag:

  • <!DOCTYPE html>: Declara que o documento segue a especificação do HTML5.
  • <html>: É a tag raiz que envolve todo o conteúdo de uma página HTML.
  • <head>: Contém metadados e configurações, como o título da página e informações de responsividade.
  • <title>: Define o título exibido na aba do navegador.
  • <body>: Contém os elementos visíveis da página.
  • <h1>: Representa o título principal da página.
  • <p>: Define parágrafos de texto.
  • <ul> e <li>: Criam listas de itens, úteis para organizar informações.
  • <a>: Define um link para outras páginas ou sites.

Apesar de simples, esse código representa a estrutura de uma página HTML . Revestidas por tags que identificam a linguagem do documento (<!DOCTYPE html> e <html>), essas páginas também tem um <head> e um <body>.

A tag <head> representa o cabeçalho da página onde estão informações pertinentes a configuração de sua estrutura, enquanto a tag< body> representa o corpo da página onde estão distribuídos os seus conteúdos.

Tanto dentro da tag<head> quanto da tag <body>, muitas outras tags podem ser inseridas conforme os conteúdos que serão exibidos na página. Inclusive, à medida que novas tags e atributos são adicionados, podemos criar páginas mais elaboradas e acrecentar funcionalidades que tornam a experiência de uso mais agradável.

Se você deseja conhecer outras tags do HTML e ver exemplos práticos de uso da linguagem, acesse o site da W3Schools e confira os conteúdos que tem por lá.

Conclusão

O HTML é uma tecnologia fundamental para a web, sendo responsável pela estruturação de todas as páginas que acessamos diariamente. Embora por si só não forneça estilização ou interatividade, quando combinado com CSS e JavaScript, permite a criação de sites dinâmicos e visualmente atraentes.

Desde que foi lançado em 1991, o HTML evoluiu junto às demais tecnologias, culminando no lançamento do HTML5. Esta versão trouxe melhorias significativas, tornando a experiência online mais acessível e interativa. Compreender o HTML é essencial para qualquer pessoa que deseja ingressar no desenvolvimento web, pois ele serve como a espinha dorsal da internet.

Para quem deseja aprender mais sobre programação, não deixe de clicar aqui e acessar a categoria destinada a esse assunto.

Espero que este conteúdo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações fique à vontade para entrar em contato.        

Referências:

https://mo4web.com.br/blog/o-que-e-html5/
https://pt.wikipedia.org/wiki/W3C
https://pt.wikipedia.org/wiki/Tim_Berners-Lee
https://www.hostinger.com.br/tutoriais/o-que-e-html-conceitos-basicos

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *