Tags HTML

Para dar continuidade ao nosso pequeno curso, vamos falar mais um pouco mais sobre as Tags HTML. Elas são responsáveis por criar todos os elementos dos quais precisamos, tais como listas, parágrafos, títulos, blocos e qualquer elemento que seja necessário para seu site.

Elas são formadas por um sinal de menor que (<), seu nome e um sinal de maior que (>). Por exemplo <h1>, <p>, <body>, <html>, <style> e assim por diante… Como vimos em nossa primeira aula.

Todas as tags html devem ser abertas e fechadas, o que deve ser feito através de uma barra (/) após o sinal de menor que (<). Por exemplo:

  • <h1>Título</h1>
  • <p>Parágrafo</p>
  • <body>Corpo do site</body>

Algumas tags HTML necessitam de atributos para funcionarem corretamente. Tais atributos devem vir entre do nome da tag e o sinal de maior que (>) separadas por um espaço na abertura da mesma. Por exemplo:

<a href="http://www.todoespacoonline.com/w/">Isto é um link para o TutsUP</a>

A tag acima vai gerar um link para nosso blog, como mostro no trecho abaixo:

Isto é um link para o TutsUP

O atributo href indica o link que o navegador deve abrir quando o usuário clicar neste link, neste caso http://www.todoespacoonline.com/w/.

Uma tag também pode receber vários atributos, por exemplo:

<p id="id-do-paragrafo" class="classe-1 classe-2 classe-2" style="color:#000;">
    Meu parágrafo tunado
</p>

Ou seja, coloquei um ID, várias classes e uma tag de estilos no mesmo parágrafo.

Observação: Classes e IDs serão descritos quando formos explicar CSS, esta parte é apenas um exemplo dos atributos que as tags HTML podem receber.

Tags HTML e seus atributos

A W3C, World Wide Web Consortium, que é a principal organização de padronização da World Wide Web (www), tem uma lista de todas as tags HTML e seus atributos em seu site, você deve ler suas recomendações para criar seus sites, no entanto, vou passar alguns atributos que você sempre vai utilizar. Porém, antes disso, vamos ver algumas regrinhas básicas sobre eles:

  • Os atributos devem estar dentro da abertura da tag;
  • Atributos diferentes devem ser separados por espaços;
  • Os valores dos atributos devem estar dentro de aspas;
  • É possível utilizar aspas duplas e simples, no entanto, se você abrir um atributo com aspas simples, deve fechar com aspas simples. O mesmo acontece para as aspas duplas.

Exemplos corretos da utilização de atributos e aspas:

<a href="http://exemplo.com">link</a>
<a href='http://exemplo.com'>link</a>

Exemplos incorretos da utilização de atributos com aspas:

<ahref="http://exemplo.com">link</a>
<a href="http://exemplo.com'>link</a>
<a href='http://exemplo.com">link</a>
<a href=http://exemplo.com>link</a>

Como você pode observar, o modelo correto é o descrito abaixo:

<nome_da_tag atributo1="valores" atributo2="valores">
	conteúdo da tag
</nome_da_tag>

Principais tags com atributos

<a> </a>

As tags que geram os links. Seu atributo principal é o href=”link, onde você coloca o link que deseja entre as aspas. Exemplo:

<a href="http://www.google.com.br/">Site do Google</a>

<img>

As tags img servem para exibir imagens na tela do navegador. Seu principal atributo é o src=”link_da_imagem (source), mas também existem atributos como width=”largura e height=”altura para definir a largura e altura da imagem. Exemplo:

<img 
	src="https://www.todoespacoonline.com/w/tutsup-logo.png" 
	width="1024"
	height="768"
/>

Outra peculiaridade da tag <img> é que ela não tem uma tag de fechamento, portanto, utilizamos uma barra antes do sinal de maior que (>).

<img />

Observação: A barra (/) no final das tags que não necessitam de tags de fechamento só é necessária em documentos XHTML. Como estamos criando documentos declarados com <!DOCTYPE> do HTML5, não é necessário incluir tal barra.

Portanto, isto:

<img src="https://www.todoespacoonline.com/w/tutsup-logo.png" />

E isto:

<img src="https://www.todoespacoonline.com/w/tutsup-logo.png">

Funcionam da mesma maneira.

<Iframe>

As tags de iframe server para abrir um site dentro do seu site, ou seja, criar um frame (quadro) com outro site dentro do seu código. seu principal atributo é também o src=”link_do_site, e ele também suporta  width=”largura e height=”altura. Exemplo:

<iframe src="http://todoespacoonline.com/w" width="640" height="480"></iframe>

Mas ao contrário das tags de imagem, as tags de <iframe> precisam ser fechadas com </iframe>.

Outro ponto interessante do <iframe> é que ele não tem nada entre suas tags, ou seja, tudo é criado por atributos.

Brinque com as tags HTML

Agora que você já sabe a estrutura de um arquivo HTML e aprendeu várias tags novas, que tal incluir algumas tags no seu arquivo HTML?

Só para relembrar:

  • As tags que são visíveis no navegador, devem vir dentro da tag <body> e </body> da estrutura HTML;
  • Todas as tags descritas nessa aula são visíveis no navegador;

Exemplo completo de utilização da maioria das tags já descritas em todas as aulas:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title>Título</title>
	</head>

	<body>
		<h1>Este é meu título</h1>
		<p>Exemplo de um parágrafo.</p>
		<h2>Um subtítulo</h3>
		<p>Abaixo o TutsUP aberto dentro do seu site.</p>
		<iframe src="http://www.todoespacoonline.com/w" width="640" height="480"></iframe>
		<p>Agora a imagem (nossa logo):</p>
		<p>
			<img src="https://www.todoespacoonline.com/w/wp-content/uploads/2014/04/tutsup-logo.png" />
		</p>
		<p>Mas não vamos deixar de colocar um
		<a href="http://www.todoespacoonline.com/w">link</a> para nosso site.</p>
	</body>
</html>

Lista completa de todas as tags HTML

Como você já deve estar treinando seu HTML, agora chegou a hora de conhecer a maioria das tags HTML e suas funções. Abaixo vou passar uma lista com tudo o que você precisa saber, ela será dividida assim:

  • Na primeira linha, o nome e a descrição da tag;
  • Na segunda linha, um exemplo de utilização.

Veja abaixo a lista de todas as tags HTML:

TagDescrição
<!–…–>Define um comentário
<!– Comentário –>
<!DOCTYPE>Define o tipo de documento
<!DOCTYPE html>
<a>Cria um link
<a href=”http://www.todoespacoonline.com/w/”>link</a>
<abbr>Define uma abreviação
<abbr title=”CSS”>Cascading Style Sheets</abbr>
<address>Define informações de contato sobre o autor de um documento.
<address>
Escrito por José<br>
Visite em:<br>
todoespacoonline.com/w<br>
Rua 10, São Paulo<br>
Brasil
</address>
<article>Define um artigo
<article>
  <h1>Google Chrome</h1>
  <p>O Google Chrome é da google.</p>
</article>
<aside>Define o conteúdo da lateral do site
<p>Meu site.</p>

<aside>
	<h4>Banners</h4>
	<img src="banner.jpg">
</aside>
<audio>Define conteúdo de áudio
<audio controls>
	<source src="som.ogg" type="audio/ogg">
	<source src="som.mp3" type="audio/mpeg">
	Seu navegador não suporta <audio>
</audio>
<b>Define um texto em negrito
<b>Negrito</b>
<blockquote>Define uma citação
<blockquote>Ser ou não ser, eis a questão.</blockquote>
<body>Define o corpo de um documento
<!DOCTYPE html>
<html>
	<head>
		<title>Nome do site</title>
	
		<style>
		h1 {color:red;}
		p {color:blue;}
		</style>
	</head>

	<body>
		<h1>Título</h1>
		<p>Parágrafo.</p>
	</body>
</html>
<br>Define uma quebra de linha
Olá, <br>
Estou em outra linha.
<button>Cria um botão
<button type=”button”>Clique aqui!</button>
<canvas>Usado para desenhos gráficos
<canvas id=”meucanvas” width=”200″ height=”100″
style=”border:1px solid #000000;”>
</canvas>
<caption>Define o subtítulo de uma tabela
<table>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</table>
<code>Define um pedaço de código.
<code>meu código é assim</code>
<datalist>Especifica uma lista de opções para um input
<input list="navegadores">

<datalist id="navegadores">
	<option value="Internet Explorer">
	<option value="Firefox">
	<option value="Chrome">
	<option value="Opera">
	<option value="Safari">
</datalist>
<del>Riscado
<del>apaguei</del>
<details>Define mais detalhes que o usuário pode visualizar ou esconder
<details>
	<summary>Copyright 2010-2014.</summary>
	<p>Todos os direitos reservados.</p>
</details>
<div>Define uma sessão em um documento
<div id=”header”>Cabeçalho</div>
<em>Itálico
<em>Itálico</em>
<fieldset>Agrupa elementos relacionados de um formulário
<form>
	<fieldset>
		<legend>Formulário:</legend>
		Nome: <input type="text"><br>
		Email: <input type="text"><br>
	</fieldset>
</form>
<figcaption>Define uma legenda para o elemento figure
<figure>
	<img src="img.jpg">
	<figcaption>Figura 1.</figcaption>
</figure>
<figure>Especifica o conteúdo independente
<figure>
    <img src="img.jpg">
</figure>
<footer>Define a sessão de rodapé de um documento
<footer>
	<p>Postado por Luiz.</p>
</footer>
<form>Define o início de um formulário
<form>
	<fieldset>
		<legend>Formulário:</legend>
		Nome: <input type="text"><br>
		Email: <input type="text"><br>
	</fieldset>
</form>
<h1> to <h6>Títulos (Cabeçalhos de texto)
<h1>Meu título</h1>
<head>Define o cabeçalho de um documento HTML
<!DOCTYPE html>
<html>
	<head>
		<title>Nome do site</title>
	
		<style>
		h1 {color:red;}
		p {color:blue;}
		</style>
	</head>

	<body>
		<h1>Título</h1>
		<p>Parágrafo.</p>
	</body>
</html>
<header>Define um cabeçalho de uma sessão HTML
<article>
	<header>
	<h1>Título</h1>
	<p><time pubdate datetime="2011-03-15"></time></p>
	</header>
	<p>Texto.</p>
</article> 
<hr>Define uma mudança de conteúdo
<h1>HTML</h1>
<p>HTML é legal.</p>

<hr>

<h1>CSS</h1>
<p>CSS é legal.</p> 
<html>Define a raíz de um documento HTML
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {color:red;}
		p {color:blue;}
		</style>
	</head>

	<body>
		<h1>Título</h1>
		<p>Parágrafo.</p>
	</body>
</html>
<i>Itálico
<i>Itálico</i>
<iframe>Define um frame inline. Carrega uma URL dentro do HTML.
<iframe src=”http://www.google.com.br/”></iframe>
<img>Define uma imagem
<img src=”imagem.jpg”>
<input>Define um input
<input type=”text” name=”email”>
<ins>Define um texto inserido no documento
<ins>inserido</ins>
<kbd>Define uma entrada de teclado
<kbd>Entrada</kbd>
<label>Define o rótulo de um input
<form action="demo_form.asp">
	<label for="nome">Nome</label>
</form> 
<legend>Define uma legenda para um elemento <fieldset>
<form>
	<fieldset>
		<legend>Formulário:</legend>
		Nome: <input type="text"><br>
		Email: <input type="text"><br>
	</fieldset>
</form>
<li>Define um item de uma lista
<ul>
	<li>Café</li>
	<li>Chá</li>
	<li>Leite</li>
</ul>
<link>Define um link para um conteúdo externo (normalmente CSS)
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<main>Especifica o conteúdo principal
<main>
	<h1>Web Browsers</h1>
	<p>Google Chrome, Firefox e Internet Explorer.</p>

	<article>
		<h1>Google Chrome</h1>
		<p>Google Chrome, Firefox e Internet Explorer.</p>
	</article>
</main> 
<menu>Define um menu
<menu label="File">
	<button type="button" onclick="file_new()">New...</button>
	<button type="button" onclick="file_open()">Open...</button>
	<button type="button" onclick="file_save()">Save</button>
</menu>
<meta>Define metadata de um documento HTML
<head>
<meta name="description" content="Tutoriais">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta charset="UTF-8">
</head>
<nav>Define links de navegação
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

 

<noscript>Define conteúdo quando scripts não estão ativos no navegador
<noscript>Precisamos de scripts para executar este site</noscript>
<object>Define um objeto incorporado
<object data="horse.wav">
	<param name="autoplay" value="true">
</object>
<ol>Define uma lista ordenada
<ol>
	<li>Café</li>
	<li>Chá</li>
	<li>Leite</li>
</ol>
<optgroup>Define um grupo de opções em uma lista drop-down
<select>
	<optgroup label="Swedish Cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
	</optgroup>
	<optgroup label="German Cars">
		<option value="mercedes">Mercedes</option>
		<option value="audi">Audi</option>
	</optgroup>
</select> 
<option>Define uma opção em uma lista drop-down
<object data="horse.wav">
	<param name="autoplay" value="true">
</object> 		
<output>Define o resultado de um calculo
<output name=”x” for=”a b”></output>
<p>Define um parágrafo
<p>Parágrafo.</p>
<param>Defines a parameter for an object
<object data="horse.wav">
	<param name="autoplay" value="true">
</object> 		
<pre>Define um texto formatado. Normalmente códigos.
<pre>
	<p>Café</p>
</pre>
<progress>Representa o progresso de uma tarefa
<progress value=”22″ max=”100″></progress>
<q>Define uma citação curta
<q>Muito lindo</q>, ela disse!
<s>Define um texto riscado
<s>riscado</s>
<script>Define um script
<script src=”link_do_script.js”></script>
<section>Define a sessão de um documento
<section>
	<h1>Título</h1>
	<p>Sessão.</p>
</section>
<select>Define uma lista drop-down
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

 

<small>Define um texto menor que o normal
Olá, sou <small>pequeno</small>
<source>Define várias fontes para um elemento HTML (<video> e <audio>)
<video width="320" height="240" controls>
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogg" type="video/ogg">
	Seu navegador não suporta.
</video>
<span>Define uma sessão em um documento
<span style=”color:red;”>Estou escrito em vermelho</span>
<strong>Negrito
<strong>Estou em negrito</strong>
<style>Define o estilo para vários elementos em um documento (CSS)
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {color:red;}
		p {color:blue;}
		</style>
	</head>

	<body>
		<h1>Título</h1>
		<p>Parágrafo.</p>
	</body>
</html>
<sub>Define um subtexto
<sub>:)</sub>
<summary>Define um cabeçalho visível para um elemento <details>
<summary>Copyright 1999-2011.</summary>
<sup>Define um texto superior
<sup>:)</sup>
<table>Define uma tabela
<table>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</table>
<tbody>Define o corpo de uma tabela
<table>
<tbody>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</tbody>
</table>
<td>Define uma célula em uma tabela
<table>
<tbody>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</tbody>
</table>
<textarea>Define um campo de texto onde o usuário pode digitar
<textarea name=”texto”>Meu texto</textarea>
<tfoot>Define o rodapé de uma tabela
<table>
<tfoot>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</tfoot>
</table>
<th>Define uma célula do cabeçalho de uma tabela
<table>
<thead>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</thead>
</table>
<thead>Define o cabeçalho da tabela
<table>
<thead>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</thead>
</table>
<time>Define data e hora
<article>
	<header>
	<h1>Título</h1>
	<p><time pubdate datetime="2011-03-15"></time></p>
	</header>
	<p>Texto.</p>
</article> 
<title>Define o título de um documento HTML
<!DOCTYPE html>
<html>
	<head>
		<title>Nome do site</title>
	
		<style>
		h1 {color:red;}
		p {color:blue;}
		</style>
	</head>

	<body>
		<h1>Título</h1>
		<p>Parágrafo.</p>
	</body>
</html>
<tr>Define uma linha em uma tabela
<table>
<thead>
	<caption>Meus gastos</caption>
	<tr>
		<th>Mês</th>
		<th>Gasto</th>
	</tr>
	<tr>
		<td>Janeiro</td>
		<td>R$ 100,00</td>
	</tr>
</thead>
</table>
<track>Define tracks para <video> e <audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
Seu navegador não suporta.
</video>
<u>Underline
<u>Sublinhado</u>
<ul>Define uma lista não ordenada
<ul>
	<li>Café</li>
	<li>Chá</li>
	<li>Leite</li>
</ul>
<var>Define uma variável
<var>Variável</var>
<video>Define um vídeo
<video width="320" height="240" controls>
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogg" type="video/ogg">
	Seu navegador não suporta.
</video> 
<wbr>Define uma possível quebra de linha
<p>
 Muito <wbr>bom<wbr> hein!
</p> 

Quer mais detalhes ainda? Então acesse o site http://www.w3schools.com/tags/, e terá uma referência ainda mais detalhada.

Concluindo

De início pode parecer algo complicado, mas você deve entender essa parte básica do curso para continuar sem dificuldades nas próximas aulas, portanto, se tiver qualquer dúvida, não hesite em perguntar nos comentários, estamos aqui para ajudar.

Todas as aulas

Veja todas as aulas do curso:

Lembre-se de seguir nosso blog. Postamos todos os nossos novos artigos no Google Plus, Twitter e Facebook. Além disso, enviamos artigos por e-mail, basta se inscrever. Fique sempre por dentro de nossos tutoriais.