path: root/files/pt-pt/learn/comecar_com_a_web/html_basicos/index.html

---
title: HTML - Essencial
slug: Learn/Comecar_com_a_Web/HTML_basicos
tags:
  - Aprender
  - CodingScripting
  - HTML
  - Principiante
  - Web
  - 'l10n:priority'
translation_of: Learn/Getting_started_with_the_web/HTML_basics
---
<div>
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros", "Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</div>

<div class="summary">
<p>HTML (Linguagem de Marcação de Hipertexto) é o código que é utilizado para estruturar uma página da <em>web</em> e o seu conteúdo. Por exemplo, o conteúdo poderá ser estruturado dentro de um conjunto de parágrafos, uma lista de pontos com marcadores, ou utilizando imagens e tabelas de dados. Como o título sugere, este artigo irá dar-lhe uma compreensão básica do HTML e as suas funções.</p>
</div>

<h2 id="Então_o_que_é_realmente_o_HTML">Então, o que é realmente o HTML?</h2>

<p>HTML não é uma linguagem de programação; é uma <em>linguagem de marcação </em>que define a estrutura do seu conteúdo. HTML consiste numa série de <strong>{{Glossary("element", "elementos")}}</strong>, que se utilizam para envolver, ou cercar, diferentes partes do conteúdo, e assim fazê-lo ter uma determinada aparência ou agir de determinada maneira. As {{Glossary("tag", "etiquetas")}} envolventes podem interligar as palavras ou imagens para outro lugar, colocar palavras em itálico, tornar a letra maior ou menor, e assim por diante. Por exemplo, veja a seguinte linha de conteúdo:</p>

<pre class="notranslate">O meu gato é muito rabugento</pre>

<p>Caso queiramos que a linha esteja separada de outras, podemos especificar que é um parágrafo envolvendo-a em etiquetas de parágrafo:</p>

<pre class="brush: html notranslate">&lt;p&gt;O meu gato é muito rabugento&lt;/p&gt;</pre>

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

<p>Vamos explorar este elemento de 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 nosso elemento são:</p>

<ol>
 <li><strong>A etiqueta de abertura:</strong> Consiste no nome do elemento (neste caso, p), envolto em <strong>parênteses angulares</strong>. Isto afirma onde começa o elemento, ou onde começa a ter efeito — neste caso, onde começa o parágrafo.</li>
 <li><strong>A etiqueta de fecho:</strong> É igual à de abertura, mas tem uma barra antes do nome do elemento. Isto afirma onde acaba o elemento — neste caso, onde fica o fim do parágrafo. Omitir a etiqueta de fecho é um erro de principiante comum e pode levar a resultados estranhos.</li>
 <li><strong>O conteúdo:</strong> É o conteúdo do elemento, que neste caso é só texto.</li>
 <li><strong>O elemento:</strong> A etiqueta de abertura, mais a etiqueta de fecho, mais o conteúdo, é igual ao elemento.</li>
</ol>

<p>Elementos também podem ter atributos, que se parecem assim:</p>

<p><img alt="" 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 que não quer que apareça no conteúdo. Aqui, <code>class</code> é o <em>nome </em>do atributo, e <code>editor-note</code> é o <em>valor</em> do atributo. O atributo <code>class</code> permite identificar o elemento como sendo parte de um grupo, que pode ser alvo de regras CSS e outras coisas.</p>

<p>Um atributo deverá ter sempre:</p>

<ol>
 <li>Um espaço entre si o nome do elemento (ou do atributo anterior, se esse elemento já possuir um ou mais atributos).</li>
 <li>O nome do atributo, seguido de um sinal de igual.</li>
 <li>O valor do atributo, envolto em abre e fecha aspas.</li>
</ol>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Valores de atributos que não possuam espaço em branco ASCII (ou nenhum dos caracteres <code>"</code> <code>'</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>), mas recomendado que todos os valores de atributos sejam envoltos em aspas, para tornar o código mais consistente e compreensível.</p>
</div>

<h3 id="Aninhar_elementos">Aninhar elementos</h3>

<p>Também pode colocar elementos dentro de outros elementos  — chama-se a isto <strong>aninhar</strong>. Se quisermos declarar que o nosso gato é <strong>muito</strong> rabugento, podemos cercar a palavra "muito" com um elemento {{htmlelement("strong")}}, que significa que a palavra tem ênfase forte:</p>

<pre class="brush: html notranslate">&lt;p&gt;O meu gato é &lt;strong&gt;muito&lt;/strong&gt; rabugento.&lt;/p&gt;</pre>

<p>No entanto, tem que se certificar que os seus elementos estão devidamente aninhados: no exemplo em cima, abrimos o elemento {{htmlelement("p")}} primeiro, e depois o elemento {{htmlelement("strong")}} , portanto temos que fechar o elemento {{htmlelement("strong")}} primeiro, e só depois o {{htmlelement("p")}}. A linha seguinte está errada:</p>

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

<p>Os elementos têm que abrir e fechar corretamente para que seja claro se estão dentro ou fora uns dos outros. Se ficarem sobrepostos como se mostrou em cima, o seu navegador vai tentar adivinhar o que quis dizer, e pode obter resultados inesperados. Então, não faça isso!</p>

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

<p>Alguns elementos não têm conteúdo, aos quais chamamos <strong>elementos vazios</strong>. Veja o elemento {{htmlelement("img")}} que já temos no nosso HTML:</p>

<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>

<p>O mesmo contém dois atributos, mas não há etiqueta de fecho, <code>&lt;/img&gt;</code>, nem conteúdo no seu interior, uma vez que um elemento de imagem não envolve conteúdo para o afetar. O seu propósito é incorporar uma imagem na página HTML, no local onde aparece.</p>

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

<p>Assim terminamos as bases de elementos HTML individuais, mas eles não são muito úteis sozinhos. Vamos agora ver como os elementos se combinam para formar uma página HTML inteira. Voltemos ao código que escrevemos no ficheiro de exemplo <code>index.html</code> (que conhecemos no artigo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Lidar com ficheiros</a>):</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;img src="images/firefox-icon.png" alt="My test image"&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Aqui temos:</p>
</div>

<ul>
 <li><code>&lt;!DOCTYPE html&gt;</code> — o tipo de documento. Na noite dos tempos, quando HTML era jovem (cerca de 1991/2), os tipos de documento agiam como ligações para um conjunto de regras que a página HTML tinha que seguir para ser considerado HTML, que podia significar verificação automática de erros e outras coisas úteis. Contudo, hoje em dia ninguém quer saber delas, e são apenas um artefacto histórico que tem que ser incluído para tudo funcionar. Para já é só isto que precisa de saber.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code> — o elemento {{htmlelement("html")}}. Este elemento envolve o conteúdo de toda a página, e por vezes é conhecido como elemento de raiz.</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code> — o elemento {{htmlelement("head")}}. Este elemento funciona como contentor para tudo o que quer incluir na página HTML que <em>não é</em> o conteúdo mostrado aos visitantes da página. Tal inclui, por exemplo, {{Glossary("keyword", "keywords")}} e uma descrição da página que é mostrada em resultados de pesquisa, CSS para definir o estilo do conteúdo, declaração do conjunto de caracteres, e mais.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code> — o elemento {{htmlelement("body")}}. Este elemento possui <em>todo</em> o conteúdo que quer mostrar aos utilizadores quando visitam a página, seja texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, e tudo mais.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code> — este elemento define que o documento deve utilizar conjunto de caracteres UTF-8, o qual inclui a maior parte dos caracteres da vasta maioria de linguagens humanas. Essencialmente, agora o ficheiro pode conter qualquer conteúdo textual que possa vir a pôr-lhe. Não há motivos para não colocar este elemento, e pode evitar problemas no futuro.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code> — o elemento {{htmlelement("title")}}. Define o título da página, que é o título que aparece no separador do navegador que carregou a página. Também é usado para descrever a página quando é adicionada aos marcadores/favoritos.</li>
</ul>

<h2 id="Imagens">Imagens</h2>

<p>Vamos virar a nossa atenção para o elemento {{htmlelement("img")}} outra vez:</p>

<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>

<p>Como já referimos, incorpora uma imagem na nossa página, no local onde aparece. Para tal recorre ao atributo <code>src</code> (<em>source</em> — fonte, origem), que contém o caminho para o ficheiro de imagem.</p>

<p>Também incluímos o atributo <code>alt</code> (alternativa). Neste atributo, você especifica texto descritivo para utilizadores que não conseguem ver a imagem, possivelmente porque:</p>

<ol>
 <li>Têm deficiências visuais. Utilizadores com deficiências visuais significativas costumam utilizar ferramentas chamadas leitores de ecrã que lhes lê o texto alternativo.</li>
 <li>Alguma coisa correu mal e fez com que a imagem não fosse mostrada. Por exemplo, tente mudar deliberadamente o caminho no atributo <code>src</code> para torná-lo incorreto. Se guardar e recarregar a página, deve ver algo como isto em vez da imagem:</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>

<p>As palavras-chave sobre texto alternativo são: "texto descritivo". Ou seja, deve dar ao leitor informação suficiente para ter uma boa ideia do que a imagem transmite. Neste exemplo, o texto atual, "My test image" não é nada bom. Uma alternativa muito melhor para o nosso logótipo do Firefox seria "Logótipo do Firefox: uma raposa flamejante a rodear o mundo."</p>

<p>Agora, tenta encontrar texto alternativo melhor para a tua imagem.</p>

<div class="note">
<p><strong>Nota</strong>: saiba mais sobre acessibilidade em <a href="/pt-PT/docs/Web/Acessibilidade">MDN - Página de Acessibilidade</a>.</p>
</div>

<h2 id="Marcação_de_texto">Marcação de texto</h2>

<p>Esta secção irá abranger alguns dos elementos básicos de HTML que irá utilizar para marcar texto.</p>

<h3 id="Títulos">Títulos</h3>

<p>Elementos de título permitem especificar que determinadas partes do seu conteúdo são títulos (ou subtítulos) do conteúdo. Da mesma forma que um livro tem um título principal, títulos de capítulos e subtítulos, um documento HTML também os pode ter. HTML contém seis níveis de títulos, {{htmlelement("h1")}}–{{htmlelement("h6")}} mas geralmente usam-se no máximo 3 ou 4:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Título principal&lt;/h1&gt;
&lt;h2&gt;Título mais abrangente&lt;/h2&gt;
&lt;h3&gt;Subtítulo&lt;/h3&gt;
&lt;h4&gt;Sub-subtítulo&lt;/h4&gt;</pre>

<p>Tente agora acrescentar um título à sua página HTML mesmo por cima do seu elemento {{htmlelement("img")}}.</p>

<h3 id="Parágrafos">Parágrafos</h3>

<p>Como já foi explicado, elementos {{htmlelement("p")}} servem para conter parágrafos; vai usá-los frequentemente quando marcar conteúdo textual:</p>

<pre class="brush: html notranslate">&lt;p&gt;Isto é um único parágrafo&lt;/p&gt;</pre>

<p>Acrescente um ou mais parágrafos com a sua amostra de texto (conforme o artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Qual será a aparência do seu site da Web?</em></a>), diretamente por baixo do elemento {{htmlelement("img")}}.</p>

<h3 id="Listas">Listas</h3>

<p>Grande parte do conteúdo da web está em listas, e HTML tem elementos especiais para as mesmas. Marcar listas consiste sempre em pelo menos 2 elementos. As listas mais comuns são as listas ordenadas e não ordenadas:</p>

<ol>
 <li><strong>Listas não ordenadas</strong> são listas em que a ordem dos elementos não é relevante, como uma lista de compras. São envoltas no elemento {{htmlelement("ul")}}.</li>
 <li><strong>Listas ordenadas</strong> são listas em que a ordem dos elementos é importante, como uma receita. São envoltas no elemento {{htmlelement("ol")}}.</li>
</ol>

<p>Cada artigo na lista é colocado dentro de um elemento {{htmlelement("li")}} (list item).</p>

<p>Por exemplo, se quisermos transformar parte deste trecho numa lista:</p>

<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de tecnólogos, pensadores, e construtores que trabalham juntos ... &lt;/p&gt;</pre>

<p>Podemos modificar a marcação desta forma:</p>

<pre class="brush: html notranslate">&lt;p&gt;Na Mozilla, somos uma comunidade global de&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;tecnólogos&lt;/li&gt;
  &lt;li&gt;pensadores&lt;/li&gt;
  &lt;li&gt;construtores&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;que trabalham juntos ... &lt;/p&gt;</pre>

<p>Tente acrescentar uma lista ordenada ou não ordenada à sua página de exemplo.</p>

<h2 id="Hiperligações">Hiperligações</h2>

<p>As hiperligações são muito importantes — são elas que tornam a internet na internet! Para acrescentar uma ligação, precisamos de um elemento simples — {{htmlelement("a")}} — cujo "a" abrevia "âncora". Para transformar texto no seu parágrafo numa ligação, siga estes passos:</p>

<ol>
 <li>Escolha algum texto. Escolhemos o texto "Manifesto da Mozilla".</li>
 <li>Envolva o texto num elemento {{htmlelement("a")}}, assim:
  <pre class="brush: html notranslate">&lt;a&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
 </li>
 <li>Dê ao elemento {{htmlelement("a")}} um atributo <code>href</code>, assim:
  <pre class="brush: html notranslate">&lt;a href=""&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
 </li>
 <li>Preencha o valor deste atributo com o endereço web para o qual quer ligar a hiperligação:
  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/pt-PT/about/manifesto/"&gt;Manifesto da Mozilla&lt;/a&gt;</pre>
 </li>
</ol>

<p>Pode obter resultados inesperados se omitir a parte do <em>protocolo</em> no início do endereço web (<code>https://</code> ou <code>http://</code>). Depois de criar uma hiperligação, clique para assegurar que está a enviá-lo para onde é pretendido.</p>

<div class="note">
<p><code>href</code> pode, à primeira vista, parecer uma escolha obscura para o nome de um atributo. Se tiver dificuldades em lembrar-se dele, recorde que significa <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
</div>

<p>Agora, acrescente a hiperligação à sua página, se ainda não o fez.</p>

<h2 id="Conclusão">Conclusão</h2>

<p>Se seguiu todas as instruções nesta página, deve ter conseguido uma página que se assemelha à página em baixo (também pode <a href="http://mdn.github.io/beginner-html-site/">vê-la aqui</a>):<br>
 <br>
 <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>

<p>Se ficou preso, pode comparar o seu trabalho com o <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">exemplo do código terminado </a>no GitHub.</p>

<p>Aqui, mal tocámos na superfície da linguagem HTML. Para descobrir mais, dirija-se ao nosso tópico sobre <a href="/pt-PT/docs/Learn/HTML">Aprender HTML</a>.</p>

<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/Lidar_com_ficheiros","Learn/Comecar_com_a_Web/CSS_basico", "Learn/Comecar_com_a_Web")}}</p>

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

<ul>
 <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
 <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Qual será a aparência do seu site da Web</a><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">?</a></li>
 <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
 <li id="HTML_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial </a></li>
 <li><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
 <li id="CSS_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
 <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
 <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
</ul>