TOC

This article has been localized into Portuguese by the community.

Introdução ao HTML:

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
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!