path: root/files/pt-br/aprender/html/introducao_ao_html/getting_started/index.html

---
title: Iniciando com HTML
slug: Aprender/HTML/Introducao_ao_HTML/Getting_started
tags:
  - Codificação de Scripts
  - Comentário
  - Elemento
  - Guía
  - HTML
  - Iniciante
  - atributo
  - espaço em branco
  - referência de entidade
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>Básico de informática, <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a> e conhecimento básico de como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">trabalhar com arquivos</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objetivos:</th>
   <td>Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="O_que_é_HTML">O que é HTML?</h2>

<p>{{glossary("HTML")}} (HyperText Markup Language) não é uma linguagem de programação, é uma <em>linguagem de marcação</em> utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de {{glossary("Element", "elementos")}} que você usa para anexar, envolver ou <em>marcar</em> diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das {{glossary("Tag", "tags")}} pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:</p>

<pre class="notranslate">Meu gato é muito mal-humorado.</pre>

<p> Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo({{htmlelement("p")}}):</p>

<pre class="brush: html notranslate">&lt;p&gt;Meu gato é muito mal-humorado.&lt;/p&gt;</pre>

<h2 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h2>

<p>Vamos explorar nosso elemento parágrafo um pouco mais:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>As partes principais do elemento são:</p>

<ol>
 <li><strong>Tag de abertura:</strong> Consiste no nome do elemento ( neste caso: p ), envolvido entre <strong>parênteses angulares</strong> de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.</li>
 <li><strong> Tag de fechamento:</strong>  É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.</li>
 <li><strong>O conteúdo:</strong>  Este é o conteúdo do elemento, que neste caso é somente texto.</li>
 <li><strong>O elemento:</strong> A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.</li>
</ol>

<h3 id="Aprendizado_ativo_criando_seu_primeiro_elemento_HTML">Aprendizado ativo: criando seu primeiro elemento HTML</h3>

<p>Edite a linha abaixo na área <em>Entrada</em> colocando-a entre as tags <code>&lt;em&gt;</code> e <code>&lt;/em&gt;</code> (adicione o <code>&lt;em&gt;</code> <em>antes para abrir o elemento</em>, e <code>&lt;/em&gt;</code> depois, <em>para fechar o elemento</em>). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área <em>Saída.</em></p>

<p>Caso você cometa um erro, você pode usar o botão <em>Resetar</em> para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão <em>Mostrar solução</em> para visualizar a resposta.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editável&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
  Este é meu texto.
&lt;/textarea&gt;

&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Resetar" /&gt;
  &lt;input id="solution" type="button" value="Mostrar solução" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solução';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solução') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solução';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solução';
  }
  updateCode();
});

var htmlSolution = '&lt;em&gt;Este é meu texto.&lt;/em&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Mostrar solução') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Aninhando_elementos">Aninhando elementos</h3>

<p>Elementos podem ser inseridos dentro de outros elementos — isto é chamado de  <strong>aninhamento</strong>. Se nós quisermos dizer que nosso gato é <strong>muito </strong>mal-humorado, nós poderemos envolver a palavra "muito" com o elemento {{htmlelement("strong")}},  que significa enfatizar fortemente a palavra:</p>

<pre class="brush: html notranslate">&lt;p&gt;Meu gato é &lt;strong&gt;muito&lt;/strong&gt; mal-humorado.&lt;/p&gt;</pre>

<p>No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento <code>p</code> primeiro, e então o elemento <code>strong</code>, portanto temos que fechar o elemento <code>strong</code> primeiro, depois o <code>p</code>. O código a seguir está errado:</p>

<pre class="example-bad brush: html notranslate">&lt;p&gt;Meu gato é &lt;strong&gt;muito mal-humorado.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!</p>

<h3 id="Elementos_em_bloco_versus_elementos_inline">Elementos em bloco versus elementos inline</h3>

<p>Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.</p>

<ul>
 <li>Elementos em bloco formam um bloco visível na página — eles aparecerão em uma nova linha logo após qualquer elemento que venha antes dele, e qualquer conteúdo depois de um elemento em bloco também aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não seria aninhado dentro de um elemento inline, mas pode ser aninhado dentro de outro elemento em bloco.</li>
 <li>Elementos inline (na linha) são aqueles que estão contidos dentro de elementos em bloco envolvem apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline geralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento {{htmlelement("a")}}(hyperlink) ou elementos de ênfase como {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li>
</ul>

<p>Veja o seguinte exemplo:</p>

<pre class="brush: html notranslate">&lt;em&gt;primeiro&lt;/em&gt;&lt;em&gt;segundo&lt;/em&gt;&lt;em&gt;terceiro&lt;/em&gt;

&lt;p&gt;quarto&lt;/p&gt;&lt;p&gt;quinto&lt;/p&gt;&lt;p&gt;sexto&lt;/p&gt;
</pre>

<p>O elemento {{htmlelement("em")}} é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O {{htmlelement("p")}}, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à <a href="/pt-BR/docs/Learn/CSS/First_steps">estilização CSS</a> padrão que o browser aplica aos parágrafos).</p>

<p>{{ EmbedLiveSample('Elementos_em_bloco_versus_elementos_inline', 700, 200, "", "") }}</p>

<div class="note">
<p><strong>Nota</strong>: o HTML5 redefiniu as categorias de elemento em HTML5: veja <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorias de conteúdo de elementos</a>. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.</p>
</div>

<div class="blockIndicator note">
<p><strong>Nota</strong>: <span class="tlid-translation translation" lang="pt"><span title="">Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os <a href="/pt-BR/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">tipos de caixas CSS</a> com os mesmos nomes.</span> <span title="">Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi</span> <span title="">evitar essa confusão bastante comum.</span></span>  </p>
</div>

<div class="note">
<p><strong>Nota</strong>: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja <a href="/en-US/docs/Web/HTML/Block-level_elements">elementos em bloco</a> e <a href="/en-US/docs/Web/HTML/Inline_elements">elementos inline</a>.</p>
</div>

<h3 id="Elementos_vazios">Elementos vazios</h3>

<p>Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento {{htmlelement("img")}} insere uma imagem em uma página na posição em que ele é incluído:</p>

<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>Isto exibirá em sua página:</p>

<p>{{ EmbedLiveSample('Elementos_vazios', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Nota</strong>: Elementos vazios são também chamados de <em>void elements</em>.</p>
</div>

<h2 id="Atributos">Atributos</h2>

<p>Elementos também podem conter atributos, que se apresentam da seguinte forma:</p>

<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo <code>class</code> permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.</p>

<p>Um atributo deve conter:</p>

<ol>
 <li>Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)</li>
 <li>O nome do atributo, seguido por um sinal de igual.</li>
 <li><span class="tlid-translation translation" lang="pt"><span title="">Um valor de atributo, com aspas de abertura e fechamento em volta dele.</span></span></li>
</ol>

<h3 id="Aprendizado_ativo_Adicionando_atributos_a_um_elemento">Aprendizado ativo: Adicionando atributos a um elemento</h3>

<p><span class="tlid-translation translation" lang="pt"><span title="">Outro exemplo de um elemento é </span></span>{{htmlelement("a")}}<span class="tlid-translation translation" lang="pt"><span title=""> </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link.</span> <span title="">Isso pode ter vários atributos, mas o mais comuns são os seguintes:</span></span></p>

<ul>
 <li>O valor desse atributo especifica o endereço da web para o qual você deseja que o link aponte; onde o navegador irá quando o link for clicado. Por exemplo <code>href="https://www.mozilla.org/"</code>.</li>
 <li><code>title</code>: O atributo <code>title</code> especifica uma informação extra sobre o link, assim como o assunto da página que está sendo linkada. Por exemplo <code>title="Homepage da Mozilla"</code>. Isto será exibido como uma <em>tooltip (dica de contexto)</em> quando passarmos o mouse sobre o link.</li>
</ul>

<p><span class="tlid-translation translation" lang="pt"><span title="">Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.</span></span></p>

<ol>
 <li>Primeiro, adicione o elemento <code>&lt;a&gt;</code>.</li>
 <li>Segundo, adicione o atributo <code>href</code> e o atributo <code>title</code>.</li>
 <li>Por último, especifique o atributo <code>target</code> para abrir o link em uma nova aba.</li>
</ol>

<p><span class="tlid-translation translation" lang="pt"><span title="">Você poderá ver as atualizações das alterações ao vivo na área Saída.</span> <span title="">Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo </span></span><code>title</code><span class="tlid-translation translation" lang="pt"><span title=""> e, quando clicado, navega para o endereço da web no atributo </span></span><code>href</code><span class="tlid-translation translation" lang="pt"><span title="">.</span> <span title="">Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.</span></span></p>

<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Reset</em>ar. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p>

<div class="hidden">
<h6 id="Playable_code2">Playable code2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editável&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;Um link para o meu site favorito.&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Resetar"&gt;
  &lt;input id="solution" type="button" value="Mostrar solução"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solução';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solução') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solução';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solução';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;Um link para o meu &lt;a href="https://www.mozilla.org/" title="Página da Mozilla" target="_blank"&gt; site favorito&lt;/a&gt;.&lt;/p&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Mostrar solução') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Atributos_boleanos">Atributos  boleanos</h3>

<p>Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.</p>

<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>

<p>De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):</p>

<pre class="brush: html notranslate">&lt;!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada --&gt;
&lt;input type="text" disabled&gt;

&lt;!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled --&gt;
&lt;input type="text"&gt;
</pre>

<p>Ambos resultarão em uma <em>Saída</em> da seguinte forma:</p>

<p>{{ EmbedLiveSample('Atributos_boleanos', 700, 100) }}</p>

<h3 id="Omitindo_as_aspas_dos_valores_do_atributo">Omitindo as aspas dos valores do atributo</h3>

<p>Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo <code>href</code>, da seguinte forma:</p>

<pre class="notranslate">&lt;a href=<code>https://www.mozilla.org/</code>&gt;site favorito&lt;/a&gt;</pre>

<p>No entanto, assim que adicionamos o atributo <code>title</code> neste elemento, a marcação resultará em erro:</p>

<pre class="example-bad brush: html notranslate">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;site favorito&lt;/a&gt;</pre>

<p>Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo <code>title</code> trata-se, na verdade, de três atributos: o atributo <code>title</code> com o valor "The", e dois atributos boleanos, <code>Mozilla</code> e <code>homepage</code>. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!</p>

<p>{{ EmbedLiveSample('Omitindo_as_aspas_dos_valores_do_atributo', 700, 100) }}</p>

<p>Nossa recomendação é <em>sempre incluir as aspas nos valores dos atributos </em>— isto evita inúmeros problemas, além de resultar em um código mais legível.</p>

<h3 id="Aspas_simples_ou_duplas">Aspas simples ou duplas?</h3>

<p>Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;Um link para o exemplo.&lt;/a&gt;

&lt;a href='http://www.example.com'&gt;Um link para o exemplo.&lt;/a&gt;</pre>

<p>Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!</p>

<pre class="example-bad brush: html notranslate">&lt;a href="http://www.exemplo.com'&gt;Um link para o exemplo.&lt;/a&gt;</pre>

<p>Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: </p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>

<p>No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. <span title="">Por exemplo, isso irá quebrar:</span></p>

<pre class="example-bad brush: html notranslate">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>

<p>Então você precisa fazer isso:</p>

<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>

<h2 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h2>

<p>Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is my page&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Neste código nós temos:</p>

<ol>
 <li><code>&lt;!DOCTYPE html&gt;</code>: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim:

  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
  <span class="tlid-translation translation" lang="pt"><span title="">No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente.</span> <span title="">&lt;! DOCTYPE html&gt; é a menor cadeia de caracteres que conta como um doctype válido;</span> <span title="">é tudo o que você realmente precisa saber.</span></span></li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/html" title="The HTML &lt;html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."><code>&lt;html&gt;</code></a> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/head" title="The HTML &lt;head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets."><code>&lt;head&gt;</code></a> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca,  o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code>: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/title" title="The HTML Title element (&lt;title>) defines the document's title that is shown in a browser's title bar or a page's tab."><code>&lt;title&gt;</code></a>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code>: O elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" title="The HTML &lt;body> Element represents the content of an HTML document. There can be only one &lt;body> element in a document."><code>&lt;body&gt;</code></a> contém <em>todo</em> o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.</li>
</ol>

<h3 id="Aprendizado_ativo_Adicionando_alguns_recursos_ao_documento_HTML">Aprendizado ativo: Adicionando alguns recursos ao documento HTML</h3>

<p>Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:</p>

<ol>
 <li>Copiar o exemplo de página HTML mostrada acima.</li>
 <li>Criar um novo documento em seu editor de texto.</li>
 <li>Colar o código no novo arquivo de texto.</li>
 <li>Salvar o arquivo com o nome <code>index.html</code>.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Você também pode encontrar o template básico de HTML no <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
</div>

<p>Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:</p>

<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Neste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <code>&lt;body&gt;</code> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:</p>

<ul>
 <li>Logo abaixo da tag de abertura <a href="/pt-BR/docs/Web/HTML/Element/body" title="The HTML &lt;body> Element represents the content of an HTML document. There can be only one &lt;body> element in a document."><code>&lt;body&gt;</code></a>, adicione um título principal para o documento. Isso deve estar dentro da tag de abertura <code>&lt;h1&gt;</code>e da tag de fechamento <code>&lt;/h1&gt;</code> .</li>
 <li>Edite o conteúdo do parágrafo para incluir algum texto sobre algo de seu interesse.</li>
 <li>Faça com que todas as palavras importantes sejam destacadas em negrito, colocando-as dentro da tag de abertura <code>&lt;strong&gt;</code> e da tag de fechamento <code>&lt;/strong&gt;</code> .</li>
 <li>Adicione um link ao seu parágrafo, conforme <a href="/pt-BR/Aprender/HTML/Introducao_ao_HTML/Getting_started#Aprendizado_ativo_Adicionando_atributos_a_um_elemento">explicado anteriormente neste artigo</a>.</li>
 <li>conforme explicado anteriormente no artigo. <span title="">Você receberá pontos de bônus se conseguir vincular a uma imagem diferente (localmente no seu computador ou em outro lugar da web).</span></li>
</ul>

<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Resetar</em>. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p>

<div class="hidden">
<h6 id="Playable_code3">Playable code3</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Saída ao vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editável&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;Esta é minha página&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Resetar"&gt;
  &lt;input id="solution" type="button" value="Mostrar Solução"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h1 {
 color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar Solução';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar Solução') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar Solução';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar Solução';
  }
  updateCode();
});

var htmlSolution = '&lt;h1&gt;Algumas músicas&lt;/h1&gt;&lt;p&gt;Gosto muito de &lt;strong&gt; tocar bateria &lt;/strong&gt;. Um dos meus bateristas favoritos é Neal Peart, que toca na banda &lt;a href="https://pt.wikipedia.org/wiki/Rush" title="Artigo da Rush na Wikipedia"&gt;Rush&lt;/a&gt;. Meu álbum favorito do Rush atualmente é &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Mostrar Solução') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Espaços_em_branco_no_HTML">Espaços em branco no HTML</h3>

<p>Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:</p>

<pre class="brush: html notranslate">&lt;p&gt;Dogs are silly.&lt;/p&gt;

&lt;p&gt;Dogs        are
         silly.&lt;/p&gt;</pre>

<p>Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.</p>

<h2 id="Referências_de_entidades_incluindo_caracteres_especiais_no_HTML">Referências de entidades: incluindo caracteres especiais no HTML</h2>

<p>No HTML, os caracteres <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> e o <code>&amp;</code> são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.</p>

<p>Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&amp;) e finalizada por um ponto e vírgula (;).</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Caractere literal</th>
   <th scope="col">Referência de caractere equivalente</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p>No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:</p>

<pre class="brush: html notranslate">&lt;p&gt;Em HTML, você define um parágrafo usando o elemento &lt;p&gt;.&lt;/p&gt;

&lt;p&gt;Em HTML, você define um parágrafo usando o elemento &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>

<p>Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de &lt;p&gt; está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.</p>

<p>{{EmbedLiveSample('Referências_de_entidades_incluindo_caracteres_especiais_no_HTML', 7700, 200, "", "", "hide-codepen-jsfiddle")}}</p>

<div class="note">
<p><strong>Nota</strong>: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.</p>
</div>

<h2 id="Comentários_no_HTML">Comentários no HTML</h2>

<p>Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. <span class="tlid-translation translation" lang="pt"><span title="">Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez </span></span> — <span class="tlid-translation translation" lang="pt"><span title=""> ou se você entregar seu código para outra pessoa trabalhar.</span></span></p>

<p>Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais <code>&lt;!--</code> e <code>--&gt;</code>, por exemplo:</p>

<pre class="brush: html notranslate">&lt;p&gt;Eu não estou dentro de um comentário&lt;/p&gt;

&lt;!-- &lt;p&gt;Eu estou!&lt;/p&gt; --&gt;</pre>

<p>Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.</p>

<p>{{ EmbedLiveSample('Comentários_no_HTML', 700, 100) }}</p>

<h2 id="Sumário">Sumário</h2>

<p>Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!</p>

<div class="note">
<p><strong>Nota</strong>: Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou <a href="/pt-BR/docs/Aprender/CSS">CSS</a>. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.</p>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/pt-BR/docs/Web/HTML/Applying_color">Aplicando cores a elementos HTML usando CSS</a> </li>
</ul>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<h2 id="Neste_módulo">Neste módulo</h2>

<ul>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando links</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura do documento e site</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Depurando HTML</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Marking_up_a_letter">Marcando uma carta</a></li>
 <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Structuring_a_page_of_content">Estruturando o conteudo de uma página</a></li>
</ul>