Como usar tags semânticas para html5 e css3 programação

Como desenvolvedores web começou a usar técnicas de layout flutuante, eles divs quase sempre criados chamada nav

, cabeçalho, e rodapé. Os desenvolvedores do HTML5 decidiu criar novos elementos com esses nomes. Dê uma olhada no seguinte código para ver as tags semânticas em ação.

Video: Curso de HTML5 Completo e GRÁTIS

semântico

Este é o meu cabeçalho

Seção 1

Seção do corpo ...

Seção 2

Seção do corpo ...

Artigo

Artigo corpo ...

Como você pode ver, há uma série de novas tags de marcação semântica em HTML5:



cabeçalho: Este não é o mesmo que as tags h1-h6. Denota um pedaço da página que irá conter um cabeçalho para a página. Muitas vezes o cabeçalho vai encher-se a largura da página, e vai ter algum tipo de imagem bandeira da. Ele freqüentemente contém h1 conteúdo.

  • nav: Esta tag indica algum tipo de seção de navegação. Não tem nenhum estilo particular de sua própria, mas é frequentemente usado como um menu horizontal ou vertical para navegação do site.

    Video: 2 - HTML5 - Conheça as tags semanticas de layout

  • seção: A seção é usada para especificar uma parte genérica da página. Você pode ter várias seções na mesma página.

  • artigo: Um artigo é como uma seção, mas é projetado para uso com recursos externos. Muitas páginas são construídas automaticamente pelo software, e quando estas páginas integrar o conteúdo de outras fontes, ele pretende usar o artigo tag para integrar este conteúdo.

  • rodapé: Um rodapé é destinado para exibir o conteúdo de rodapé na parte inferior de uma página. Normalmente um rodapé cobre a parte inferior de uma página, embora este não é o comportamento padrão.

    Video: Curso Básico HTML5 + CSS3 - Tags header e hn #02

  • Note-se que nenhum destes elementos têm qualquer formatação específica. Cabe a você para fornecer a formatação através de código CSS. Cada um dos elementos pode ser formatado diretamente como um elemento HTML (porque isso é o que é). Todos os navegadores última versão apoiar as tags marcação semântica, mas se você quiser apoiar os navegadores mais antigos (especialmente isto é, antes da versão 8), você ainda vai precisar usar divs.


    Publicações relacionadas