ou 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 =]

★ 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

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

palavra, de um signo, de uma frase ou de uma expressão em um determinado contexto.”

Fonte: http://www.soportugues.com.br/secoes/seman/

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.

<!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>

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.”

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 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.

<!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>

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>

Elementos in-line e block-level

<div><p><h1>

<span><a><br>

fácil, né? =]

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 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>

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 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

<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

<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>

<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>

<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>

<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>

cut to the chase!

Mas pra que tanto trabalho?

★ Leitores de tela

○ Robôs de busca Google

■ SEO [Search Engine Optimization]

○ Usuários cegos

★ Porque você se importa

Guerra santaé... muitos bebês focas morrem a cada segundo =/

cya!Thanks for listening my crap! ^_^

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

Software