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

★ 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

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.

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>

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>

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie b ou strong eis a questão! HTML semântico, o santo graal do front-end =] (20)

Mehr von Andréa Zambrana

Mehr von Andréa Zambrana (12)

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