HTML, que significa HyperText Markup Language, é a linguagem usada para criar e estruturar páginas na web. Ele funciona como o esqueleto de um site, organizando o conteúdo em elementos chamados de tags, que indicam ao navegador o que cada parte representa, como títulos, parágrafos, imagens ou links. Embora o HTML seja responsável por dar forma e significado ao conteúdo, ele não define aparência nem interatividade; para isso, utiliza-se o CSS, que cuida do estilo visual, e o JavaScript, que adiciona dinamismo e funções extras. Assim, o HTML é a base de qualquer página da internet, permitindo que navegadores interpretem e exibam as informações de maneira correta para os usuários.
Para que serve o HTML?
O HTML serve para construir a estrutura de uma página da internet, funcionando como a base sobre a qual todo site é criado. Ele organiza o conteúdo em blocos e elementos, como títulos, parágrafos, imagens, links, listas, tabelas e formulários, permitindo que o navegador entenda e exiba essas informações corretamente para o usuário. Sem o HTML, os sites não teriam formato nem organização, apenas dados soltos. É por meio dele que o conteúdo da web ganha sentido, tornando-se navegável e acessível.
Diferença entre HTML, CSS e JavaScript
HTML, CSS e JavaScript trabalham juntos para formar qualquer site, mas cada um tem um papel diferente. O HTML é a estrutura, ou seja, define o conteúdo da página: textos, imagens, links, listas, tabelas, formulários. O CSS é a aparência, ele controla as cores, os tamanhos, as fontes, os espaços e o layout, deixando a página bonita e organizada. Já o JavaScript é a parte da interação e do movimento, permitindo que a página reaja às ações do usuário, como cliques, animações, validação de formulários e funções mais avançadas.
Uma forma simples de entender: o HTML é o corpo, o CSS é a roupa e o JavaScript é o cérebro que dá vida e interatividade ao site.
Estrutura básica de um documento HTML
A estrutura básica do HTML é como o esqueleto mínimo que toda página precisa para funcionar. Ela sempre começa declarando o tipo de documento e, em seguida, divide a página em duas partes principais: o head e o body.
No head ficam informações sobre a página, como o título que aparece na aba do navegador, a configuração de caracteres e links para arquivos externos (como CSS ou ícones).
No body fica o conteúdo visível da página, como textos, imagens, links e tudo que o usuário enxerga e interage. Como visto logo a baixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
</head>
<body>
Conteúdo da página vai aqui
</body>
</html>
O que são Tags?
Em HTML, tags são os elementos que dizem ao navegador como interpretar e exibir cada parte do conteúdo da página. Elas são como instruções que envolvem o conteúdo e indicam sua função: por exemplo, <h1> define um título, <p> define um parágrafo, <a> cria um link, e <img> insere uma imagem. Cada tag geralmente vem em pares, com uma tag de abertura (como <p>) e uma tag de fechamento (como </p>), embora algumas tags sejam autocontidas, como <img> ou <br>. As tags são a base da estrutura do HTML, permitindo organizar e formatar o conteúdo de maneira clara e funcional. Aqui estão algums das tags mais utilizadas:
<!DOCTYPE html> - Declara o tipo de documento
<html> - Elemento raiz que envolve todo o conteúdo da página
<head> - Contém metadados e informações sobre a página
<title> - Define o título da página que aparece na aba do navegador
<meta> - Fornece metadados como charset e viewport
<body> - Contém o conteúdo visível da página
<h1> a <h6> - Define títulos, do mais importante (h1) ao menos importante (h6)
<p> - Define um parágrafo de texto
<a> - Cria um link para outra página ou recurso
<img> - Insere uma imagem na página
<ul> - Cria uma lista não ordenada (com marcadores)
<ol> - Cria uma lista ordenada (numerada)
<li> - Define um item de lista, usado dentro de <ul> ou <ol>
<div> - Define uma seção ou divisão genérica na página
<span> - Define uma seção inline para estilização ou agrupamento
<form> - Cria um formulário para entrada de dados
<input> - Define um campo de entrada dentro de um formulário
<button> - Cria um botão clicável
<table> - Cria uma tabela
<tr> - Define uma linha em uma tabela
<th> - Define um cabeçalho de célula em uma tabela
<td> - Define uma célula de dados em uma tabela
<br> - Insere uma quebra de linha
<hr> - Insere uma linha horizontal
<strong> - Define texto em negrito, com ênfase forte
<em> ou <i> - Define texto em itálico, com ênfase
<u> - Define texto sublinhado
<s> - Define texto tachado
<sup> - Define texto sobrescrito (acima da linha)
<sub> - Define texto subscrito (abaixo da linha)
<mark> - Define texto marcado ou destacado
<pre> - Define texto pré-formatado, preservando espaços e quebras de linha
<nav> - Define uma seção de navegação
<section> - Define uma seção temática na página
<article> - Define um artigo ou conteúdo independente
<header> - Define o cabeçalho de uma seção ou página
<footer> - Define o rodapé de uma seção ou página
<main> - Define o conteúdo principal da página
<aside> - Define conteúdo lateral ou complementar
Consulte no site oficial da w3schools todas as tags.
O que são Atributos?
Em HTML, atributos são informações extras que você adiciona às tags para especificar ou modificar seu comportamento e aparência. Eles funcionam como “detalhes” que dizem ao navegador como aquela tag deve se comportar ou que conteúdo ela deve usar.
Por exemplo, na tag <a> (que cria links), o atributo href = "url_do_site" define para onde o link vai.
Ou na tag <img> (que insere imagens), o atributo src = "caminho_da_imagem" indica qual imagem deve ser exibida, e o atributo alt = "descrição_da_imagem" fornece uma descrição alternativa para a imagem, útil para acessibilidade.
Aqui estão alguns dos atributos mais comuns em HTML:
id = "nome" -> Define um identificador único para o elemento. Usado para estilização com CSS ou manipulação com JavaScript.
class = "nome" -> Define uma ou mais classes para o elemento. Usado para agrupar elementos com a mesma característica para estilização com CSS.
type = "tipo" -> Define o tipo de elemento, especialmente em formulários. Por exemplo, em <input>, pode ser text, password, email, etc. Ou em <ul>, pode ser circle, square, disc...
src = "caminho" -> Usado em <img> para especificar o caminho da imagem a ser exibida. Ou usado em <script> para especificar o caminho do arquivo JavaScript.
alt = "descrição" -> Usado em <img> para fornecer uma descrição alternativa da imagem, importante para acessibilidade e SEO.
title = "título" -> Fornece um título ou dica que aparece quando o usuário passa o mouse sobre o elemento.
width e height = "valor" -> Define a largura e altura de elementos como imagens, vídeos ou canvas. Pode ser em pixels (px) ou porcentagem (%).
href = "url" -> Usado em <a> para especificar o destino do link, seja uma página interna ou externa.
target = "_self" ou "_blank" -> Define onde o link será aberto. _self abre na mesma aba, _blank abre em uma nova aba.
Consulte no site oficial da w3schools todos os atributos.
Trabalhando com Títulos
Em HTML, os títulos são elementos que servem para organizar e hierarquizar o conteúdo de uma página, indicando quais partes são mais importantes ou principais e quais são secundárias. Eles vão do mais importante ao menos importante, usando as tags <h1> a <h6>. Além de organizar visualmente o texto (os navegadores geralmente deixam os títulos maiores e em negrito), os títulos também ajudam motores de busca (como o Google) a entender a estrutura e o tema do conteúdo da página. Isso é importante para SEO (Search Engine Optimization), pois títulos bem estruturados podem melhorar a visibilidade do site nos resultados de busca.
Veja como funcionam:
Título usando <h1>
Título usando <h2>
Título usando <h3>
Título usando <h4>
Título usando <h5>
Título usando <h6>
Trabalhando com Textos
Em HTML, o texto é o conteúdo principal que você vê em uma página da web. Ele pode ser organizado e formatado usando várias tags específicas para diferentes tipos de texto e estilos. A tag mais comum para parágrafos de texto é <p>, que cria um bloco de texto separado. Além disso, existem tags para enfatizar ou destacar partes do texto, como <strong> (negrito), <em> (itálico), <u> (sublinhado) e <mark> (destacado). Também há tags para criar listas ordenadas (<ol>) e não ordenadas (<ul>), bem como listas de definição (<dl>, <dt>, <dd>). Outras tags úteis incluem <br> para quebras de linha e <hr> para linhas horizontais que separam seções de texto. Essas tags ajudam a estruturar o conteúdo textual, tornando-o mais legível e organizado.
Trabalhando com Listas
Em HTML, listas são usadas para organizar itens relacionados de forma clara e estruturada. Existem três tipos principais de listas: listas ordenadas (<ol>), listas não ordenadas (<ul>) e listas de definição (<dl>). As listas ordenadas são numeradas, indicando uma sequência ou prioridade entre os itens, enquanto as listas não ordenadas usam marcadores (como pontos ou círculos) para listar itens sem uma ordem específica. Cada item dentro dessas listas é definido pela tag <li> (list item). Já as listas de definição são usadas para pares de termos e suas descrições, utilizando as tags <dt> (definition term) para o termo e <dd> (definition description) para a descrição. As listas ajudam a tornar o conteúdo mais legível e fácil de entender, especialmente quando há vários itens relacionados.
Exemplo de cada uma das listas: 1. Lista Ordenada:
- Item 1
- Item 2
- Item 3
- Item A
- Item B
- Item C
- HTML
- Linguagem de Marcação para a Criação de Site's
- CSS
- Linguagem de Marcação para a Criação de Design de um Site
- Javascript
- Linguagem de Programação para a interatividade de um Site
Imagens
Em HTML, imagens são elementos visuais que podem ser inseridos em uma página da web para torná-la mais atraente e informativa. Elas são adicionadas usando a tag <img>, que é uma tag autocontida (não possui tag de fechamento) e requer o atributo src para especificar o caminho ou URL da imagem a ser exibida. Além disso, é altamente recomendável usar o atributo alt para fornecer uma descrição alternativa da imagem, o que é importante para acessibilidade, permitindo que leitores de tela descrevam a imagem para usuários com deficiência visual. Outros atributos úteis incluem width e height, que definem as dimensões da imagem, e title, que pode fornecer um título ou dica quando o usuário passa o mouse sobre a imagem. As imagens ajudam a melhorar a experiência do usuário, tornando o conteúdo mais envolvente e fácil de entender.
Aqui está um exemplo de como inserir uma imagem em HTML:
<img src="caminho_da_imagem.jpg" alt="Descrição da Imagem" width="300" height="200">
Como funciona na prática:
Links
Em HTML, links são elementos que permitem conectar uma página da web a outra, seja dentro do mesmo site ou para um site externo. Eles são criados usando a tag <a> (âncora), que envolve o texto ou o elemento clicável e utiliza o atributo href para especificar o destino do link. Quando um usuário clica em um link, ele é redirecionado para a URL definida no atributo href. Links são essenciais para a navegação na web, facilitando o acesso a informações relacionadas e recursos adicionais. Além disso, os links podem ser estilizados com CSS para melhorar sua aparência e usabilidade. E também podem incluir atributos adicionais, como target, que define onde o link será aberto (na mesma aba ou em uma nova aba).
Aqui estão alguns exemplos de links:
Acesse meu Perfil no Linkedin (Link Externo abrindo em nova aba com blank)
Acesse a Página do Próximo Módulo (Link Interno abrindo na mesma aba com self)