This article has been localized into Portuguese by the community.
Sua primeira página Web
Aqui está um exemplo de um dos documentos HTML5 mais simples que você pode criar. Ele começa com o doctype HTML5, seguido de um título da página e depois seguido por algum conteúdo, neste caso um parágrafo simples.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Você dever ter uma ideia de como isso poderia parecer em um navegador – O título do documento, "Your first HTML5 Document" e o texto "Okay, now we're going somewhere" escrito no canto superior esquerdo da página.
A declaração doctype diz a todos que estão lendo o documento que o conteúdo a seguir é do tipo HTML.
<!DOCTYPE html>Se você já olhou a marcação de documentos HTML antes, você pode ter visto uma declaração doctype muito semelhante a esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Até os desenvolvedores profissionais de aplicações web copiam e colam este longo doctype de um documento para o outro – o novo e simples doctype é fácil de lembrar, e como nenhuma versão específica foi declarada, todas as novidades futuras estão automaticamente disponíveis para sua página.
Para que server o DOCTYPE?
Mas para que serve o doctype? Todos os navegadores tem duas maneiras diferentes de ler seu documento – o modo padrão e o modo quirks. Se você não especificar que tipo de documento eles estão manipulando, eles irão usar o modo quirks. Pense nisso como a forma antiga de ler seu documento – pode haver algumas falhas e você pode ter certeza que nem todos os navegadores lerão seu documento da mesma maneira. Declarando um doctype força o navegador a usar o modo padrão – a "nova" maneira de ler seu documento. Usando o modo padrão, a maioria dos navegadores vão ler seu documento da mesma maneira e eles realmente vão entender o que você está escrevendo.
Para tornar o documento HTML5 mais fácil de entender para você, você gostaria de usar os dois elementos de seção <head> e <body>. Usando essas seções, você separa com clareza as informações da sua página (o cabeçalho "head") do corpo (body). Usando eles, sua página ficaria assim:
<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>Você pode estar pensando, o que aconteceu com a indentação? É sua escolha decidir se você quer ou não usar a indentação, mas ela visualiza a estrutura da sua página e a torna fácil de ver com uma olhada.
A última coisa que você gostaria de colocar é o elemento <html>, e ele é colocado logo depois da declaração doctype.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>Parabéns, você acabou de criar sua primeira página HTML5! Você percebeu como o elemento <p> está dentro do elemento <body>? Isso é chamado de aninhar elementos e é parte essencial da estrutura HTML. Eu vou deixar-la como está, mas eu queria somente introduzir a ideia de aninhar elementos.
O que você aprendeu
- Sempre declare o doctype - <!DOCTYPE html>
- Use o elemento <head> para separar a informação da sua página
- Use o elemento <body> para separar o conteúdo da sua página
- Usar as tags <html>, <head> e <body> é uma questão de estilo quando se usa HTML5, mas eles tornam a estrutura da página mais clara para você.
- Indentar sua marcação a torna mais fácil de compreender
- Você pode aninhar um elemento dentro de outro
