Categoria: HTML

As principais tags do HTML 5 e suas definições

<article> Define um artigo em um documento

<aside> Define conteúdo além do conteúdo da página

<bdi> Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele

<details> Define detalhes adicionais que o usuário pode ver ou ocultar

<dialog> Define uma caixa de diálogo ou janela

<figcaption> Define uma legenda para um elemento

<figure> Define conteúdo auto-contido

<footer> Define um rodapé para um documento ou seção

<header> Define um cabeçalho para um documento ou seção

<main> Define o conteúdo principal de um documento

<mark> Define texto marcado / realçado

<meter> Define uma medida escalar dentro de um intervalo conhecido (um
medidor)

<nav> Define os links de navegação

<progress> Representa o progresso de uma tarefa

<rp> Define o que mostrar em navegadores que não suportam anotações em ruby

<rt> Define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)

<ruby> Define uma anotação rubi (para tipografia do leste asiático)

<section> Define uma seção em um documento

<summary> Define um título visível para um elemento <details>

<time> Define uma data / hora

<wbr> Define uma possível quebra de linha

Dicas de HTML5

O Hyper Text Markup Language (Linguagem de marcação de hipertexto), o conhecido código HTML está presente em todas as páginas da web já um bom tempo. Aproximadamente dez anos o HTML está presente na vida dos internautas e, possui uma grande aceitação pelas pessoas que o usam. O código HTML já está se adequando para sua quinta versão, deste modo poderá beneficiará os desenvolvedores e todos os usuários da internet.Esta inovação, deve-se ao fato também do desenvolvimento paralelo da linguagem HTML e o XML, que em inglês, eXtensible Markup Language. Deste modo o XML trata-se de uma linguagem de marcação recomendada pela W3C para a criação de documentos que possuem uma hierarquia de dados, como bancos de dados e textos.

Novos elementos foram introduzidos no HTML5, todos têm a finalidade de facilitar a compreensão e a manutenção do código. Alguns deles são uma evolução natural do elemento < div > focado na semântica; outros no entanto, surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece atualmente com as imagens. Os principais elementos são:

Elementos de estrutura:

  • < header > – cabeçalho da página ou de uma seção (não confundir com a tag );
  • < section > – cada seção do conteúdo;
  • < article > – um item do conteúdo dentro da página ou da seção;
  • < footer > – o rodapé da página ou de uma seção;
  • < nav > – o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;
  • < aside > – conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

Elementos de conteúdo

  • < figure > – usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe.
  • < canvas > – através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;
  • < audio > e < video > – usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens.
  • < dialog > – junto com as tags < dt > e < dd > será usado para formatar um diálogo
  • < time > – representa data e/ou hora;
  • < meter > – usada para representar medidas, que podem ser de distância, de armazenagem em disco, etc.

Como percebemos muitos elementos foram introduzidos no HTML5, porém, é indiscutível a grande semelhança com seus antecessores. Os usuários que conheciam bem os anteriores não sentirão nenhuma dificuldade em lidar com o novo HTML. Porém, para os iniciantes, estima-se que os novos elementos deixarão o acesso mais fácil.

Conforme informações, muitos navegadores já oferecem suporte à maior parte dos elementos do HTML5. Deste modo, muitos navegadores conhecidos, com exceção do Internet Explorer 8( porém garantiu a presença com IE9, que será lançado daqui poucos dias) como Opera, Safari 4, Firefox 3.6 e Chrome já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

Alguns dos desenvolvedores dizem que deveriam esperar pela popularização do IE9 para começar a usar a nova versão. No entanto, outros pensam o contrário, acreditam que toda nova tecnologia deve ser utilizada o quanto antes, assim, já começaram a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags . Com essa evolução da linguagem, os navegadores passam da categoria “mostradores” de páginas para um renderizador de “web software”.

Para tanto, é indiscutível a aceitação do HTML5, ele está contribuindo para uma nova era no que diz respeito ao desenvolvimento de páginas para a internet. Sendo que o principal foco é o alto poder de mobilidade do usuário. As mudanças que ocorreram foram postas ou ajustadas a partir das necessidades dos desenvolvedores, a partir dos erros e acertos. Com essa inovação, os usuários terão aplicações na web mais ricas e com maior integração entre conteúdo on-line e off-line.

A versão final do HTML 5 deverá ser lançada apenas em 2012, porém a especificação atual já é suportada pela maior parte dos navegadores. Mesmo assim já podemos utilizar as novidades do HTML5 e já temos até grandes sites que o utilizam como o YouTube.

O que é HTML?

HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.

O HTML integra as linguagens que formam as camadas de desenvolvimento web

Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.

É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.

HTML – A camada que apresenta o conteúdo

Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.

O HTML é responsável por exibir o conteúdo dando-lhe significado.

O HTML é a linguagem base e a primeira que  deve ser aprendida.

Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.

Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.

Quer aprender HTML? Então baixe nosso ebook gratuito clicando aqui.

Estrutura básica de uma página HTML para iniciantes

Iniciando o código básico de HTML

O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:

  1. <!DOCTYPE html>
  2. <html lang=“pt-br”>
  3. <head>
  4. <title>Título da página</title>
  5. <meta charset=“utf-8”>
  6. </head>
  7. <body>
  8. Aqui vai o código HTML que fará seu site aparecer.
  9. </body>
  10. </html>

É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura:

  • Definição do documento (doctype)
  • Cabeça (head)
  • Corpo (body)

Doctype – Definindo o documento

Uma coisa importante: SEMPRE deve existir o doctype, que é este código <!DOCTYPE html>.

O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.

HEAD

Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag head.

BODY

Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, miniaplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <body> e </body>.

Este é o preceito básico que deve estar muito bem claro para você: onde as marcações se aplicam, e quais são os resultados deste modelo. Por exemplo: se vocês deseja informar conteúdo textual para saída legível ao usuário do seu sistema web, esta marcação deverá obrigatoriamente estar no bloco do corpo da página. Ainda: para definir qual o tipo de codificação da página (uma meta informação do documento), esta deve obrigatoriamente estar marcada no cabeçalho do mesmo documento.

Dentro do elemento BODY sua estrutura de página terá os elementos semânticos da construção da sua página, onde serão declarados e identificados cabeçalhos, rodapé, conteúdo principal, etc.