A Nova Semantica do HTML5

FrontInLondrina
Londrina/PR
10/12/2011

  • Sergio Nascimento
    @elvisdetona

Semântica

A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.



A ideia da Web Semântica surgiu em 2001, quando Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na revista Scientific American, intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades.”

A Nova Semântica - HTML5

  • Estrutura
  • Novos Elementos Semânticos
  • Por quê?

O HTML5

O html5 surgiu para as massas de fato no começo de 2010.
Resumidamente, ele surgiu de um estudo com base nas classes e ids mais usados. Algumas tags com nav, section, aside e footer são exemplos claros. Com Html 4.0 não era possível dizer semanticamente que um menu ou lista era de navegação. Hj usando "nav", identificamos que todo conteúdo dentro dela tem o valor semântico de navegação.

Tá, e o que isso quer dizer?

Quer dizer que os mecanismos de busca, leitores de tela, touch, mobile e etc, entenderão que determinados blocos são itens de navegação, de conteúdo, rodapé, artigos... enfim.

Algumas tags

  • <article>
  • <aside>
  • <command>
  • <details>
  • <summary>
  • <figure>
  • <figcaption>
  • <footer>
  • <header>
  • <hgroup>
  • <mark>
  • <meter>
  • <nav>


  • <progress>
  • <ruby>
  • <rt>
  • <rp>
  • <section>
  • <time>
  • <wbr>
  • <audio>
  • <video>
  • <source>
  • <embed>
  • <canvas>
  • <datalist>
  • <keygen>
  • <output>

Input Types / Forms

  • E-mail
  • URL
  • Números
  • Range
  • Color
  • Search


  • Telefone
  • Data
  • Mês
  • Semana
  • Horas
  • Dia e Hora
  • Dia e Hora Local

Tag NAV


Nós podemos usar a tag nav em diversas situações.
Não só em menú, como costumam usar.

Onde Usar

  • Menú
  • Paginação
  • "Voltar"
  • Breadcrumbs (navegação estruturada)
  • ...

"Strong" ou "B"

Strong = Forte
B = Negrito

Qual usar?

Como estamos falando de semântica, use strong.
Negrito vc faz com CSS.

Qual a melhor forma de montar um formulário

  • Ul li, dl dt dd, table ou p

Neuhuma está errada. Desde que vc monte os rótulos corretamente. (label)

O que eu acho correto

Listas ordenadas, "Perguntas e Respostas" e Table pra mim são os mais indicados.

Usar "parágrafo" eu acho um crime e ERRADO.

Funciona no IE / Browsers Antigos? (HTML5)

  • Nem tudo são flores...

Mas sim! Para os navegadores antigos entenderem a "Nova Semantica / Tags do HTML5", existem várias formas de fazer isso:
Criar os elementos que vai usar num JS: document.CreateElement('nomedatag'); ou use o Modernizr, HTML5Shiv...
Simples assim.

Vc tem medo do IE?

  • Eu não!

Web para todos, é o que o W3C recomenda... inclusive para usuários do IE

*** O usuário conseguindo acessar as informações é o que importa.

É isso!



"HTML5, experimente a nova semântica"

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>HTML5 - A nova semântica</title> </head> <body> <header> <nav> <ul> <li>Seu Menú</li> </ul> </nav> </header> <section> <article> <header> <h2>Primeiro Cabeçalho</h2> <p>Hoje é <time datetime="2011-17-03T16:31:24+02:00">Quinta-feira</time>.</p> </header> <p>HTML5 é muito legal e deixa existirem coisas na internet sem a necessidade de nenhum plugin.</p> </article> <article> <header> <figure> <img src="imagem.svg" alt="Um degradê entre preto e branco" width="40" height="40" /> <figcaption>Trabalhar com SVG é legal!</figcaption> </figure> <h2>Outro Cabeçalho</h2> <p>Postado em <time datetime="2011-15-03T08:00:24+02:00">15 de Março</time>.</p> </header> <p>HTML5 é Semântico e vai formar o alicerce onde a nova internet será construída.</p> </article> </section> <input type="email" name="user_email" id="user_email" /> <input type="url" name="user_url" /> <input type="number" name="points" min="1" max="10" /> <input type="range" name="points" min="1" max="10" /> <input type="color" name="user_color" /> <input type="search" name="search_box" placeholder="Isso vai sumir no onClick" /> <input type="tel" pattern="[1-9 ]{10}" name="tel" /> <input type="date" name="user_date" /> <input type="month" name="user_date" /> <input type="week" name="user_date" /> <input type="time" name="user_date" /> <input type="datetime" name="user_date" /> <input type="datetime-local" name="user_date" /> <aside> <h2>Aqui vai informação adicional das sidebars</h2> <p>Navegação (<nav>), informações de relevância sobre o artigo, etc.</p> </aside> <footer> <p>Aqui vai o rodapé, com informações de relevância como termos de uso, contato, etc.</p> <time datetime="2011-15-03T08:00:24+02:00">15 de Março</time> </footer> </body> </html>