<b> ou <strong>,
eis a questão
HTML semântico, o santo graal do front-end =]
★ Separação de apresentação, conteúdo e
comportamento.
★ Marcação bem formada, semanticamente
correta e geralmente válida....
vamos falar
sobre semântica!
O que é segundo a linguística
“Em linguística, semântica estuda o significado
e a interpretação do significado de uma
pala...
O que é HTML?
HyperText Markup Language
(Linguagem de Marcação de Hipertexto)
Basicamente é um monte de “tags”
responsávei...
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mirror Fashion.</h1>...
HTML semântico
“Semantic HTML is the use of HTML markup to
reinforce the semantics, or meaning, of the
information in webp...
ou seja...
Um HTML semântico carrega significado
independente da sua apresentação visual.
Tags e seus significados
Uma tag é definida com os caracteres < e >, e
seu nome, ou seja, <nomedatag>.
Cada tag foi criada...
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mirror Fashion.</h1>...
Lista completa de tags do HTML 5 (são 117 =P)
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>,
<aside>, <au...
Elementos in-line e block-level
<div>
<p>
<h1>
<span>
<a>
<br>
fácil, né? =]
#sqn
no inicio era tudo tabela...
mas nem tudo era belo :[
depois veio o xhtml...
e a luz se fez *__*
ele teve dois filhos [1.0 e 1.1]
e eles eram belos =] [o 1.1 era muito mais belo]
mas os desenvolvedores não
estavam felizes...
e decidiram dar uma carteirada na W3C :P
então nasceu o HTML5
e os todos ficaram felizes =D [ou quase isso :P]
ah! se toda página web fosse assim ^__^
<h2 id="section1">A different starting point<a class="subhead-
anchor" href="#section1">#section1</a></h2>
<p>Using the co...
o problema começa aqui...
mais semântico!
[WTF o.O]
<nav class="menu-opcoes">
<a href="#">Sua Conta</a>
<a href="#">Lista de Desejos</a>
<a href="#">Cartão Fidelidade</a>
<a ...
<p>Como parte integrante dos Termos de Uso e Condições de
Navegação do <span class=”destaque”>Portal AMIL</span>, este
doc...
<fieldset>
<input type="hidden" name="perfilUsuario" value="EMPRESA" />
<label for="loginEmpresa">Usuário:</label>
<input ...
<fieldset>
<input type="hidden" name="perfilUsuario" value="EMPRESA" />
<dl class="listaCampos">
<dt><label for="loginEmpr...
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Titulo 1</td>
<td>Titulo 3</td>
<td>Titulo 3</td>
</tr>
<tr>
<...
<table cellpadding="0" cellspacing="0" border="1">
<caption>Nome ou título da tabela</caption>
<thead>
<tr>
<th>Titulo 1</...
cut to the chase!
Mas pra que tanto trabalho?
★ Leitores de tela
○ Robôs de busca Google
■ SEO [Search Engine Optimization]
○ Usuários cegos...
Guerra santa
é... muitos bebês focas morrem a cada
segundo =/
cya!
Thanks for listening my crap! ^_^
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
Próximos SlideShares
Carregando em…5
×

b ou strong eis a questão! HTML semântico, o santo graal do front-end =]

293 visualizações

Publicada em

O que é HTML semântico e qual a sua importância no desenvolvimento front-end.

Publicada em: Software
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
293
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

b ou strong eis a questão! HTML semântico, o santo graal do front-end =]

  1. 1. <b> ou <strong>, eis a questão HTML semântico, o santo graal do front-end =]
  2. 2. ★ Separação de apresentação, conteúdo e comportamento. ★ Marcação bem formada, semanticamente correta e geralmente válida. ★ Javascript deve melhorar progressivamente a experiência do usuário. Pilares do desenvolvimento front-end
  3. 3. vamos falar sobre semântica!
  4. 4. O que é segundo a linguística “Em linguística, semântica estuda o significado e a interpretação do significado de uma palavra, de um signo, de uma frase ou de uma expressão em um determinado contexto.” Fonte: http://www.soportugues.com.br/secoes/seman/
  5. 5. O que é HTML? HyperText Markup Language (Linguagem de Marcação de Hipertexto) Basicamente é um monte de “tags” responsáveis pela marcação do conteúdo de uma página no navegador.
  6. 6. <!DOCTYPE html> <html> <head> <title>Mirror Fashion</title> <meta charset="utf-8"> </head> <body> <h1>Mirror Fashion.</h1> <h2>Bem-vindo à Mirror Fashion, sua loja...</h2> <ul> <li>Confira nossas promoções.</li> <li>Receba informações sobre nossos...</li> <li>Navegue por todos nossos produtos...</li> <li>Compre sem sair de casa.</li> </ul> </body> </html>
  7. 7. HTML semântico “Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.”
  8. 8. ou seja... Um HTML semântico carrega significado independente da sua apresentação visual.
  9. 9. Tags e seus significados Uma tag é definida com os caracteres < e >, e seu nome, ou seja, <nomedatag>. Cada tag foi criada para alguma função específica e tem seu próprio significado. Ou seja, colocar a tag correta de acordo com o conteudo é HTML semântico.
  10. 10. <!DOCTYPE html> <html> <head> <title>Mirror Fashion</title> <meta charset="utf-8"> </head> <body> <h1>Mirror Fashion.</h1> <h2>Bem-vindo à Mirror Fashion, sua loja...</h2> <ul> <li>Confira nossas promoções.</li> <li>Receba informações sobre nossos...</li> <li>Navegue por todos nossos produtos...</li> <li>Compre sem sair de casa.</li> </ul> </body> </html>
  11. 11. Lista completa de tags do HTML 5 (são 117 =P) <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdi>, <bdo>, <big>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <datalist>, <dd>, <del>, <details>, <dfn>, <dialog>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <h1>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <legend>, <li>, <link>, <main>, <map>, <mark>, <menu>, <menuitem>, <meta>, <meter>, <nav>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <track>, <tt>, <u>, <ul>, <var>, <video>, <wbr>
  12. 12. Elementos in-line e block-level <div> <p> <h1> <span> <a> <br>
  13. 13. fácil, né? =]
  14. 14. #sqn
  15. 15. no inicio era tudo tabela... mas nem tudo era belo :[
  16. 16. depois veio o xhtml... e a luz se fez *__*
  17. 17. ele teve dois filhos [1.0 e 1.1] e eles eram belos =] [o 1.1 era muito mais belo]
  18. 18. mas os desenvolvedores não estavam felizes... e decidiram dar uma carteirada na W3C :P
  19. 19. então nasceu o HTML5 e os todos ficaram felizes =D [ou quase isso :P]
  20. 20. ah! se toda página web fosse assim ^__^
  21. 21. <h2 id="section1">A different starting point<a class="subhead- anchor" href="#section1">#section1</a></h2> <p>Using the core model, we start the design process by mapping...</p> <p>To use the core model, you need:</p> <ul> <li><b>Business objectives</b>: Prioritized, measurable... </li> <li><b>User tasks</b>: Actual, researched, prioritized user... </li> </ul> <p>A good review of a website’s existing content can turn up some dusty corners that need clearing out. Typically, a website might have a lot of content that...</p> <p>All workshop participants should work in pairs to fill out their worksheets. Between...</p>
  22. 22. o problema começa aqui...
  23. 23. mais semântico! [WTF o.O]
  24. 24. <nav class="menu-opcoes"> <a href="#">Sua Conta</a> <a href="#">Lista de Desejos</a> <a href="#">Cartão Fidelidade</a> <a href="sobre.html">Sobre</a> <a href="#">Ajuda</a> </nav> <nav class="menu-opcoes"> <ul> <li><a href="#">Sua Conta</a></li> <li><a href="#">Lista de Desejos</a></li> <li><a href="#">Cartão Fidelidade</a></li> <li><a href="sobre.html">Sobre</a></li> <li><a href="#">Ajuda</a></li> </ul> </nav> ou
  25. 25. <p>Como parte integrante dos Termos de Uso e Condições de Navegação do <span class=”destaque”>Portal AMIL</span>, este documento, denominado <span class=”destaque”>Política de Privacidade</span>, possui a finalidade de estabelecer as regras sobre a obtenção, uso e armazenamento dos dados e informações coletadas dos usuários, além do registro de suas atividades.</p> <p>Como parte integrante dos Termos de Uso e Condições de Navegação do <strong>Portal AMIL</strong>, este documento, denominado <strong>Política de Privacidade</strong>, possui a finalidade de estabelecer as regras sobre a obtenção, uso e armazenamento dos dados e informações coletadas dos usuários, além do registro de suas atividades.</p> ou
  26. 26. <fieldset> <input type="hidden" name="perfilUsuario" value="EMPRESA" /> <label for="loginEmpresa">Usuário:</label> <input type="text" id="loginEmpresa" name="login" /> <label for="senhaEmpresa">Senha:</label> <input type="password" id="senhaEmpresa" name="senha" /> <fieldset class="containerCheckbox"> <input type="checkbox" id="keepLoggedEmpresa" /> <label for="keepLoggedEmpresa">Lembrar de mim</label> </fieldset> </fieldset> <div> <button type="button">Voltar</button> <button type="submit" class="acaoPrincipal">Entrar</button> </div> <p><a href="#url">Esqueci a minha senha</a></p>
  27. 27. <fieldset> <input type="hidden" name="perfilUsuario" value="EMPRESA" /> <dl class="listaCampos"> <dt><label for="loginEmpresa">Usuário:</label></dt> <dd><input type="text" id="loginEmpresa" name="login" /></dd> <dt><label for="senhaEmpresa">Senha:</label></dt> <dd> <input type="password" id="senhaEmpresa" name="senha" /> <fieldset class="containerCheckbox"> <input type="checkbox" id="keepLoggedEmpresa" /> <label for="keepLoggedEmpresa">Lembrar de mim</label> </fieldset> </dd> </dl> </fieldset> <div> <button type="button" class="voltar historyBack">Voltar</button> <button type="submit" class="acaoPrincipal">Entrar</button> </div> <p><a href="#url">Esqueci a minha senha</a></p>
  28. 28. <table cellpadding="0" cellspacing="0" border="1"> <tr> <td>Titulo 1</td> <td>Titulo 3</td> <td>Titulo 3</td> </tr> <tr> <td>Texto 1</td> <td>Texto 2</td> <td>Texto 3</td> </tr> <tr> <td>Rodapé 1</td> <td>Rodapé 2</td> <td>Rodapé 3</td> </tr> </table>
  29. 29. <table cellpadding="0" cellspacing="0" border="1"> <caption>Nome ou título da tabela</caption> <thead> <tr> <th>Titulo 1</th> <th>Titulo 3</th> <th>Titulo 3</th> </tr> </thead> <tfoot> <tr> <th>Rodapé 1</th> <th>Rodapé 2</th> <th>Rodapé 3</th> </tr> </tfoot> <tbody> <tr> <td>Texto 1</td> <td>Texto 2</td> <td>Texto 3</td> </tr> </tbody> </table>
  30. 30. cut to the chase!
  31. 31. Mas pra que tanto trabalho? ★ Leitores de tela ○ Robôs de busca Google ■ SEO [Search Engine Optimization] ○ Usuários cegos ★ Porque você se importa
  32. 32. Guerra santa é... muitos bebês focas morrem a cada segundo =/
  33. 33. cya! Thanks for listening my crap! ^_^

×