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ão | Ano |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
| HTML5.1 | 2016 e 2017 (2ª ed.) |
| HTML5.2 | 2017 |
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).
- 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.
- 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 () e de negrito ().
Tags Block-level
Existem três tags no nível do bloco que todo documento HTML precisa ter: , , e .
- A tag é o elemento de nível mais alto que envolve todas as páginas HTML.
- A tag contém as informações meta, como o título da página, descrição, etc.
- A tag 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 _ _ a _ _, 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 _ _ .
- 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 _ _ ou .
- Existem também as tags para listas, elas podem ser ordenadas
<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 renderizaria um elemento em negrito, enquanto as tags 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.
O post O que é HTML e para que serve? apareceu primeiro em Henrique Marques Fernandes.
Top comments (0)