aula_02_HTML

•

FSV

Welton Fabricio de Brito Ribeiro

31.03.2015

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 60 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Web

1.748 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET Prof. Cayo Fontana
HTML
LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO
SUMÁRIO
 Introdução (breve resumo)
 Motivação
 Consórcio W3C – Mantenedor
 HTML Básico (exemplo)
 Estrutura e Sintaxe do HTML
 HTML x XML x XHTML
INTRODUÇÃO
O que é?
HyperText Markup Language – Linguagem de Marcação de Hipertexto
 Utilizado para disseminar e distribuir informações pela internet
 Utiliza a Web / HTTP
 Padrão de arquitetura de software: Cliente / Servidor
 É uma linguagem declarativa 
 Não é uma linguagem de programação
 Não implementa procedimentos e/ou funções
MOTIVAÇÃO
Porque?
 Compartilhamento de informações
 Aplicações disponíveis – 24 / 7
 Praticidade
 Segurança?
 Padronização
MOTIVAÇÃO
Porque?
 Compartilhamento de informações
 Aplicações disponíveis – 24 / 7
 Praticidade
 Segurança?
 Padronização
Problema
 Variedade de Navegadores (Browsers) e versões
MANTENEDOR – CONSÓRCIO W3C
W3C
Décadas anteriores...
Cliente 1
Cliente 2
Cliente 3
Servidor Web
GET <URL> HTTP/1.1
MANTENEDOR – CONSÓRCIO W3C
W3C
Décadas anteriores...
Cliente 1
Cliente 2
Cliente 3
Servidor Web
HTTP/1.1 200 OK
Cabeçalho
De
Resposta
HTTP/1.1 200 OK
Date: 25 Feb 2015
Server: Apache
X-Powered-By: PHP/5.5.1
Content-Length: 127
Content-Type: text/html
...
Corpo
Da
Resposta
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
MANTENEDOR – CONSÓRCIO W3C
W3C
Décadas anteriores...
Cliente 1
Cliente 2
Cliente 3
Servidor Web
MANTENEDOR – CONSÓRCIO W3C
W3C
O w3c, ou Consórcio da World Wide Web, é uma organização internacional que 
estabelece e implementa padrões para a web
 Padrões de conteúdo: HTML, XML, XHTML, CSS, entre outros
 Princípios de arquitetura: estruturação e organização física, recomendações de 
padrões web, orquestração entre HTML-DOM-Script, e mais
 Protocolos: Além do HTTP, principal protocolo da web, o w3c também trabalha no 
desenvolvimento e aprimoramento de outros protocolos como o Protocolo Simples 
de Acesso à Objetos (SOAP) e o Protocolo XML
ETIQUETAS (TAGS) / ELEMENTOS HTML
Exibição de informações na web
 Estudamos que: navegadores (Browsers) interpretam HTML!
Simulação: Consultando www.catolicasuperior.com.br
 Protocolo: ?
 Método: ?
 Porta: ?
 Arquivo: ?
ETIQUETAS (TAGS) / ELEMENTOS HTML
Exibição de informações na web
 Estudamos que: navegadores (Browsers) interpretam HTML!
Simulação: Consultando www.catolicasuperior.com.br
 Protocolo: HTTP (se não informado, default)
 Método: GET (método HTTP padrão para requisições na web)
 Porta: 80 (se não informada, default)
 Arquivo: se não informado, definido pelo servidor web (index.htm(l), index.php, 
default.aspx, etc)
ETIQUETAS (TAGS) / ELEMENTOS HTML
Resposta de requisição anterior...
Faculdade Católica Salesiana
Seja bem vindo à Faculdade Católica Salesiana!
Confira o calendário letivo!
Rematrícula 2015!
ETIQUETAS (TAGS) / ELEMENTOS HTML
Reproduzindo o resultado da requisição anterior...
Salve o arquivo com um nome arbitrário, defina sua extensão como HTML, e execute-o
em um navegador de sua preferência.
ETIQUETAS (TAGS) / ELEMENTOS HTML
Teste prático – Resultado obtido no navegador:
Resultado diferente do esperado...
... porque isso aconteceu?
ETIQUETAS (TAGS) / ELEMENTOS HTML
Embora navegadores (browsers – w3c) sejam capazes de ler textos puros (cadeia de 
caracteres), durante a execução do teste foi possível notar que:
 Podem não exibir acentuação de caracteres corretamente
 Não exibem quebra de linha
ETIQUETAS (TAGS) / ELEMENTOS HTML
Embora navegadores (browsers – w3c) sejam capazes de ler textos puros (cadeia de 
caracteres), durante a execução do teste foi possível notar que:
 Podem não exibir acentuação de caracteres corretamente
 Não exibem quebra de linha
Como organizar?
 Aplicação de Etiquetas (Tags)
ETIQUETAS (TAGS) / ELEMENTOS HTML
Organizando o HTML anterior com o uso de Etiquetas (Tags):
ETIQUETAS (TAGS) / ELEMENTOS HTML
Como ficou o conteúdo HTML:
Conclusão: uso de Tags HTML organizam o conteúdo disponível no navegador
Composição do HTML
 Estrutura e Sintaxe do HTML
 Instrução Doctype (tipo de documento)
 Declaração de codificação de caracteres
 Tags (elementos) e atributos
 Referência de caracteres
 Gráficos com SVG e MathML
 XML e XHTML
ESTRUTURA E SINTAXE DO HTML
ESTRUTURA E SINTAXE DO HTML
HTML Tags / Elemento HTML ?
 Componentes individuais de um documento HTML, seguindo os padrões do DOM 
(Modelo de Objeto de Documento)
Em outras palavras:
 Rótulos utilizados para explicitar aos navegadores a maneira em que o 
conteúdo do documento HTML deve ser exibido
Objetivo:
 Fornecer e definir padrões de apresentação ao conteúdo contido nos arquivos 
HTML
Estrutura hierárquica em árvore de tags (elementos HTML)
ESTRUTURA E SINTAXE DO HTML
Estrutura hierárquica em árvore de tags (elementos HTML)
Tags obrigatórias!
ESTRUTURA E SINTAXE DO HTML
ESTRUTURA E SINTAXE DO HTML
 Definem a estrutura de exibição 
de um conteúdo
 Qual conteúdo pode possuir (se puder)
 Quais atributos pode possuir (se puder)
 Cada Elemento (Tag) pode conter:
 Outro(s) elemento(s) e/ou textos 
(caracteres) e/ou comentários
 Void Elements: elementos que não 
possuem conteúdo, mas podem 
possuir atributos
 Exemplos: area, base, br, col, 
command, embed, hr, img, input, 
keygen, link, meta, param, source, 
track e wbr
Sintaxe de uma Tag
<nomedatag>
.
.
.
</nomedatag>
Abertura 
Fechamento
Conteúdo
ESTRUTURA E SINTAXE DO HTML
Tag de Abertura
<nomedatag>
Colchete Angular
Direito
Colchete Angular
Esquerdo
Nome do Elemento
HTML
(semântica relativa 
à sua aplicação)
ESTRUTURA E SINTAXE DO HTML
Tag de Fechamento
</nomedatag>
Colchete Angular
Direito
Colchete Angular
Esquerdo
Nome do Elemento
HTML
(semântica relativa 
à sua aplicação)
Barra
ESTRUTURA E SINTAXE DO HTML
HTML Básico: 3 tags fundamentais
<html> ... </html>
 Nó raiz, indica que qualquer informação contida é código HTML
<head> ... </head>
 Cabeçalho do HTML, especifica um conjunto de configurações e definições
<body> ... </body>
 “Corpo”: define que todas as informações “serão” exibidas na janela do 
navegador
ESTRUTURA E SINTAXE DO HTML
HTML Básico: 3 tags fundamentais
<title>
 Nó raiz, indica que qualquer informação contida é código HTML
<head>
 Cabeçalho do HTML, especifica um conjunto de configurações e definições
<body>
 “Corpo”: define que todas as informações “serão” exibidas na janela do 
navegador
ESTRUTURA E SINTAXE DO HTML
Estrutura básica:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
ESTRUTURA E SINTAXE DO HTML
 Especifica a versão do HTML para o navegador
 Não é um elemento HTML (Tag)
 Declaração sempre na primeira linha do código
 Possuem 3 formatos:
 Normal
 Obsoleto
 Compatível com ferramentas legadas
INSTRUÇÃO DOCTYPE
Normal – normal doctype
 Declaração: <!DOCTYPE html>
 Fortemente recomendado – W3C / HTML5
 Insensível ao caso – case insensitive
 <!DOCTYPE html>
 <!DOCTYPE HTML>
 <!doctype HTML>
 <!DocTYpe hTMl>
INSTRUÇÃO DOCTYPE
Obsoleto – deprecated doctype
 Declaração: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" 
"http://www.w3.org/TR/REC-html40/strict.dtd">
 Utilizada na versão do HTML 4.01
 O arquivo DTDespecifica regras do HTML para navegadores exibirem corretamente o 
conteúdo
 Insensível ao caso – case insensitive
INSTRUÇÃO DOCTYPE
Versão do HTML Declaração
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5 <!DOCTYPE html>
INSTRUÇÃO DOCTYPE
Compatível com ferramentas legadas – legacy-tool-compatible doctype
 Declaração: <!doctype HTML system "about:legacy-compat">
 Utilizada para navegadores antigos que não reconhecem características
(features) mais recentes do HTML
INSTRUÇÃO DOCTYPE
DECLARAÇÃO DE CODIFICAÇÃO DE CARACTERES
 É um mecanismo para especificar a codificação de caracteres, usado para 
armazenar ou transmitir um documento HTML (usado durante a serialização)
 Sempre deve ser definido dentro do elemento <head>
Declaração:
 <meta charset="UTF-8">
Nota: 
• No HTML(5) não há tag de fechamento para o elemento <meta>
• No XHTML deve-se utilizar uma tag de fechamento para <meta />
HTML x XML x XHTML
XML – eXtensible Markup Language
Conceito
 Padrão de recomendação do W3C para gerar linguagens de marcação
Objetivo
 Definir especificações de representação de dados
 Padronizar a comunicação de dados
É amplamente utilizado por milhões de aplicações
Influenciou o XHTML (XML + HTML)
XML E XHTML
XML – eXtensible Markup Language
Motivação
 Padronizar a troca de informações entre sistemas pela internet 
(multiplataforma)
Características
 Segregação do formato e conteúdo
 Legibilidade simples
 Definição ilimitada de Tags
XML E XHTML
XML – eXtensible Markup Language
<xml version=“1.0”>
<professor nome=“Cayo Fontana”>
<disciplinas>
<disciplina nome=“Programação Para Internet” horas=“80”>
<cursos>
<curso nome=“Sistemas de Informação”>
<curso nome=“Tecnologia em Análise e Desenvolvimento de Sistemas”>
</cursos>
</disciplina>
</disciplinas>
</professor>
XML E XHTML
XHTML – eXtensible HyperText Markup Language
Conceito
 Unificação da linguagem HTML com o padrão de marcação XML
Objetivo
 Padronizar a linguagem HTML para torná-la universalmente única
XHTML trouxe uma grande vantagem para os programadores “front-end” por 
evitar tratamento segregados e/ou específicos para diferentes plataformas
HTML x XML x XHTML
HTML
<body>
<p> Teste HTML
</body>
XHTML
<body>
<p>
Teste HTML
</p>
</body>
TAGS E ATRIBUTOS
Vimos que Tags (etiquetas) são elementos da linguagem HTML que estruturam a maneira em 
que uma informação será apresentada pelo navegador (browser)
 Tags podem conter atributos
Atributos são:
• Responsáveis por prover informações adicionais sobre o elemento
• Sempre informados na tag de abertura
• W3C recomenda fortemente o uso de aspas dupla na definição dos valores dos 
atributos (ou aspas simples quando utilizar aspas duplas no valor)
• São formados por pares de nome=“valor”
<nometag atributo1=“valor” atributo2=“valor” ... atributoN=“valorN”></nometag>
ATRIBUTOS GLOBAIS
Atributos globais no HTML são atributos que podem ser utilizados por todos os 
elementos (Tags)
O conjunto de atributos globais no HTML 5 são:
 accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, 
hidden, id, lang, spellcheck, style, tabindex, title, translate
Definição
 accesskey: define uma tecla de atalho ou o foco no elemento, quando o usuário 
navega pelo teclado
Ex: <a href=www.catolicasuperior.com.br accesskey=“M”>Faculdade</a>
ATRIBUTOS GLOBAIS
 class: define uma classe para o elemento, servindo de referência para 
estilização e scripts
Ex: 
<style> p.introducao { color: red; } </style>
<p class="introducao">Header 1</p>
 contenteditable: define se o conteúdo do elemento é editável ou não, e ainda se 
esta condição lhe é herdada. Admite os valores true, false ou inherit.
Ex: <article contenteditable=“true”>Este texto é editável.</article>
ATRIBUTOS GLOBAIS
 contextmenu: associa um elemento, ao qual foi aplicado, com um menu de 
contexto criado pelo uso do elemento <menu>. A associação faz-se atribuindo 
ao valor do atributo “id” do menu o mesmo valor do atributo contextmenu do 
elemento em questão (atualmente, apenas para o Mozilla Firefox)
Ex: <label id="labelMenuCursos" contextmenu="menuCursos">
Clique para ver o menu
<menu id="menuCursos" type="context">
<menu label="cursos"><menuitem label=“Item1”>
</menuitem></menu></menu></label>
ATRIBUTOS GLOBAIS
 data-*: utilizado para armazenar dados de contexto (de negócio) ao elemento 
em que foi definido. Obrigatoriamente, inicia-se com o prefixo “data-” e seu 
sufixo poderá receber qualquer string.
Ex: <option data-estados=“ES, MG, RJ, SP">Sudeste</option>
 dir: define o sentido (orientação) da escrita dos textos
Ex: <p dir="rtl">Todo este conteúdo terá seu alinhamento à direita.</p>
 dropzone: define um elemento que receberá, em seu conteúdo, um elemento 
arrastável na página. Pode assumir os valores copy, move ou link, criando, 
movendo ou gerando um link (ligação) para o elemento arrastável, 
respectivamente
Ex: <div dropzone="copy"></div>
ATRIBUTOS GLOBAIS
 draggable: define se um elemento será, ou não, arrastável pelo corpo do html
Os possíveis valores são true, false e auto resultando em permitir o 
comportamento, não permitir ou que o comportamente seja de acordo com o 
padrão do navegador, respectivamente 
Ex: <p id="paragrafoArrastavel" draggable="true">Este é um parágrafo 
arrastável. Arraste-o para o retângulo acima.</p>
 hidden: indica se o elemento deve, ou não, ser exibido na tela do navegador. 
Por ser um atributo booleano, não recebe valor
Ex: <a hidden href=“#" target="blank">Este é um link escondido (oculto)</a>
ATRIBUTOS GLOBAIS
 id: cria um identificar unívoco para o elemento, no html. Seu valor não pode 
receber caracter vazio, podendo assumir letras (caracter inicial), números, hífens, 
sublinhado, dois pontos ou pontos
Ex: <div id=“div-id”></div>
 lang: indica o idioma primário do texto inserido no elemento em que foi 
definido
Ex: <p>A palavra <span lang=“en-US”>information</span> significa 
informação em inglês.</p>
ATRIBUTOS GLOBAIS
 spellcheck: submete a grafia e sintaxe do conteúdo, informado pelo usuário, a 
um corretor ortográfico (gerenciado pelo navegador). Por ser um atributo 
booleano, não recebe valor
Ex: <input type="text" title="Digite palavras com erros gramaticais para 
visualizar a ação do spellcheck" spellcheck></input>
 style: estabelece as regras CSS para o elemento ao qual foi aplicado
Ex: <p style=“background-color: #C02B2B; color: #FFFFFF”></p>
ATRIBUTOS GLOBAIS
 tabindex: define uma ordem de recebimento de foco através da navegação do 
usuário por tabulação (tecla tab). Inicia-se com números inteiros positivos e segue 
uma ordem crescente. Se informado número negativo, não receberá foco, se 
infomar valor zero (0), receberá foco de acordo com a ordem do htmlEx: <input type="text" tabindex="1" /><input type="text" tabindex="3" />
 title: fornece uma informação adicional para o elemento ao qual foi definido. Esta 
informação é um texto (string). Quando omitido, esta informação é herdada de 
seu elemento pai, caso este possua-o.
Ex: <input type="submit" text="Enviar" title="Botão de envio de dados" />
TAGS E ATRIBUTOS – HTML BÁSICO
HTML Básico
<html> Documento HTML
<head> Define o cabeçalho do documento HTML
<body> Conteúdo de exibição do HTML
<title> Título do Documento HTML
<h1> to <h6> Títulos (por nível)
<p> Parágrafos
<br> Insere quebra de linha
<hr> Insere uma linha horizontal
<!--...--> Insere comentário
TAGS E ATRIBUTOS – FORMATAÇÃO
<acronym> *
Acrônimo
<abbr> Abraviatura ou acrônimo
<address> Define informações de contatos (em artigos, publicações, etc)
<b> Negrito
<big> *
Define um texto grande
<blockquote> Bloco de citação (utilizado para enfatizar uma citação textual)
<center> *
Centraliza um texto
<cite> Título de uma obra (trabalho)
<code> Formata a fonte para um padrão web computer code
<em> Itálico
<font> *
Configura fonte, cor e tamanho do texto
TAGS E ATRIBUTOS – FORMATAÇÃO
<i> Itálico
<mark> Marca (realça) o texto
<pre> Preserva a definição pré-formatada de um texto (antes do navegador 
renderizá-lo)
<progress> Barra progressiva (necessita tratamento com script para animação)
<q> Breve citação (aspas duplas)
<small> Define um texto pouco relevante
<del> Taxa um texto
<strong> Define um texto muito relevante
<sub> Define um texto subscrito
<sup> Define um texto sobrescrito
<time> Data e hora
<u> Define um texto sublinhado
TAGS E ATRIBUTOS - FORMULÁRIO
<form> Define um formulário de inserção de dados
<input> Elemento de entrada de informação (polimórfico)
<textarea> Define uma caixa de texto de multilinhas
<button> Define um botão 
<select> Combobox / Dropdown (caixa de lista de opções)
<optgroup> Grupo de opções em um elemento <select>
<option> Elementos-item (opções) de um <select>
<label> Define um rótulo para um elemento <input>
<fieldset> Agrupa um conjunto de itens em um form
<legend> Legenda para o agrupador de itens (<fieldset)
<datalist> Especifica um conjunto de opções para um elemento <input> (função autocompletar)
<output> Define o resultado de um cálculo (necessita de script)
TAGS E ATRIBUTOS – METADADOS
<head> Conteúdo de informações sobre o documento HTML
<meta> Define metadados do documento (descrição, chave, autor, data de 
modificações, etc)
<base> Especifica um diretório padrão e o comportamento padrão para hiperlinks
<basefont> *
Specifies a default color, size, and font for all text in a document
TAGS E ATRIBUTOS - LISTAS
<ul> Define uma lista desordenada
<ol> Define uma lista ordenada
<li> Item de lista
<dl> Define uma lista descritiva
<dt> Define o nome de um termo de uma lista descritiva
<dd> Descreve um item de um termo de uma lista descritiva
<menu> Cria um menu de comandos (apenas para o Mozilla Firefox)
<menuitem> Cria um item de menu para o elemento <menu>
TAGS E ATRIBUTOS – TABELAS
<table> Cria uma tabela
<caption> Cria um título para a tabela
<th> Cria uma célula de cabeçalho para tabela
<tr> Cria uma linha para a tabela
<td> Cria uma célula para a tabela
<thead> Agrupa os campos de cabeçalho da tabela
<tbody> Agrupa os campos de conteúdo da tabela
<tfoot> Agrupa os campos de rodapé da tabela
<col> Especifica propriedades de formataçãodas colunas (necessita do elemento 
<colgroup>
<colgroup> Agrupa especificações de formatação de coluna (<col>)
TAGS E ATRIBUTOS – IMAGEM
<img> Define uma imagem
<map> Gera um mapeamento (delimitação) de áreas na imagem
<area> Define uma área em um mapeamento de uma imagem
<canvas> Elemento usado para gerar gráficos no HTML
<figcaption> Define uma legenda para um elemento <figure>
<figure> Define um conteúdo de imagem com ou sem legenda
TAGS E ATRIBUTOS – ESTILOS E SEMÂNTICOS
<style> Define informações e diretrizes de estilos para o HTML
<div> Define uma seção em um documento (área de conteúdo e posicionamento)
<span> Define uma seção linear em um documento (alteração de fragmentos de textos)
<header> Define um cabeçalho para um documento ou seção
<footer> Define um rodapé para um documento ou seção
<main> Especifica o conteúdo principal do HTML
<section> Cria uma seção no HTML
<article> Cria um artigo no documento HTML
<aside> Define um conteúdo lateral no HTML (conteúdo agregador)
<details> Cria um conteúdo adicional que recebe um comportamento de esconder ou visualizar
<dialog> Cria uma caixa de diálogo ou uma janela, no HTML
<summary> Cria um cabeçalho para o elemento <details>
TAGS E ATRIBUTOS – LINKS E AUDIO
<a> Cria um hiperlink
<link> Cria uma referência a um recurso externo (estilos, scripts, entre outros)
<nav> Cria uma seção de links de navegação
<audio> Cria um conteúdo de áudio
<source> Cria referência aos recursos de mídia (<audio> ou <video>)
<track> Especifica faixas de textos para a mídia (títulos, legendas, etc)
<video> Cria um conteúdo de vídeo
* Elementos que não estão disponíveis nas definições do HTML 5
REFERÊNCIA DE CARACTERES
 São formas de marcação para representar caracteres únicos e individuais
 Definidos pelo W3C (XML Entity Definitions for Characters)
 Declarados inicialmente pelo caracter “&” (e-comercial) e finalizados com “;” 
(ponto e vírgula)
Existem três tipos de referências:
Por nome: &dagger; = †
Por valor decimal: &#8224; = †
Por valor hexadecimal: &#x2020; = †