path: root/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html

---
title: Fundamentos do texto em HTML
slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
tags:
  - Aprender
  - Guía
  - HTML
  - Iniciante
  - Introdução
  - Texto
  - cabeçalho
  - parágrafo
  - semántica
translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
original_slug: Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como {{glossary("semantics", "semântica")}}), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como {{glossary("HTML")}} pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>Familiaridade básica em HTML, tal como coberto  <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com o HTML.</a></td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado — incluindo parágrafos, títulos, listas, ênfase e citações.</td>
  </tr>
 </tbody>
</table>

<h2 id="O_básico_Cabeçalhos_e_Parágrafos">O básico: Cabeçalhos e Parágrafos</h2>

<p>O texto mais estruturado é composto por títulos e parágrafos,esteja você lendo uma história, um jornal, um livro da faculdade, uma revista, etc.</p>

<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>

<p>O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.</p>

<p>Em HTML, cada parágrafo deve ser envolvido em um elemento {{htmlelement("p")}} , assim:</p>

<pre class="brush: html notranslate">&lt;p&gt;Eu sou um parágrafo, oh sim, eu sou.&lt;/p&gt;</pre>

<p>Cada título deve ser envolvido em um elemento de título:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Eu sou o título da história.&lt;/h1&gt;</pre>

<p>Existem seis elementos de título — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} e {{htmlelement("h6")}} . Cada elemento representa um nível diferente de conteúdo no documento; <code>&lt;h1&gt;</code> representa o título principal, <code>&lt;h2&gt;</code> representa subtítulos, <code>&lt;h3&gt;</code> representa sub-subtítulos, e assim por diante.</p>

<h3 id="Implementando_hierarquia_estrutural">Implementando hierarquia estrutural</h3>

<p>Como exemplo, em uma história, <code>&lt;h1&gt;</code> representaria o título da história, <code>&lt;h2&gt;</code> representaria o título de cada capítulo e <code>&lt;h3&gt;</code> representaria sub-seções de cada capítulo, e assim por diante.</p>

<pre class="brush: html notranslate">&lt;h1&gt;O furo esmagador&lt;/h1&gt;

&lt;p&gt;Por Chris Mills&lt;/p&gt;

&lt;h2&gt;Capítulo 1: A noite escura&lt;/h2&gt;

&lt;p&gt;Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão ...&lt;/p&gt;

&lt;h2&gt;Capítulo 2: O eterno silêncio&lt;/h2&gt;

&lt;p&gt;Nosso protagonista não podia ver mais que um relance da figura sombria ...&lt;/p&gt;

&lt;h3&gt;O espectro fala&lt;/h3&gt;

&lt;p&gt;Várias horas se passaram, quando, de repente, o espectro ficou em pé e exclamou: "Por favor, tenha piedade da minha alma!"&lt;/p&gt;</pre>

<p>Depende realmente de você, o quê, exatamente, representam os elementos envolvidos, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:</p>

<ul>
 <li>Preferencialmente, você deve usar apenas um <code>&lt;h1&gt;</code> por página — esse é o título do nível superior e todos os outros ficam abaixo dele, na hierarquia.</li>
 <li>Certifique-se de usar os títulos na ordem correta na hierarquia. Não use <code>&lt;h3&gt;</code> para representar subtítulos, seguido de <code>&lt;h2&gt;</code>para representar sub-subtítulos - isso não faz sentido e levará a resultados estranhos.</li>
 <li>Dos seis níveis de cabeçalho disponíveis, você deve usar no máximo três por página, a menos que considere necessário usar mais. Documentos com vários níveis (ou seja, uma hierarquia profunda de cabeçalho) tornam-se difíceis de navegar. Nessas ocasiões, é aconselhável espalhar o conteúdo por várias páginas, se possível.</li>
</ul>

<h3 id="Por_que_precisamos_de_estrutura">Por que precisamos de estrutura?</h3>

<p>Para responder a esta pergunta, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).</p>

<p>No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!</p>

<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p>

<p>Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:</p>

<ul>
 <li>Os usuários que olham para uma página web tendem a procurar rapidamente conteúdo relevante, muitas vezes apenas lendo os títulos para começar (normalmente <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">passamos um tempo muito curto em uma página web</a>). Se eles não conseguem ver nada útil dentro de alguns segundos, eles provavelmente ficarão frustrados e irão para outro lugar.</li>
 <li>Os mecanismos de pesquisa que indexam sua página consideram o conteúdo dos títulos como palavras-chave importantes para influenciar os rankings de pesquisa da página. Sem cabeçalhos, sua página irá funcionar mal em termos de {{glossary("SEO")}} (Search Engine Optimization).</li>
 <li>As pessoas com deficiência visual, muitas vezes, não leem páginas da web; elas escutam-na em vez disso. Isso é feito com um software chamado <a href="https://pt.wikipedia.org/wiki/Leitor_de_tela" title="screen readers">leitor de tela</a>. Este software fornece formas de obter acesso rápido a determinado conteúdo de texto. Entre as várias técnicas utilizadas, elas fornecem um esboço do documento lendo os títulos, permitindo que seus usuários encontrem as informações que precisam rapidamente. Se os títulos não estiverem disponíveis, eles serão obrigados a ouvir todo o documento lido em voz alta.</li>
 <li>Para criar um estilo de conteúdo com {{glossary("CSS")}}, ou fazer coisas interessantes com {{glossary("JavaScript")}}, você precisa ter elementos que envolvam o conteúdo relevante, assim CSS/JavaScript pode efetivamente segmentá-lo.</li>
</ul>

<p>Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.</p>

<h3 id="Aprendizagem_ativa_Fornecendo_nossa_estrutura_de_conteúdo">Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo</h3>

<p>Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo <em>Entrada</em> para que ele apareça como um título e dois parágrafos no campo <em>Saída</em>.</p>

<p>Se você cometer um erro, você sempre pode reiniciar usando o botão <em>Resetar</em>. Se você ficar preso, pressione o botão <em>Mostrar solução</em> para ver 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="input" style="min-height: 100px; width: 95%"&gt;Minha pequena história: sou policial e meu nome é Trish.

Minhas pernas são feitas de papelão e sou casada com um peixe.&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;h1&gt;Minha pequena história&lt;/h1&gt;\n&lt;p&gt;Sou policial e meu nome é Trish.&lt;/p&gt;\n&lt;p&gt;Minhas pernas são feitas de papelão e sou casada com um peixe.&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_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Por_que_precisamos_de_semântica">Por que precisamos de semântica?</h3>

<p>A semântica estã em todos os lugares — contamos com experiência anterior para nos dizer qual é a função dos objetos do dia a dia. Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "pare" e um semáforo verde signifique "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).</p>

<p>Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento  {{htmlelement("h1")}} também é um elemento semântico, que dá o texto que envolve a representação (ou significado) de "um título de nível superior em sua página".</p>

<pre class="brush: html notranslate">&lt;h1&gt;Este é um título de nível superior&lt;/h1&gt;</pre>

<p>Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).</p>

<p>Por outro lado, você pode fazer com que qualquer elemento se pareça um título de nível superior. Considere o seguinte:</p>

<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Este é um título de nível superior?&lt;/span&gt;</pre>

<p>Este é um elemento {{htmlelement("span")}}. Não tem semântica. Você usa-o para agrupar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você saberá mais sobre isto mais tarde, no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.</p>

<h2 id="Listas">Listas</h2>

<p>Agora voltemos nossa atenção para as listas. As listas estão em toda parte na vida — de sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção.</p>

<h3 id="Não_ordenada">Não ordenada</h3>

<p>As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa — vamos pegar uma lista de compras como um exemplo.</p>

<pre class="notranslate">leite
ovos
pão
homus</pre>

<p>Toda lista desordenada começa com um {{htmlelement("ul")}} — isso envolve todos os itens da lista:</p>

<pre class="brush: html notranslate">&lt;ul&gt;
leite
ovos
pão
homus
&lt;/ul&gt;</pre>

<p>O último passo é envolver cada item da lista em um elemento {{htmlelement("li")}} (elemento da lista):</p>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;leite&lt;/li&gt;
  &lt;li&gt;ovos&lt;/li&gt;
  &lt;li&gt;pão&lt;/li&gt;
  &lt;li&gt;homus&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="Aprendizagem_ativa_Marcando_uma_lista_desordenada">Aprendizagem ativa: Marcando uma lista desordenada</h4>

<p>Tente editar a amostra, ao vivo, abaixo para criar sua própria lista não ordenada HTML.</p>

<div class="hidden">
<h6 id="Playable_code_2">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="input" style="min-height: 100px; width: 95%"&gt;leite
ovos
pão
hummus&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;ul&gt;\n&lt;li&gt;leite&lt;/li&gt;\n&lt;li&gt;ovos&lt;/li&gt;\n&lt;li&gt;pão&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&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_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Ordenada">Ordenada</h3>

<p>As listas ordenadas são listas em que a ordem dos itens é importante — vamos seguir um conjunto de instruções como exemplo:</p>

<pre class="notranslate">Dirija até o final da estrada
Vire à direita
Vá em frente nas duas primeiras rotatórias
Vire à esquerda na terceira rotatória
A escola fica à sua direita, a 300 metros da estrada</pre>

<p>A estrutura de marcação é a mesma das listas não ordenadas, exceto que você deve conter os itens da lista em um elemento {{htmlelement("ol")}}, em vez de <code>&lt;ul&gt;</code>:</p>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;Dirija até o final da estrada&lt;/li&gt;
  &lt;li&gt;Vire à direita&lt;/li&gt;
  &lt;li&gt;Vá em frente nas duas primeiras rotatórias&lt;/li&gt;
  &lt;li&gt;Vire à esquerda na terceira rotatória&lt;/li&gt;
  &lt;li&gt;A escola fica à sua direita, a 300 metros da estrada&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="Aprendizagem_ativa_Marcando_uma_lista_ordenada">Aprendizagem ativa: Marcando uma lista ordenada</h4>

<p>Tente editar a amostra ao vivo abaixo, para criar sua própria lista ordenada por HTML.</p>

<div class="hidden">
<h6 id="Playable_code_3">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="input" style="min-height: 200px; width: 95%"&gt;Dirija até o final da estrada
Vire à direita
Vá em frente nas duas primeiras rotatórias
Vire à esquerda na terceira rotatória
A escola fica à sua direita, a 300 metros da estrada&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;ol&gt;\n&lt;li&gt;Dirija até o final da estrada&lt;/li&gt;\n&lt;li&gt;Vire à direita&lt;/li&gt;\n&lt;li&gt;Vá em frente nas duas primeiras rotatórias&lt;/li&gt;\n&lt;li&gt;Vire à esquerda na terceira rotatória&lt;/li&gt;\n&lt;li&gt;A escola fica à sua direita, a 300 metros da estrada&lt;/li&gt;\n&lt;/ol&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_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Aprendizagem_ativa_marcando_nossa_página_de_receita">Aprendizagem ativa: marcando nossa página de receita</h3>

<p>Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo, localmente, provavelmente será melhor, pois você conseguirá salvar o trabalho que está fazendo. Enquanto que, se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.</p>

<div class="hidden">
<h6 id="Playable_code_4">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="input" style="min-height: 200px; width: 95%"&gt;Receita rápida de hummus

  Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.

  Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.

  Ingredientes

  1 lata (400g) de grão de bico
  175g de tahine
  6 tomates secos
  Metade de pimenta vermelha
  Uma pitada de pimenta caiena
  1 dente de alho
  Uma pitada de azeite

  Instruções

  Retire a pele do alho e pique
  Retire todas as sementes e caule da pimenta e pique
  Adicione todos os ingredientes em um processador de alimentos
  Processar todos os ingredientes em uma pasta
  Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo
  Se você deseja um hummus suave, processe-o por mais tempo

  Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.

  Armazenamento

  Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.

  Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.&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;h1&gt;Receita rápida de hummus&lt;/h1&gt;\n\n&lt;p&gt;Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.&lt;/p&gt;\n\n&lt;p&gt;Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.&lt;/p&gt;\n\n&lt;h2&gt;Ingredientes&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 lata (400g) de grão de bico&lt;/li&gt;\n&lt;li&gt;175g de tahine&lt;/li&gt;\n&lt;li&gt;6 tomates secos&lt;/li&gt;\n&lt;li&gt;Metade de pimenta vermelha&lt;/li&gt;\n&lt;li&gt;Uma pitada de pimenta caiena&lt;/li&gt;\n&lt;li&gt;1 dente de alho&lt;/li&gt;\n&lt;li&gt;Uma pitada de azeite&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instruções&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;\n&lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;\n&lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;\n&lt;li&gt;Processar todos os ingredientes em uma pasta&lt;/li&gt;\n&lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;\n&lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.&lt;/p&gt;\n\n&lt;h2&gt;Armazenamento&lt;/h2&gt;\n\n&lt;p&gt;Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.&lt;/p&gt;\n\n&lt;p&gt;Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.&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_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p>

<p>Se você ficar preso, você sempre pode pressionar o botão<em> Mostrar solução</em>, ou confira nosso exemplo de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> em nosso repositório Github.</p>

<h3 id="Aninhando_listas">Aninhando listas</h3>

<p><span class="tlid-translation translation" lang="pt"><span title="">Não há problema em aninhar uma lista dentro de outra.</span> <span title="">Você pode ter algumas sub-listas abaixo de uma lista de nível superior.</span> <span title="">Vamos pegar a segunda lista do nosso exemplo de receita</span></span>:</p>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;
  &lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;
  &lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;
  &lt;li&gt;Processar todos os ingredientes em uma pasta&lt;/li&gt;
  &lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;
  &lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;
&lt;/ol&gt; </pre>

<p>Uma vez que as duas últimas listas estão intimamente relacionadas com a anterior (elas leem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da quarta lista. Isso pareceria assim:</p>

<p><span class="tlid-translation translation" lang="pt"><span title="">Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual</span><span title="">.</span> <span title="">Isso seria assim:</span></span></p>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;Retire a pele do alho e pique&lt;/li&gt;
   &lt;li&gt;Retire todas as sementes e caule da pimenta e pique&lt;/li&gt;
   &lt;li&gt;Adicione todos os ingredientes em um processador de alimentos&lt;/li&gt;
   &lt;li&gt;Processar todos os ingredientes em uma pasta
     &lt;ul&gt;
       &lt;li&gt;Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo&lt;/li&gt;
       &lt;li&gt;Se você deseja um hummus suave, processe-o por mais tempo&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.</p>

<h2 id="Ênfase_e_importância">Ênfase e importância</h2>

<p>Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e, nesta seção, vamos ver alguns dos mais comuns.</p>

<h3 id="Ênfase">Ênfase</h3>

<p>Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.</p>

<p>Estou <em>feliz </em>que você não chegou <em>atrasado</em>.</p>

<p>Estou <strong>feliz </strong>que você não chegou <strong>atrasado</strong>.</p>

<p>A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.</p>

<p>Em HTML usamos o elemento de ênfase {{htmlelement("em")}} para marcar tais instâncias. Além de tornar o documento mais interessante de ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e alguns CSS, ou talvez um elemento {{htmlelement("i")}} (veja abaixo).</p>

<pre class="brush: html notranslate">&lt;p&gt;Eu estou &lt;em&gt;feliz&lt;/em&gt; você não está &lt;em&gt;atrasado&lt;/em&gt;.&lt;/p&gt;</pre>

<h3 id="Importância">Importância</h3>

<p>Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em <strong>negrito</strong> na linguagem escrita. Por exemplo:</p>

<p>Este líquido é <strong>altamente tóxico</strong>.</p>

<p>Eu estou contando com você. <strong>Não</strong> se atrase!</p>

<p>Em HTML usamos o elemento {{htmlelement("strong")}} (importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo negrito. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e algum CSS, ou talvez um {{htmlelement("b")}} (veja abaixo).</p>

<pre class="brush: html notranslate">&lt;p&gt;Este líquido é &lt;strong&gt;altamente tóxico&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Estou contando com você. &lt;strong&gt;Não&lt;/strong&gt; se atrase!&lt;/p&gt;</pre>

<p>Você pode aninhar importância e ênfase entre si, se desejar:</p>

<pre class="brush: html notranslate">&lt;p&gt;Este líquido é &lt;strong&gt;altamente tóxico&lt;/strong&gt; -
Se você beber, &lt;strong&gt;você pode &lt;em&gt;morrer&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>

<h3 id="Aprendizagem_ativa_Vamos_ser_importantes!">Aprendizagem ativa: Vamos ser importantes!</h3>

<p>Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.</p>

<div class="hidden">
<h6 id="Playable_code_5">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="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Notícia importante&lt;/h1&gt;
&lt;p&gt;No domingo, 9 de janeiro de 2010, uma gangue de góticos foi
   vista roubando vários gnomos de jardim de um
   centro comercial no centro de Milwaukee. Eles estavam
   todos vestindo macacões verdes e chapéus bobos, que
   pareciam ter a forma de uma baleia. Se alguém
   tiver alguma informação sobre este incidente, por favor
   entre em contato com a polícia.&lt;/p&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;h1&gt;Notícia importante&lt;/h1&gt;\n&lt;p&gt;No &lt;strong&gt;domingo, 9 de janeiro de 2010&lt;/strong&gt;, uma gangue de &lt;em&gt;góticos&lt;/em&gt; foi vista roubando &lt;strong&gt;&lt;em&gt;vários&lt;/em&gt; gnomos de jardim&lt;/strong&gt; de um centro comercial no centro de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Eles estavam todos &lt;em&gt;vestindo macacões verdes e chapéus bobos&lt;/em&gt;, que pareciam ter a forma de uma baleia. Se alguém tiver &lt;strong&gt;alguma informação&lt;/strong&gt; sobre este incidente, por favor entre em contato com a &lt;strong&gt;polícia&lt;/strong&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_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Itálico_negrito_sublinhado...">Itálico, negrito, sublinhado...</h3>

<p>Os elementos que discutimos até agora têm clara semântica associada. A situação com {{htmlelement("b")}}, {{htmlelement("i")}}, e com {{htmlelement("u")}} é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era pouco suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como <strong>elementos de apresentação</strong> e não devem mais ser usados, porque, como já vimos, a semântica é importante para a acessibilidade, SEO, etc.</p>

<p>O HTML5 redefiniu <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> e <code>&lt;u&gt;</code>  com novas funções semânticas um pouco confusas.</p>

<p>Aqui está a melhor regra geral: provavelmente é apropriado usar  <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> ou <code>&lt;u&gt;</code>  para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.</p>

<ul>
 <li>{{htmlelement("i")}} é usado para transmitir um significado tradicionalmente transmitido por itálico: palavras estrangeiras, designação taxonômica, termos técnicos, um pensamento...</li>
 <li>{{htmlelement("b")}} é usado para transmitir um significado tradicionalmente transmitido por negrito: palavras-chave, nomes de produtos, sentença principal...</li>
 <li>{{htmlelement("u")}} é usado para transmitir um significado tradicionalmente transmitido pelo sublinhado: nome próprio, erro de ortografia...</li>
</ul>

<div class="note">
<p>Um aviso amável sobre o sublinhado: <strong>as pessoas associam fortemente o sublinhado com hiperlinks</strong>. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <code>&lt;u&gt;</code> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.</p>
</div>

<pre class="brush: html notranslate">&lt;!-- nomes científicos --&gt;
&lt;p&gt;
  O Colibri Ruby-throated (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
  é o colibri mais comum do Leste da América do Norte.
&lt;/p&gt;

&lt;!-- palavras estrangeiras --&gt;
&lt;p&gt;
  O menu era um mar de palavras exóticas como &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; e &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
&lt;/p&gt;

&lt;!-- um erro de ortografia conhecido --&gt;
&lt;p&gt;
  Algum dia eu vou aprender como &lt;u style="text-decoration-line: underline; text-decoration-style: wavy;"&gt;jogar&lt;/u&gt; melhor.
&lt;/p&gt;

&lt;!-- Destaque as palavras-chave em um conjunto de instruções --&gt;
&lt;ol&gt;
  &lt;li&gt;
    &lt;b&gt;Fatie&lt;/b&gt;dois pedaços de pão do pão.
  &lt;/li&gt;
  &lt;li&gt;
    &lt;b&gt;Colocar&lt;/b&gt; uma fatia de tomate e uma folha de
     alface entre as fatias de pão.
  &lt;/li&gt;
&lt;/ol&gt;</pre>

<h2 id="Teste_suas_habilidades!"><span class="tlid-translation translation" lang="pt"><span title="">Teste suas habilidades</span></span>!</h2>

<p><span class="tlid-translation translation" lang="pt"><span title="">Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes?</span> <span title="">Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> consulte <a href="/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics">Teste suas habilidades: noções básicas de texto HTML</a>.</span></span></p>

<h2 id="Resumo">Resumo</h2>

<p><span class="tlid-translation translation" lang="pt"><span title="">Por enquanto é isso!</span> <span title="">Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área.</span> <span title="">Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a>, mais adiante neste curso.</span> <span title="">No próximo artigo, veremos detalhadamente como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">criar links</a>, possivelmente o elemento mais importante na Web.</span></span></p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>