O documento apresenta uma aula sobre HTML5, incluindo: (1) uma visão geral da evolução da web e dos navegadores; (2) os pilares da web e a estrutura básica do HTML5; (3) novos elementos e atributos no HTML5 como section, nav, article, aside, header e footer.
3. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
WEB
HTML5 - Marcação
Visão Geral do HTML5
4. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
WEB
HTML5 - Marcação
Visão Geral do HTML5
5. prof. Gustavo Zimmermann | contato@swag.ag
Pilares da Web
De acordo com o W3C a Web é baseada em 3 pilares:URI
HTTP
HTML
WEB
HTML5 - Marcação
Visão Geral do HTML5
6. prof. Gustavo Zimmermann | contato@swag.ag
• 1990 - Criação do Protocolo HTTP e do HTML.
HTML5 - Marcação
Visão Geral do HTML5
7. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 06/08/1991
Primeiro site da Web
8. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1992
NCSA MOSAIC
9. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• 1994
Desenvolvedores saem do Mosaic
10. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
• IBM Web Explorer
• UDI WWW
• Internet Explorer
• 1995
Surgem novos Navegadores
11. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
86%
14%
• 1996
Arrogância
12. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
• 1998
IE já instalado no Windows
13. prof. Gustavo Zimmermann | contato@swag.ag
• 1999
America Online compra o Netscape
HTML5 - Marcação
Visão Geral do HTML5
11%
89%
$$$
14. prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
MUNDO: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
50,15%
17,53%
17,02%
9,92%
1,69%
3,69%OUTROS
15. prof. Gustavo Zimmermann | contato@swag.ag
Uso de Navegadores (MUNDO)
BRASIL: Abril/2015 (StatCounter)
HTML5 - Marcação
Visão Geral do HTML5
66,38%
17,74%
10,75%
2,91%
0,94%
1,27%OUTROS
18. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Visão Geral do HTML5
5 principais novidades do navegador:
1. Escrever diretamente sobre a tela
2. Assistente pessoal
3. Leitura
4. Design minimalista
5. Rapidez
“Nosso objetivo é evitar interferir
visualmente na experiência de
navegação. A ideia é apoiá-la"
23. prof. Gustavo Zimmermann | contato@swag.ag
• 2004
HTML5 - Marcação
Visão Geral do HTML5
XHTML1.0
Preocupação:
•
•
24. prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
XHTML2.0
Proposta do WHATWG:
•
25. prof. Gustavo Zimmermann | contato@swag.ag
• 2007
HTML5 - Marcação
Visão Geral do HTML5
HTML5
Abandono:
26. prof. Gustavo Zimmermann | contato@swag.ag
Análise do suporte atual pelos
Navegadores e
Estratégias de Uso
27. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
O desenvolvimento modular
01. SEMÂNTICA 02. ESTILOS
03. INTERATIVIDADE
28. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
29. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Análise do suporte atual pelos Navegadores e Estratégias de Uso
Motores de Renderização
Não há como os desenvolvedores manterem um bom nível de
compatibilidade com todos estes browsers levando em consideração a
particularidade de cada um.
MOTOR BROWSER
Webkit
Gecko
Trident
Presto
37. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
XHTML
Quando a W3C propôs uma versão do
HTML baseado em XML ela tinha a
intenção de organizar melhor o código
HTML. Esta organização tem como
base 5 principais regras.
38. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Marcações em minúsculo
<HEAD></HEAD>
<head></head>
39. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de TAGs
• Marcação
<li> Item
<li> Item </li>
• Execução
<br > <br />
40. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Encadeamento
<b> <i> Item </b> </i>
<b> <i> Item </i> </b>
41. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Indentação do HTML
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
</div>
<div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<ol>
</div>
42. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Caminhos Absolutos e Relativos
• Absoluto
http://gust4vo.com/cursos/wp-
content/uploads/2014/07/Plano-de-Trabalho-
HTML5.pdf
• Relativo
Plano-de-Trabalho-HTML5.pdf
43. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de
elementos: elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns
exemplos: a, strong, em, img, input, abbr, span.
Os elementos de blocos são como caixas, que dividem o conteúdo nas
seções do layout.
44. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Tipos de Elementos:
• Os elementos de linha podem conter outros elementos de
linha, dependendo da categoria que ele se encontra. Por exemplo: o
elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de
bloco.
• Elementos de bloco sempre podem conter elementos de
linha.
• Elementos de bloco podem conter elementos de bloco,
dependendo da categoria que ele se encontra. Por exemplo, um
parágrafo não pode conter um DIV. Mas o contrário é possível.
45. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Cada elemento no HTML pode ou não fazer parte de um grupo de
elementos com características similares. As categorias estão a seguir.
Manteremos os nomes das categorias em inglês para que haja um melhor
entendimento:
1. Metadata content
2. Flow content
3. Sectioning content
4. Heading content
5. Phrasing content
6. Embedded content
7. Interactive content
46. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias
Abaixo segue como as categorias estão relacionadas de acordo com o
WHATWG:
Flow
Phrasing
Embedded
Interactive
Metadata
Heading
Sectioning
47. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
A maioria dos elementos utilizados no body e aplicações são categorizados
como Flow Content. São eles:
a, abbr, address, area (se for um decendente de um elemento de mapa), article,
aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command,
datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2,
h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label,
link (se o atributo itemprop for utilizado), map, mark, math, menu, meta (se o
atributo itemprop for utilizado), meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, samp, script, section, select, small, span, strong, style (se o
atributo scoped for utilizado), sub, sup, svg, table, textarea, time, ul, var, video,
wbr, text*
* Sob algumas circunstâncias.
48. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Estes elementos definem um grupo de cabeçalhos e rodapés. Basicamente
são elementos que juntam grupos de textos no documento.:
article
aside
nav
section
49. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Os elementos da categoria Heading definem uma seção de cabeçalhos, que
podem estar contidos em um elemento na categoria Sectioning:
h1
h2
h3
h4
h5
h6
hgroup
50. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Fazem parte desta categoria elementos que marcam o texto do documento,
bem como os elementos que marcam este texto dentro do elemento de
parágrafo:
a, abbr, area (se ele for descendente de um elemento de mapa), audio, b,
bdo, br, button, canvas, cite, code, command, datalist, del (se ele
contiver um elemento da categoria de Phrasing), dfn, em, embed, i,
iframe, img, input, ins (se ele contiver um elemento da categoria de
Phrasing), kbd, keygen, label, link (se o atributo itemprop for utilizado),
map (se apenas ele contiver um elemento da categoria de Phrasing),
mark, math, meta (se o atributo itemprop for utilizado), meter, noscript,
object, output, progress, q, ruby, samp, script, select, small, span,
strong, sub, sup, svg, textarea, time, var, video, wbr, text.
51. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Na categoria Embedded, há elementos que importam outra fonte de
informação para o documento:
audio
canvas
embed
iframe
img
math
object
svg
video
52. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Web Standards: Modelos de conteúdo;
Categorias:
Interactive Content são elementos que fazem parte da interação de usuário:
a, audio (se o atributo control for utilizado), button, details,
embed, iframe, img (se o atributo usemap for utilizado),
input (se o atributo type não tiver o valor hidden), keygen,
label, menu (se o atributo type tiver o valor toolbar), object
(se o atributo usemap for utilizado), select, textarea,
video (se o atributo control for utilizado).
54. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
section
nav
55. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
article
aside
header
56. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Novos elementos e atributos
Elemento/Atributo Descrição
footer
time
57. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• align como atributo da tag
• caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3,
h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
• alink, link, text e vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr, td, th e body.
• border como atributo da tag table e object.
• cellpadding e cellspacing como atributos da tag table.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
58. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• char e charoff como atributos da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• clear como atributo da tag br.
• compact como atributo da tag dl, menu, ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag img e object.
• marginheight e marginwidth como atributos da tag iframe.
• noshade como atributo da tag hr.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
59. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
• type como atributo da tag li, ol e ul.
• valign como atributo da tag
col, colgroup, tbody, td, tfoot, th, thead e tr.
• width como atributo da tag hr, table, td, th, col, colgroup e pre.
Este atributos foram descontinuados porque modificam a formatação do
elemento e suas funções são melhores controladas pelo CSS:
60. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• rev e charset como atributos da tag link e a.
• shape e coords como atributos da tag a.
• longdesc como atributo da tag img and iframe.
• target como atributo da tag link.
• nohref como atributo da tag area.
• profile como atributo da tag head.
• version como atributo da tag html.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
61. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Atributos descontinuados
• name como atributo da tag img (use id).
• scheme como atributo da tag meta.
• archive, classid, codebase, codetype, declare e standby como
atributos da tag object.
• valuetype e type como atributos da tag param.
• axis e abbr como atributos da tag td e th.
• scope como atributo da tag td.
Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles
tiverem algum impacto negativo na compatibilidade de algum user-agent
eles serão discutidos.
62. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O atributo autofocus pode ser especificado nos elementos input (exceto
quando há atributo hiddenatribuído), textarea, select e button.
• A tag a passa a suportar o atributo media como a tag link.
• A tag form ganha um atributo chamado novalidate. Quando aplicado o
formulário pode ser enviado sem validação de dados.
• O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado
os indicadores da lista são colocados na ordem inversa, isto é, da forma
descendente.
Alguns elementos ganharam novos atributos:
63. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Elementos que ganham novos Atributos
• O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos
os filhos de fieldset são desativados.
• O novo atributo placeholder pode ser colocado em inputs e textareas.
• O elemento area agora suporta os atributos hreflang e rel como os
elementos a e link
• O elemento base agora suporta o atributo target assim como o elemento a. O
atributo target também não está mais descontinuado nos
elementos a e area porque são úteis para aplicações web.
Alguns elementos ganharam novos atributos:
64. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Novos Elementos e Atributos
Outros Atributos descontinuados
• O atributo border utilizado na tag img.
• O atributo language na tag script.
• O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de
name.
• O atributo summary na tag table.
Os atributos abaixo foram descontinuados:
66. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
b
span
<b></b>
67. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
i span
<i></i>
68. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
a href
placeholder
<a></a>
69. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
address
<andress></andress>
70. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
hr
<hr />
71. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
strong
<strong></strong>
72. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos modificados
head child
<head></head >
73. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
basefont
big
center
font
s
strike
tt
u
Os elementos abaixo foram descontinuados por que seus efeitos são
apenas visuais:
74. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
frame
frameset
noframes
Os elementos abaixo foram descontinuados por que ferem os princípios
de acessibilidade e usabilidade:
75. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Elementos modificados e ausentes
Elementos ou atributos descontinuados
• acronym não foi incluído porque criou um bocado de confusão
entre os desenvolvedores que preferiram utilizar a tag abbr.
• applet ficou obsoleto em favor da tag object.
• isindex foi substituído pelo uso de form controls.
• dir ficou obsoleto em favor da tag ul.
Os elementos abaixo não foram incluídos na especificação porque não
tiveram uso entre os desenvolvedores ou porque sua função foi substituída
por outro elemento:
78. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
Nomeações
Para a nomeação de referências precisamos respeitar 4 regras básicas:
1. Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas;
2. Sem caracteres especiais (@#$%&*()+[]ªº°<>/|);
3. Sem acentuação ou pontuação (“’!?¨´`^~.:;,);
4. Underlines (_) e Traços (-) ao invés de Espaço;
80. prof. Gustavo Zimmermann | contato@swag.ag
HTML5 - Marcação
Vamos começar
H1 a H6:
As TAGs H1 a H6 são utilizadas para a marcação semântica e hierárquica de
títulos, como no exemplo abaixo:
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
No HTML5 temos uma nova TAG chamada <hgroup> utilizada para
agrupar grupos de títulos que pertencem a uma mesma categoria:
<hgroup>
<h1>Título principal</h1>
<h2>Segundo princípio</h2>
</hgroup>