Semântica HTML5

SEMÂNTICA HTML5

WILSON MONTELODEV FRONT-END

MUITO ANTES DE INICIAR

PROJETO

HOME PAGE

DESING RESPONSIVO

SISTEMAS DE GERENCIAMENTO DE CONTEÚDO

- CONTROLE DE VERSÃO

- PRÉ PROCESSADORES

- SEO

- PERFORMACE

SERVE PARA QUE A

WEB?

INFORMAÇÃO Informação varia conforme o indivíduo, as necessidades

e o contexto em que é produzida e compartilhada.

EXISTE ALGUMA

LÓGICA?

COMO ORGANIZAR?

LINEARRelativo ou que apresenta a disposição de linha

NÃO LINEARNão linear refere-se a todas as estruturas que não

apresentam um único sentido.

ONDE TUDO COMEÇA?

HTMLMAISZOQUÉ ?

LINGUAGEM DE MARCAÇÃO

DE HIPERTEXTO

O QUE É HIPERTEXTO?1.Apresentação de informações escritas, organizada de

tal maneira que o leitor tem liberdade de escolher

vários caminhos.

2.Elemento (palavra, expressão ou imagem) é destacado e,

quando acionado (ger. mediante um clique de mouse ),

provoca a exibição de um novo hipertexto com informações

relativas ao referido elemento; hipermídia.

LINKS A palavra link pode significar hiperligação, ou seja, uma

palavra, texto ou imagem que quando é clicada pelo

usuário, o encaminha para outra página na internet

SEMÂNTICA

O QUE SIGNIFICA UMA

DIV?

<div id=’’header’’>

<div id=’’nav’’>

</div>

</div>

<!-- fim header -->

<div id=’’main’’>

<div id=’’noticias’’>

</div>

</div>

<!-- fim main -->

<div id=’’sidebar’’>

</div>

<!-- fim sidebar -->

<div id=’’footer’’>

</div>

AS NOVAS TAGS

header

nav

article

section

aside

footer

main

address

<header>

<nav>

</nav>

</header>

<!-- fim header -->

<main>

<article>

</article>

</main>

<!-- fim main -->

<aside>

</aside>

<!-- fim aside -->

<footer>

<address>

</address>

</footer>

HTML FEITO PARA SER

PORTÁTIL