1. O que é HTML

O HTML é a linguagem usada para estruturar páginas da web.

Ele define elementos como:

títulos
textos
imagens
links
vídeos
formulários

Sem HTML não existe página web.

Quando você abre um site no navegador, o navegador interpreta o código HTML e transforma o código em uma página visual.

2. O que é HTML5

O HTML5 é a versão moderna do HTML.

Ele trouxe diversas melhorias como:

suporte nativo a áudio e vídeo
novos elementos semânticos
melhor integração com JavaScript
melhor estrutura para SEO
suporte a aplicações web modernas

HTML5 é mantido pela World Wide Web Consortium e pela WHATWG.

3. Estrutura básica de uma página HTML

Toda página HTML possui uma estrutura padrão.

Exemplo básico:

<!DOCTYPE html>
<html lang="pt-BR"><head>
<meta charset="UTF-8">
<title>Minha Primeira Página</title>
</head><body><h1>Olá Mundo</h1>
<p>Minha primeira página HTML.</p></body>
</html>

Vamos entender cada parte.

DOCTYPE

<!DOCTYPE html>

Indica ao navegador que o documento usa HTML5.

Tag HTML

<html>

É o elemento raiz do documento.

Tudo dentro da página deve estar dentro dessa tag.

Head

<head>
</head>

Contém informações sobre a página, como:

título
charset
SEO
links para CSS
scripts

Body

<body>
</body>

Contém todo o conteúdo visível da página.

4. O que são Tags HTML

HTML funciona com tags.

Exemplo:

<h1>Título</h1>

Estrutura:

<tag>conteúdo</tag>

Algumas tags não possuem fechamento:

<br>
<img>

5. Principais Tags HTML

Títulos

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Subtítulo menor</h3>

Existem seis níveis:

h1
h2
h3
h4
h5
h6

Parágrafos

<p>Este é um parágrafo.</p>

Quebra de linha

<br>

Linha horizontal

<hr>

6. Links

Links conectam páginas.

<a href="https://google.com">Acessar Google</a>

Estrutura:

a = anchor
href = destino do link

Abrir em nova aba

<a href="https://google.com" target="_blank">Google</a>

7. Imagens

Para inserir imagens usamos a tag:

<img src="imagem.jpg" alt="Descrição da imagem">

Explicação:

atributo	função
src	caminho da imagem
alt	descrição da imagem

8. Listas

Lista não ordenada

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Resultado:

Item 1
Item 2

Lista ordenada

<ol>
<li>Primeiro</li>
<li>Segundo</li>
</ol>

Resultado:

Primeiro
Segundo

9. Tabelas

HTML permite criar tabelas.

<table><tr>
<th>Nome</th>
<th>Idade</th>
</tr><tr>
<td>Maria</td>
<td>25</td>
</tr></table>

Elementos:

tag	função
table	tabela
tr	linha
th	cabeçalho
td	célula

10. Elementos semânticos do HTML5

HTML5 trouxe elementos que ajudam a organizar melhor o conteúdo.

Exemplo:

<header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<footer></footer>

Header

Cabeçalho da página.

Nav

Área de navegação.

Main

Conteúdo principal da página.

Section

Seção de conteúdo.

Article

Conteúdo independente.

Footer

Rodapé da página.

11. Formulários

Formulários permitem interação com o usuário.

Exemplo:

<form><label>Nome</label>
<input type="text"><button>Enviar</button></form>

Tipos de input

tipo	função
text	texto
email	email
password	senha
number	números
date	data

Exemplo:

<input type="email">

12. Áudio e vídeo no HTML5

HTML5 permite inserir mídia sem plugins.

Vídeo

<video controls><source src="video.mp4" type="video/mp4"></video>

Áudio

<audio controls><source src="audio.mp3" type="audio/mp3"></audio>

13. Estrutura recomendada de projeto

Organização básica de um projeto HTML.

projeto
│
├── index.html
├── css
│   └── style.css
│
├── js
│   └── script.js
│
└── images
    └── logo.png

14. Boas práticas em HTML

✔ usar estrutura semântica
✔ usar indentação no código
✔ usar nomes claros
✔ adicionar alt nas imagens
✔ separar CSS e JS

15. Ferramentas para praticar HTML

Alguns sites permitem escrever HTML diretamente no navegador.

CodePen

https://codepen.io

Permite criar projetos front-end online.

JSFiddle

https://jsfiddle.net

Editor online para HTML, CSS e JavaScript.

HTML Playground

HTML5 Playground

https://playcode.io

16. Documentação oficial

Estudar pela documentação é essencial.

Documentação do HTML

MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/HTML

Uma das melhores documentações do mundo.

Referência de HTML

W3Schools

https://www.w3schools.com/html

Muito usado por iniciantes.

Documentação da especificação

WHATWG

https://html.spec.whatwg.org

17. Exercícios para iniciantes

Para praticar HTML tente criar:

Exercício 1

Uma página com:

título
parágrafo
imagem
link

Exercício 2

Criar uma lista de:

comidas favoritas
filmes favoritos

Exercício 3

Criar uma tabela com:

nome
idade
cidade

18. Primeiro projeto HTML sugerido

Crie uma página chamada:

index.html

Conteúdo:

foto
nome
descrição
redes sociais
lista de habilidades

Isso cria seu primeiro portfólio simples.

Conclusão

O HTML5 é a base de toda a web.

Ele permite estruturar páginas e aplicações usadas todos os dias na internet.

Aprender HTML é o primeiro passo para se tornar desenvolvedor web.

Depois dele normalmente se aprende:

CSS (estilização)
JavaScript (interatividade)