Agora vamos focar nos novos elementos, nas novas tags que surgiram especificamente para o uso no HTML5, que não existiam antes.
Novas Tags no HTML5
Embora tenhamos deixado bem claro que o HTML5 veio para facilitar nossa vida e nos disponibilizar um leque imenso e poderoso de ferramentas, ele também trouxe novas tags, novos elementos que não existiam antes.Sim, sabemos. O HTML antigo e o CSS possuem centenas de tags e elementos.
Embora tenhamos que aprender sobre novas tags, elas foram criadas para facilitar ainda mais o trabalho do Webmaster, pois fazem que coisas que antes só podiam ser feitas com muito trabalho, programação (JavaScript e/ou PHP) e, claro, muita dor de cabeça ;)
Iremos, no decorrer de nossa Apostila de HTML5, falar, explicar e dar exemplos de sites e códigos, que usam cada uma dessas novas tags e elementos.
Por hora, iremos apenas apresentá-las para vocês, com uma pequena explicação da utilidade de um desses elementos.
Elemento <nav> do HTML5 - Navegando Pelo Site
A tag <nav> se refere à navegação de um site, que geralmente é composta por links com as principais páginas ou seções.É um elemento genérico, pois no geral, os sites realmente possuem um local para o usuário navegar, se localizar e achar facilmente conteúdo em uma página.
Ou seja, o <nav> é um elemento para estruturar um site.
Elemento <article> do HTML5 - O conteúdo
Como o nome pode sugerir, a tag <article> define e estrutura uma região do seu site, de modo a deixar ela mais independente.Por exemplo, o conteúdo textual do artigo ou um jogo online.
Ele fica independendo do menu de navegação, barra lateral ou rodapé.
Estruturando e definindo este elemento <article>, você separa o conteúdo (o "grosso") da página, do restante do site, como do design.
Elemento <header> do HTML5 - A tag cabeça
Antes de mais nada, cuidado para não confundir <header> com <head>.Como o nome sugere, ele é usado para estruturar um cabeçalho, geralmente de informações, de uma página, como o nome do site, slogan, marca, títulos etc.
Elemento <footer> do HTML5 - Rodapé
Os rodapés são, geralmente, trechos de um site que aparecem ao fim de cada página.Porém, ao contrário do que muitos pensam, não é obrigado que este elemento fica lá embaixo da página.
Sua ideia é a de dar informações sobre a página, sobre o site, listar outros links interessantes ou informações de direitos autorais.
Elemento <section> do HTML5 - Seccionando, Dividindo e Estruturando Sites
Agora que já mostramos as tags <article>, <header> e <footer>, ficará fácil entender a <section>.A section é, simplesmente, uma seção.
Ele define e estrutura diversas partes de uma página, é bem genérica e seu uso ajuda a organizar os elementos de uma página.
Com este elemento do HTML5, você poderá agrupar elementos que tem algo em comum, como uma seção na página de um artigo, com informações do autor e uma foto. É uma section do autor.
No menu lateral você pode seccionar e definir um local para mostrar links que acha interessante e em outra <section> você pode agrupar uma parte da página que indica os melhores livros do ramo do seu site, etc etc.
As <section> são bem gerais e tem a função de agrupar elementos que fazem parte de um mesmo bloco lógico e estrutural, com relações entre si.
Elemento <aside> do HTML5 - Elementos à parte
Aside, em inglês, quer dizer de lado.Usamos esta tag para definir elementos, ou agrupá-los, de modo que formem um bloco que não está diretamente ligado ao conteúdo principal da página.
É comum o uso do elemento <aside> em HTML5, para definir regiões para publicidade, links laterais, banners e tudo mais que não for conteúdo principal.
Elemento <mark> do HTML5 - Referenciando e Marcando
Usamos a tag <mark> para, obviamente, marcar algum trecho do site.Ao marcarmos, estamos referenciando este trecho, o colocando em evidência, para os mais diversos propósitos que você desejar.
Elemento <time> do HTML5 - Data e Hora
Quando falamos das facilidades do HTML 5, realmente não estamos brincando ou exagerando, e a tag <time> só reforça isso.Este elemento do HTML 5 serve para mostrar o horário (de 24h) e/ou data, e até mesmo a zona de tempo do local.
Outros elementos do HTML5
A lista de tags se estende, há muitos recursos e elementos para serem utilizados em HTML5, como por exemplos:- Elementos multmídia: < video >, < audio >, < embed > e < source >
- Elementos de formulário: < input > (com mais recursos), < output >, < menu >, < command > , < progress >, < datalist > etc
- Elementos para recursos gráficos: < canvas >
Nenhum comentário:
Postar um comentário