HTML5

📚 Conteúdo Educacional

Domine HTML5 - Iniciante

O que é HTML?

HTML (HyperText Markup Language) é a linguagem base para construção de páginas web. Não é uma linguagem de programação, mas sim de marcação que define a estrutura e o significado do conteúdo.

Principais Características:

Utiliza tags envolvidas por < >
Hierárquica (elementos pai e filhos)
Semântica (significado do conteúdo)
Independente de plataforma

Tags Essenciais para Iniciantes

<h1> a <h6>

Títulos hierárquicos
Importante: Use apenas um H1 por página

<p>

Parágrafos de texto

<a href="...">

Links de navegação
Atributo href define o destino

<img src="..." alt="...">

Inserir imagens
Dica: Sempre use alt para acessibilidade

<ul> e <ol>

Listas não ordenadas e ordenadas
Com itens <li>

Inserindo Multimídia

<!-- Imagem -->
<img src="caminho/da/imagem.jpg" 
     alt="Descrição acessível" 
     width="600" 
     height="400">

<!-- Vídeo com controles -->
<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    Seu navegador não suporta vídeos HTML5
</video>

<!-- Áudio -->
<audio controls>
    <source src="audio.ogg" type="audio/ogg">
</audio>

Boas Práticas:

Sempre inclua textos alternativos (alt)
Use formatos compatíveis (MP4, WebM, OGG)
Defina dimensões para evitar layout shift

Atributos Importantes

Atributo	Uso	Exemplo
id	Identificador único	<div id="header">
class	Classificação para CSS/JS	<p class="destaque">
style	CSS inline (evitar)	<span style="color:red">
data-*	Armazenar dados customizados	<div data-usuario="123">

Estrutura Básica

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Documento HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

Elementos Semânticos

Elementos Tradicionais

<div id="header">
<div class="nav">
<div class="main-content">

HTML5 Semântico

<header>
<nav>
<main>

Vantagens: Melhoria na acessibilidade, SEO e manutenibilidade

Novos Elementos

<section> - Agrupa conteúdo relacionado
<article> - Conteúdo independente (posts, artigos)
<aside> - Conteúdo secundário/sidebar
<figure> e <figcaption> - Imagens com legenda
<time> - Representa datas/horários

Formulários Avançados

<input type="email" required>
<input type="date" min="2024-01-01" max="2024-12-31">
<input type="range" min="0" max="100" step="5">

Novos Tipos: email, url, tel, search, number, range, color, date

Acessibilidade

<nav aria-label="Menu principal">
<img src="logo.png" alt="Logo da empresa">
<button aria-expanded="false">Menu</button>

Atributo role define a função do elemento
Atributo tabindex controla a navegação por tab

Multimídia

<video controls>
    <source src="video.mp4" type="video/mp4">
    Seu navegador não suporta vídeo HTML5
</video>

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

Armazenamento

// Local Storage
localStorage.setItem('chave', 'valor');
const valor = localStorage.getItem('chave');

// Session Storage
sessionStorage.setItem('sessao', 'dados');

APIs HTML5

Geolocation - Acesso à localização
Drag and Drop - Arrastar e soltar elementos
Web Workers - Processamento em segundo plano
WebSocket - Comunicação bidirecional

🎬 Playlist HTML5

Conteúdo produzido e distribuído pelo Prof. Gustavo Guanabara
Direitos autorais © 2013-2023 Curso em Vídeo
Esta apresentação contém trechos da playlist oficial disponível em Curso de HTML5 - Curso em Vídeo