HTML5 - Estrutura básica, DOCTYPE e Charsets
- Posted: Apr 18, 2012 at 8:32 AM
- 12,505 Views
- 70 Comments
ESTRUTURA BÁSICA, DOCTYPE E CHARSETS
A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:
Arquivo: exemplos/3/estruturabasica.html
<!DOCTYPE HTML> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <link rel=”stylesheet” type=”text/css” href=”estilo.css”> <title></title> </head> <body> </body> </html>
O Doctype
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html>
O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.
O elemento HTML
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.
<html lang=”pt-br”>
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
Para encontrar a listagem de códigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.
HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Essa forma antiga será também suportada no HTML5. Contudo, é melhor que você utilize a nova forma.
A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.
O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.
Tag LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel="stylesheet" type="text/css" href="estilo.css" >
O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/" >
Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.
No HTML5 há outros links relativos que você pode inserir como o rel="archives" que indica uma referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.
Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com
Comment on the Post
Already have a Channel 9 account? Please sign in
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
Péssima explicação!
Muito obrigado por tudo,como já disse estou começando agora e pra mim tudo é novidade e agradeço desde já pelos post.
Conteúdo simples, direto e esclarecedor! Grato!
Bem direto
Ótimo texto!
Porém, no primeiro parágrafo, há um erro de ortografia: "... há apenas uma excessão na escrita..."
Ao invés de excessão, o correto é exceção.
Bem simplificado.
Muito boa a explicação. Quem quiser mais é só pesquisar.
Muito boa explicação, será bem útil no dia-a-dia.
Show de bola.
simples.
Simples e Fácil de entender!!
Muito bom. Uma simples explanação sobre a estrutura básica da linguagem.
Muito bom ,estou vendo no começo de forma rapida pois tenho experiencia com HTML e fiz um Curso no Senac de HTML5
Gostei do Conteudo .
ÓTIMO.
Tem cara que não tem o que fazer mesmo, achar péssimo então vai estudar pago. Além de estar vendo conteúdo gratuito reclama.
Parabens a Microsoft.
Legal!!
Muito boa a explicação.
Simples e intuitivo..
Interessante.
Estou vendo que o HTML5 será muito mais prático e direto, sem atribuições ou referencias errõneas.
O artigo está excelente e muito claro =)
O conteúdo é muito pequeno,
mas é uma boa explicação.
O objetivo do conteúdo é diferenciar o HTML5 da versão anterior. Entendi bem, apesar de não dominar o assunto.
Um cara para falar que essa explicação é péssima, ou é muito burro, ou não sabe português, ou não sabe interpretar o que lê.
Ótima explicação: simples e direta!
Gostei :)
Simples e direto sem se aprofundar desnecessariamente, já que a intenção é apenas dar uma visão geral.
Vou tem que ler novamente nao compreendi a exolicação, um pouco confuso
Achei o texto superficial, vago e muito limitado até para um iniciante, parece ter sido feito as pressas só para tapar um buraco.
Conseguir compreender claramente a explicação achoque por que já desenvolvo com o html ha mais de 10 anos. parabéns novamente a Microsoft Virtual Academy
Eu acredito que este conteúdo foi muito superficial para parte de um treinamento homologado. Por mais que faça referência à uma Introdução, nesta seção poderia especificar um pouco mais de detalhes.
Estou começando agora no meio da TI. Confesso que uma parte eu entendi e outras partes fiquei sem entender.
A tag <a> pode endereçar uma parte do mesmo documento em que se encontra ou outro documento, mas não necessariamente outro documento.
Para mais detalhes, veja: http://www.w3schools.com/html/html_links.asp
simples e direto!
Simple e esclarecedor.
De forma muito simples os diretórios são explanativos e os links de estudo HTML nos permitem montar planos de estudo e esclarecimentos muito bom! very good
Para um início de conteúdo, está ótimo! Já é mais do que muitos professores ensinam por ai!
a explicação esta aceitavel, HTML é simples mesmo
gostei
Gistei mesmo, valeu!!!
Texto simples e direto. Bom para quem já conhece HTML e não quer perder tempo.
@ricardo:Não achei ruim a explicação não.
Não se esqueça que o foco são os principiantes.
Excelente.
Muito boa a explicação, simples e direto.
Recomento para dar inicio estrutura básica do HTML5.
Muito bom este material!
Boa!
Faltou apenas alguns exemplos na tag LINK sobre o uso do alternate. Só faz citação sobre o uso do ATOM FEED, espero que explique mais sobre ele... De resto tá muito bom.
Basico mas tudo ok
Texto básico, mas que diz tudo que é necessário para iniciar o estudo do HTML5.
Muito bom
Para que ja domina o HTML 4, o texto é claro e objetivo.
Muito bom!
Iniciei meus trabalhos há alguns anos atrás na época do velho HTML, e somente agora estou me preocupando em fazer uma "reciclagem" dos conhecimentos, e vejo que o novo HTML 5 trouxe muito mais simplicidade e praticidade à escrita dos códigos.
Com o velho HTML, era preciso escrever muito código para se chegar a um resultado simples.
Noto que com essa nova codificação, mais curta e objetiva, conseguimos escrever de forma mais rápida, além de integrar o CSS de forma mais objetiva.
Muito bom mesmo, creio que em pouco tempo vou me adaptar bem ao novo padrão.
Simples porem detalhado, excelente.
explicacao excelente
simplificando nossas vidas...
Conteúdo simples e objetivo. Apresentou algumas melhorias consideráveis para o html.
Reduzir código para melhorar o desempenho.
Simple! Congratulations...
Explicação clara e objetiva, muito bom!
Ficou muito melhor assim, agora o HTML 5 faz a mesma coisa porém com menos código. Ótima explicação!
Simples, mas objetiva.
Otimo, claro e simples. Parabéns!
Otimo,parabéns
Interessante conteúdo..
Não intendi muito bem o final da explicação, tirando isso está sendo legal..
To começando com HTML5 agora, boa a explicação.
Já desenvolvi alguma coisa em HTML e Java script e estou voltando, muito bom o texto.
Parabéns.
Ótimo post parabéns, o que temos agora é de avança para o mais complicado do HTML5 e aprender a programar nele. Obrigado!
Tem pessoas ou não sabe ler ou tem algum tipo de problemas para achar o conteúdo deste material péssimo.
Ao contrário é muito claro e objetivo
Remove this comment
Remove this thread
close