O documento discute a semântica do HTML, explicando que a linguagem de marcação foi projetada para dar significado à informação na web de forma a torná-la acessível e reutilizável por máquinas e humanos. A estruturação semântica do conteúdo é importante para que se entenda exatamente do que se trata cada seção, e elementos como microdados melhoram ainda mais a semântica para as máquinas.

1. A SEMÂNTICA DO HTML
id e n t if ic aç ão , s ig n if ic ad o e o r g an iz aç ão
DIEGO EIS
@diegoeis @tableless
http://tableless.com.br/

3. PARA QUE SERVE A WEB?
Para que usamos a web?
Entramos na web todos os dias para fazer o que?
Safadinhos, eu sei o que vocês estão pensando...

4. E O QUE É INFORMAÇÃO?
É o resultado do processamento, manipulação e organização
de dados, de tal forma que represente uma modificação
(quantitativa ou qualitativa) no conhecimento do sistema
(pessoa, animal ou máquina) que a recebe.
#WTF?
Se você leu tudo não ouviu nada do que eu disse agora. ;-)

5. COMO ORGANIZAMOS A
INFORMAÇÃO?
Existem duas formas básicas: linear ou não linear.
Como assim, Bial?

6. FORMA LINEAR
Como um livro, por exemplo.

7. NÃO LINEAR
Como uma enciclopédia.

8. PARA QUE SERVE O HTML?
Parece básico mas eu acho que quase ninguém parou para se
perguntar isso.

9. LINGUAGEM DE MARCAÇÃO
DE HIPERTEXTO
Preste atenção nessas duas palavras: Hipertexto e Marcação.

10. HIPERTEXTO
I n f o r ma ç ã o o r g a n iz a d a n ã o lin e a r me n t e .
L e mb r a d a e n c ic lo p é d ia ?

11. Vannevar Bush

13. MAMÍFERO
é um
é um
tem
PÊLO
URSO
tem
BALEIA
é um
ÁGUA
vive na
é um
PEIXE
vive na
ANIMAL
é um
VÉRTEBRA
tem
GATO
tem

15. OS LINKS ORGANIZAM A WEB
Mas eles organizam o todo. Apenas os caminhos.

16. MARCAÇÃO
Mar c ar p ar a d ar s ig n if ic ad o .

17. SEMÂNTICA
Significado da informação.

18. <h1> </h1>título
<p>
</p>
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Duis
lobortis, orci eu sodales
tempor, augue velit
pretium nunc, quis
scelerisque sem velit vel.

19. A ESTRUTURA IMPORTA
Sabemos o significado dos elementos, mas o local que esse
conteúdo se encontra diz muita coisa.

20. <h1> título </h1>
<h1> título </h1>
<h1>
título
</h1>
<h1> título </h1>
<h1>
título
</h1>

21. PARA QUE SERVE O DIV?
Essa é fácil. Responde aí vai...

22. QUAL A SEMÂNTICA DO DIV?
Agora eu quero ver alguém responder...

23. NENHUMA
O div não tem função semântica NENHUMA!

24. div#cabecalho
div#rodape
div#sidebar div#content div#sidebar

25. div
div
div div div

26. AS NOVAS TAGS
A estrutura agora tem um significado semantico, influenciando
na importância do seu conteúdo.

27. header#cabecalho
footer#rodape
aside#sidebar article#content aside#sidebar

28. header
footer
aside article aside

29. ESTRUTURAÇÃO SEMÂNTICA
Agora sabemos exatamente do que se trata cada conteúdo.

30. MAS...
Sabemos o que é cada elemento, mas ainda não temos como
entender do que se trata o conteúdo.

31. MICRODATA
Me lh o r an d o a s e mân t ic a p ar a as máq u in as .

32. Olá, eu me chamo Diego Eis, sou brasileiro,
trabalho na Locaweb como Coordenador do Time
de Front-end. Tenho um website chamado
Tableless e você pode entrar em contato comigo
pelo email contato@tableless.com.br.
name
jobTitle
URL
worksFor
email
nacionality

33. <strong itemprop="name">Diego Eis</strong>
<strong itemprop="nacionality">brasileiro</strong>
<strong itemprop="worksFor">Locaweb</strong>
<strong itemprop="jobTitle">Coordenador</strong>
<a href="#" itemprop="url">Tableless</a>
<a href="#" itemprop="email">diego@tableless...</a>
MICRODATA

34. ESTENDE O SIGNIFICADO DAS
MICRO INFORMAÇÕES
Microdatas melhoram a detecção de micro informações nos
conteúdos do seu website.

35. ESCREVA BOM CÓDIGO
Código bom é código com significado.

36. ACESSIBILIDADE
Pense sempre em acessibilidade. Essa é a metade do caminho.
Um sistema/site acessível é visível para máquinas e seres
humanos.

37. HTML NASCEU PARA SER
PORTÁVEL
Ele precisa ser acessado por qualquer tipo de meio de acesso:
robôs, dispositivos, pessoas etc

38. A INFORMAÇÃO É
REUTILIZÁVEL
Quando a informação é publicada na web, ela precisa ser
reutilizável e acessível.

39. AMPLEXOS
Muito Obrigado!
DIEGO EIS
@diegoeis
@tableless http://tableless.com.br/