Ir para conteúdo
Fórum Script Brasil
  • 0

[ARTIGO] O que há de novo no HTML5? - Parte 1


hsbpedro

Pergunta

150px-HTML5_logo_and_wordmark.svg.png

Sobre o HTML5

Como o nome já diz, é a quinta versão do famoso HTML (que significa Linguagem de Marcação de Hipertexto), sendo desenvolvida desde 2008 pela W3C, um consórcio de empresas de tecnologia que coordena os padrões da internet quanto a linguagem.

As mudanças quanto ao seu antecessor foram muitas como:

  • Novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais
  • Controle embutido de conteúdo multimídia
  • Aprimoramento do uso off-line
  • Melhoria na depuração de erros

O HTML5 ainda está sendo desenvolvido mas já pode ser usado em seus documentos com a declaração <!DOCTYPE html>.

Novas Tags

Foram adicionadas diversas novas tags, que procuram facilitar a vida do usuário e do webmaster, nesta nova versão do HTML. Elas abrangem desde mudanças semânticas a até mesmo mudanças gráficas e multimídias.

Abaixo você encontra todas as novas tags do HTML5 com explicação e uso no seu documento.

<article>

É usada para definir um artigo.

Possíveis destinos para esse elemento: post em fóruns, blogs, sites de notícias e comentários.

<article>
 <h1>Brasil</h1>
 <p>Brasil, oficialmente República Federativa do Brasil, é o maior país da América do Sul e da região da América Latina, sendo o quinto maior do mundo em área territorial e população...</p>
</article>

<aside>

Agrupa informações relacionadas ao elemento principal. Em português, significa "à parte".

Se for usada dentro de um <article>, as informações presentes dentro desta tag deverão ser relacionadas ao conteúdo da tag <article>.

<p>Minha família e eu visitamos Brasília este verão</p>

<aside>
 <h4>Brasília</h4>
 <p>Brasília é a capital federal do Brasil e a sede do governo do Distrito Federal. A cidade está localizada na região Centro-Oeste do país, ao longo da região geográfica conhecida como Planalto Central.</p>
</aside>

<audio>

Esta tag define qualquer tipo de som, como música, broadcasts ou streams.

<audio controls>
 <source src="cavalo.ogg" type="audio/ogg">
 <source src="cavalo.mp3" type="audio/mpeg">
 Seu navegador não suporta esta tag.
</audio> 

Alguns navegadores suportam, enquanto outros não, formatos como WAV e OGG.

O formato MP3 é suportado em todos os tipos de navegadores.

Qualquer texto que estiver dentro desta tag será exibido por navegadores que não a suportam.

<bdi>

É uma sigla para Bidirectional Isolation (isolação bidirecional).

Sua função é isolar uma parte de um texto que deve ser formatada em uma direção diferente dos outros.

<ul>
 <li>Usuário <bdi>Antônio</bdi>: 60 pontos</li>
 <li>Usuário <bdi>José</bdi>: 80 pontos</li>
 <li>Usuário <bdi>إيان</bdi>: 90 pontos</li>
</ul> 

No exemplo acima, os nomes de usuários estão sendo exibidos junto ao número de pontos. Se a tag <bdi> não for suportada pelo navegador, o nome em árabe confundirá o texto (o algorítimo bidirecional colocará os dois pontos e o número "90" junto com a palavra "Usuário" em vez de ficar ao lado da palavra "pontos").

<canvas>

Usada para desenhar gráficos, escritos, geralmente, em scripts (como o JavaScript).

Qualquer texto que estiver dentro desta tag será exibido por navegadores que não a suportam.

<canvas id="myCanvas">Seu navegador não suporta este tipo de tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>

<datalist>

Especifica uma lista de opções pré-definidas para um elemento <input>.

Esta tag é usada para prover uma característica de "autocompletar" para os elementos input. Usuários verão uma lista drop-down de opções já definidas.

<input list="linguagens">

<datalist id="linguagens">
 <option value="PHP">
 <option value="C++">
 <option value="C">
 <option value="Ruby">
 <option value="Java">
 <option value="Python">
</datalist>

<details>

Define detalhes no qual o usuário pode exibir ou ocultar. É semelhante a um spoiler dos fóruns.

<details>
 No final do filme Titanic, Jack (Leonardo DiCaprio) morre, enquanto, Rose (Kate Winslet) fica em um pedaço de gelo no mar.
</details>

Esta tag não é suportada nos navegadores: Internet Explorer e Mozilla Firefox.

<dialog>

Define uma caixa de diálogo ou uma janela. Esse elemento torna fácil a criação de modais e diálogos popup.

<table>
<tr>
 <th>Ontem <dialog open>Isto é uma caixa de diálogo</dialog></th>
 <th>Hoje</th>
 <th>Amanhã</th>
</tr>
<tr>
 <td>10/12/2014</td>
 <td>11/12/2014</td>
 <td>12/12/2014</td>
</tr>
</table> 

É suportada somente nos navegadores Chrome 37+, Safari 6+ and Opera 24+.

No próximo artigo você terá a continuação das novas tags e uma lista de todas elas que foram substituídas na quinta versão do HTML.

Se você está gostando, por favor, comente abaixo o que você achou deste tópico. Isso é muito importante para mim!

Se achou algum erro, me notifique o quanto antes.

Uma dica é você testar todos os códigos-exemplos das tags no site: HTMLEdit, que é um bom editor de HTML online.

Espero que você aprenda bastante aqui! :D

Te vejo na continuação.

Abraços,

Pedro HSB

Editado por hsbpedro
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...