Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Neste artigo nós cobrimos o básico absoluto do HTML, para que você possa começar — nós definimos elementos, atributos, e todos os outros termos importantes que você pode ter ouvido, e onde eles se encaixam na linguagem. Nós 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. Durante a caminhada, nós brincaremos com um pouco de HTML, para que você fique interessado!

Prerequesitos: Básico de informática, software básico instalado, e conhecimento básico de como trabalhar com arquivos.
Objetivos: Obter uma familiaridade básica com o HTML, e adquirir um pouco de prática escrevendo alguns elementos HTML.

O que é HTML?

HTML (HyperText Markup Language) não é uma linguagem de programação e sim uma linguagem de marcação. usada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples como o desenvolvedor web desejar que seja. HTML consiste em uma série de elements que você usa para anexar, ou marcar diferentes partes do conteúdo para que apareça de uma certa maneira, ou agir de uma certa maneira. O fechamento tags pode fazer um pouco de conteúdo em um hiperlink para linkar para uma outra pagina web, palabras itálicas e assim por diante. Por exemplo, siga o conteúdo a seguir:

Meu gato é mau humorado.

 Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-o com a tag de parágrafo. (<p>) element:

<p>Meu gato é mau humorado.</p>

Anatomia de uma estrutura HTML

Vamos explorar nosso elemento parágrago (<p>) um pouco mais:

As partes principais do nosso elemento são:

  1. Tag de abertura: Consiste no nome do elemento ( neste caso p ), envolvido em sinais de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito - Neste caso, onde o parágrafo inicia.
  2.  Tag de fechamento:  Este é o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Isso 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.
  3. O conteúdo:  Este é o conteúdo do elemento, neste caso é somente um texto.
  4. O elemento: A tag de abertura, mais a tag de fechamento, mais o conteúdo, resulta no elemento.

Aprendizado ativo: criando seu primeiro elemento HTML

Edite a linha abaixo na área Entrada colocando-a entre as tags <em> e </em> (ponha <em> antes para abrir o elemento, e </em> depois, para fechar o elemento) — Isto dará à linha uma ênfase em itálico! você poderá ver as mudanças efetuadas ao vivo na área Saída.

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

Aninhando elementos

Você também pode inserir elementos dentro de outros elementos — isto é chamado de  aninhamento. Se nós quisermos dizer que nosso gato é  MUITO mau humorado, nós poderemos circundar a palavra "muito" com o elemento  <strong>, que significa que é para a palavra ser fortemente enfatizada:

<p>Meu gato é <strong>muito</strong> mau humorado.</p>

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

<p>Meu gato é <strong>muito mau humorado.</p></strong>

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 navegar tentará adivinhar o que você quis dizer, e aí pode ser que você obtenha resultados inesperados. Então não faça isso!

Elementos em bloco versus elementos inline

Há duas categorias importantes no HTML, que você precisa conhecer — elementos em bloco e elementos inline.

  • Elementos em bloco formam um bloco visível na página — eles apareceram em uma nova linha logo após qualquer elemento que haja antes deles, 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 deve ser aninhado dentro de um elemento inline, deve ser aninhado dentro de outro elemento em bloco.
  • Elementos inline são aqueles que são contidos dentro de delementos em bloco, e cercam apenas uma pequena parte da área documento, não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inine 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 <a>  (hyperlink) ou elementos de ênfase como <em> ou <strong>.

Veja o seguinte exemplo:

<em>primeiro</em><em>segundo</em><em>terceiro</em>

<p>quarto</p><p>quinto</p><p>sexto</p>

<em> é um elemento 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. <p> do 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 à estilização CSS  padrão que o browser aplica aos parágrafos).

Nota: o HTML5 redefiniu as categorias no HTML5: veja Categorias de conteído de elementos. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender que "em bloco" e "inline", então nos insistiremos nisso durante o tópico.

Nota: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja elementos em bloco e elementos inline.

Elementos vazios

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

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Isto exibiria o seguinte em sua página:

Nota: Elementos vazios são também chamados de void elements.

Atributos

Elementos também podem conter atributos, que ficariam assim:

<p class="editor-note">My cat is very grumpy</p>

Atributos contém informação extra sobre o elemento que você não deseja que apareça no conteúdo atual. Nete caso, o atributo class permite que você dê ao elemento um nome de identificação que pode ser usada mais tarde para adicionar estilo ao elemento (CSS) e outras coisas.

Um atributo deve conter:

  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
  2. O nome do atributo, seguido por um sinal de igual.
  3. Um valor para o atributo, entre aspas duplas.

Aprendizado ativo: Adicionando atributos a um elemento

Um outro exemplo de um elemento é <a> — que significa anchor (âncora), que transformará o texto que estiver entre a e </a> se transforme em um link. Este elemento pode conter vários atributos, dentre eles estão:

  • href: Este elemento é utilizado para inserir o link da web para o qual você quer que ele vá, a página que o navegador exibirá quando o link for clicado. Por exemplo, href="https://www.mozilla.org/".
  • title: O atributo título especifica uma informação extra sobre o link, como qual é o assunto da página que está contida no atributo href. Por exemplo, title="Homepage da Mozilla". Este atributo será exibido com um tooltip qiando passarmos o mouse sobre o link.

Edite a linha abaixo na área Entrada para transformá-la em um link para o seu site favorito. Primeiro, adicione o elemento <a> , e então o atributo  href, e por último o atributo title. Você conseguirá ver automticamente as mudanças que você fez na área Saída. Você deverá ver um link que quando posicionamos o mouse sobre ele, será exibido o conteúdo do atributo title, e quando clicado você será direcionado para o endereço web especificado no elemento href. Lembre-se que você deve inserir um espaço entre o nome do elemento e cada um de seus atributos.

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

Atributos  boleanos

As vezes você verá atributos escritos sem valores — isso é perfeitamente permitido. Estes são chamados de atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Como um exemplo o atributo disabled, que você pode atribuir para os elementos de entrada de formulario se desejar que eles estejam desativados (acinzentados) para que o usuário não possa inserir nenhum dado neles.

<input type="text" disabled="disabled">

As shorthand, it is perfectly allowable to write this as follows (we've also included a non-disabled form input element for reference, to give you more of an idea what is going on):

<input type="text" disabled>

<input type="text">

Both will give you an output as follows:

Omitting quotes around attribute values

When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the href attribute, like this:

<a href=https://www.mozilla.org/>favourite website</a>

However, as soon as we add the title attribute in this style, things will go wrong:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

At this point the browser will misinterpret your markup, thinking that the title attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, Mozilla and homepage. This is obviously not what was intended, and will cause errors or unexpected behaviour in the code, as seen in the live example below. Try hovering over the link to see what the title text is!

Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.

Single or double quotes?

In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to chose which one you prefer. Both the following lines are equivalent:

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

You should however make sure you don't mix them together. The following will go wrong!

<a href="http://www.example.com'>A link to my example.</a>

If you've used one type of quote in your HTML, you can nest the other type of quote:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

If you want to nest the same type of quote, you'll have to use Entity references: including special characters in HTML.

Anatomia de um documento HTML

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Here we have:

  1. <!DOCTYPE html>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    However, these days no-one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.
  2. <html></html>: The <html> element. This element wraps all the content on the entire page, and is sometimes known as the root element.
  3. <head></head>: The <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.
  4. <meta charset="utf-8">: This element sets the character set your document should use to utf-8, which includes most characters from all known human languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  5. <title></title>: This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favourite it.
  6. <body></body>: The <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Active learning: Adding some features to an HTML document

If you want to experiment with writing some HTML on your local computer, you can:

  1. Copy the HTML page example listed above.
  2. Create a new file in your text editor.
  3. Paste the code into the new text file.
  4. Save the file as index.html.

Note: You can also find this basic HTML template on the MDN Learning Area Github repo.

You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:

A simple HTML page that says This is my pageSo in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the <body> element, in this case.) We'd like you to have a go at implementing the following steps:

  • Just below the opening <body> tag, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
  • Edit the paragraph content to include some text about something you are interested in.
  • Make any important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag
  • Add a link to your paragraph, as explained earlier in the article.
  • Add an image to your document, below the paragraph, as explained earlier in the article. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the Web.)

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Whitespace in HTML

In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider using some kind of formatting.

Entity references: including special characters in HTML

In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semi-colon (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

In the below example, you can see two paragraphs, which are talking about web technologies:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

HTML comments

In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for 6 months, and can't remember what you did — or if you hand your code over to someone else to work on.

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

As you can see below, the first paragraph appears in the live output, but the second one doesn't.

Summary

You've reached the end of the article — hope you enjoyed your tour of the very basics of HTML. At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!

Note: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or CSS. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout.) HTML and CSS go very well together, as you'll soon discover.

Etiquetas do documento e colaboradores

 Colaboradores desta página: hocraveiro, GustavoAlvesDaSilvaCoder, allysonthales, jorgeclesio
 Última atualização por: hocraveiro,