Estrutura básica, Modelos de Conteúdo, Novos elementos e atributos.

Publicado: 3 de março de 2013 em HTML 5

HTML

HyperText Markup Language ou Linguagem de marcação de hypertexto tem como finalidade publicar conteúdo na Web através de elementos que juntos formam uma grande rede de informação.

<doctype>

O doctype deve ser a primeira linha de código do documento antes mesmo das tags HTML. Ao adicionar essa informação você estará indicando ao browser e/ou navegador e para outros meios qual a especificação de código a ser utilizada.

Porém, é importante lembrar que o Doctype não é uma tag do HTML, mas uma instrução para que o navegador saiba em que versão de códigos a marcação foi inscrita.

<html>

O código HTML é um conjunto de elementos, sendo que esses podem ser um filho do outro em uma sequência linear de código , ou seja, os atributos são posicionados no documento de forma organizada para que este possa ser interpretado pelo browser que, posteriormente, “desenhará” a página para o usuário.

Portanto, todos esses atributos que são responsáveis pela estrutura da página são filhos da tag HTML o elemento principal dessa árvore.

<lang>

<html lang=”pt-br”>

Este atributo é necessário para informar aos usuários qual será a linguagem principal do documento, isto é, no exemplo do código acima está indicando o pt-br, sendo assim, o browser será informado que os conteúdos estão descritas no português brasileiro.

Lembre-se que o seu uso não está restrito a tag HTML, pois ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto, apresentando-nos a possibilidade de incrementar um trecho do documento com outro idioma.

<head>

Para saber o valor da tag HEAD basta tentar imaginar um documento sem essa tag, imaginou?. Viu a proporção que o arquivo pode tomar?. Portanto, é nesta tag que ficará toda parte inteligente da página, ou seja, tudo que o browser precisa saber antes de começar a escreve-la (renderizar).

Por isso, é nela que são colocados atributos, tais como: title, link, meta, style, script, palavras-chave e outros dados que não são considerados como parte do documento.Uma vez colocada as tags no elemento HEAD, as mesmas jamais serão exibidas,  porém estará acessível a outros “mecanismos”.

Os livros definem que a tag HEAD contém as informações sobre um documento, também, chamados de meta-informação ou informação sobre informação.

<title>

Os autores de um documento deverão utilizar o atributo title para identificar os conteúdos contidos no mesmo, uma vez que páginas que estão fora do contexto são frequentemente consultados.

Portanto, essa tag definitivamente serve para informar a frase que vai no topo do browser, algo que podemos definir como título do browser, informar os visitantes e ao google sobre o conteúdo da página.

<charset>

A web é acessada pelo mundo todo. E criar um site limitado, isto é, que pessoas de outros países deixam de acessar seu site por pertencerem a um idioma diferente vai contra a tradição da internet.

Por isso, utilizamos essa metatag, onde ela é responsável por chavear qual tabela de caracteres a página está utilizando. Chavear tabela de caracteres.Como assim?.

Isso mesmo, para suprir essa necessidade global, ao invés de cada região ter seu armazenamento de letras foi criada uma tabela chamada UNICODE que suporta em torna de 1 milhão de caracteres, uma vez que seria muito mais sensato  haver uma tabela padrão com o maior número de informação possível, está possibilidade existe por que o UNICODE fornece um único número para cada carácter, independentemente da plataforma, programa ou língua.

Atualmente, a maioria dos browsers suportam o UNICODE, desta forma, utilizando este conceito você garante que seu documento será visualizado no mundo inteiro.

<link>

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

A tag link significa estabelecer uma ligação com outra página. Então são os links que permitem a navegação?. De certa forma sim, pois esses atributos permitem efetuar os saltos entre as páginas, ou seja, eles criam a possibilidade de acesso a informação a uma velocidade inimaginável.

Nos dias de hoje, há dois tipos de links no HTML. A “tag a”, são links que levam o usuário para outros documentos e a “tag link”,  são links para fontes  externas que serão usadas no documento.

No exemplo acima, há uma tag link que importa um arquivo CSS para a página. E como sabemos que está sendo chamado um arquivo CSS?. É justamente o atributo rel, colocado posteriormente a tag link que indica que a importação será referente a um arquivo folha de estilo.

Outro indicador é o alternate, este informa que o conteúdo do site pode ser encontrado em um caminho alternativo, por exemplo:  Atom Feed.

<link rel=”alternate” type=”application/atom+xml” title=”feed”

<body>

Tudo que estiver contido dentro deste atributo será mostrado na janela principal do browser, sendo apresentado ao usuário.Este elemento pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens entre outros.

Modelo de Conteúdo

Conhecendo a estrutura básica do HTML, descobrimos que os elementos podem ser pai ou filhos um dos outros, porém alguns atributos podem ser divididos em categorias de modelos de conteúdo, são eles: elementos de linha e elementos de blocos.

Os elementos de linha marcam os textos. Já, os de blocos são como caixas que dividem o conteúdo nas seções do layout, porém para utilizar essas categorias tirando o maior proveito possível vale lembrar de algumas regras que mencionarei a seguir.

  • Elementos de linha podem conter outros elementos de linha.
  • Os elementos de linha nunca podem conter elementos de bloco.
  • Elementos de bloco sempre podem conter elementos de linha, dependendo da categoria que ele se encontra.

Portanto, esses grupos dizem qual modelo de conteúdo o elemento irá trabalhar e qual será o seu comportamento.

Metadata Content
Alguns atributos que fazem parte desta categoria são:

  • link
  • meta
  • script
  • style
  • title

Conteúdo colocado na tag <head>  antes da apresentação do documento.

Flow Content
Grande parte dos elementos desta categoria são utilizados na tag <body>, abaixo alguns desses atributos.

  • article
  • aside
  • audio
  • br

Os elementos desta categoria devem ter pelo menos um descendente de texto que faça parte da categoria embedded.

Sectioning Content
Estes elementos definem um grupo de cabeçalhos e rodapés.Basicamente são elementos que juntam grupos de textos no documento.

Heading Content
Definem uma seção de cabeçalhos, que podem estar contidos em um elemento.

Phrasing Content
Nesta categoria se encontra os elementos que marcam o texto do documento.

Embedded content
Aqui há elementos que importam outra fonte de informação para o documento.

Interactive Content
São elementos que fazem parte da interação de usuário. Alguns elementos podem ser ativados por um comportamento, isso significa que o usuário pode ativá-lo ao realizar algum  tipo de evento com este atributo.Os eventos são ativos manualmente pelo usuário, utilizando um teclado, mouse, comando de voz etc.

Novos elementos

Elementos, como: nav e section nos ajudam a definir setores no documento. Os mesmos, nos oferecem a possibilidade de diferenciar áreas importantes da página, como: header e footer.Com essas atribuições, os buscadores conseguem conferir o código com mais eficácia levando menos tempo para estocar essas informações.

  • section

Define uma nova seção no documento, podendo por exemplo criar na página principal uma seção para últimas notícias e ofertas.

  • nav

Aqui representa-se um local da página que contém links para outras páginas.

  • article

Parte da página que poderá ser utilizado Feeds.

  • aside

Representa os conteúdos de referência dispostos na página, como: conteúdo de publicidade.

  • header

Representa o topo da página, onde normalmente coloca-se o cabeçalho, campos de busca e outros.

  • footer

O footer apresenta-se o rodapé da página, sendo o último elemento do documento antes de fechar a tag <html>, porém ele não precisa necessariamente aparecer no final de uma seção.

  • time

Este elemento serve para marcar parte do texto que representa um horário ou uma data.

Elementos Modificados

  • O elemento b passa a ter o mesmo nível semântico que um SPAN, mas ainda mantém o estilo de negrito no texto.
  • O elemento i,também, passa a ter nível semântico SPAN. Porém, o texto continua sendo itálico.
  • O elemento a sem o atributo href agora representa um placeholder.
  • O elemento address passa a ser tratado como seção do documento.
  • O elemento strong ganhou mais importância.
  • O elemento head passa a não aceitar elementos childs.

Atom Feed

Refere-se a uma linguagem XML que permite aos publicadores da Web organizarem o conteúdo de seus sites para vários consumidores. Usando o Atom, os publicadores conseguem criar um feed em um formato padronizado. Este por sua vez, permite que os usuários leiam o conteúdo do Web site com um software conhecido como um leitor de feed. Ele também, permite que outros desenvolvedores da Web publiquem seus conteúdos feeds em seus próprios Web sites.

HTML Semântico

O HTML semântico é o documento organizado, ou seja, um documento de acordo com a “padronização”, abrindo e fechando as tags que ajudam a dar significado para o está sendo proposto corretamente, tornando as informações contidas mais exatas para os buscadores e browsers e até mesmo na acessibilidade.
Atualmente, a formatação semântica não é algo conhecido por todos, mas para aqueles que a fazem veem uma melhora significativa na página de internet para a visibilidade e relevância em buscadores e compatibilidade de browsers, além de ajudar os deficientes visuais, através de sua acessibilidade de dizer o que é cada elemento em um texto.
Com o desenvolvimento do HTML 5 a W3C está propondo criar um código que de ainda mais significado a cada elemento.

Abaixo, um vídeo de Lucas Vulcanis apresentando a estrututa básica do HTML5 utilizando as novas tags header e footer para definir o cabeçalho e rodapé da página.

Fontes de Pesquisa

Livro: Use a Cabeça HTML com CSS e XHTML
Autor: Elisabeth Freeman e Eric Freman

Apostila: HTML5
Autor: Marcos Paulo Furlan

http://www.w3.org/International/questions/qa-choosing-language-tags.
http://desenaviegas.com/global.html#h-7.4.1
http://www.hugoribeiro.com.br/Curso_HTML/html/c18.htm
http://www.webmaster.pt/tag-title-google-5649.html
http://www.cultura.ufpa.br/dicas/htm/htm-link.htm
http://www.ibm.com/developerworks/br/opensource/library/x-phpatomfeed/index.html
http://www.gpsites.net/tag-body-html-sites-prontos.html
http://www.acessibilidade.gov.pt/tutor/semantic_1/index.htm
http://www.kadunew.com/blog/xhtml/a-importancia-do-html-semantico
http://blog.hospedandosites.com.br/por-que-devo-usar-o-html-semantico/#.UTKY7qJmhBw

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s