Front-end — Tags

7 min readOct 11, 2019

Temos uma boa noção de como que o HTML é estruturado. Agora precisamos saber sobre as tags que ele possui para podermos definir nossos blocos. Antes mesmo de começar a listar as tags, é importante deixar claro que não é necessário decorar nenhuma delas. O importante aqui é você aprender o que o HTML consegue estruturar.

Cabeçalhos

Cabeçalhos são definidos pelas tags de h1 a h6, onde h1 é a maior e mais importante e h6 é a menor e menos importante. A correta utilização deles é importante não só para prender a atenção dos usuários, mas como também é a tag que as ferramentas de busca procuram primeiramente para saber do que se trata sua página.

<h1>Título Frenético grandão</h1>
<h3>Título Frenético que acha que tamanho não importa</h3>

Parágrafos

Tag utilizada para cada parágrafo que você deseja utilizar no seu site. É importante ressaltar que qualquer espaço em branco a mais ou quebra de linha serão ignorados pela tag.

<p>Um parágrafo frenético que não contém espaços em branco branco a mais e nem quebra de linhas aleatórias.</p>

<p>Um parágrafo     frenético   que  
contém espaços em      branco
     branco a mais e 
quebra 
de linhas 
aleatórias.</p>

Do ponto de vista de formatação, os dois parágrafos serão escritos da mesma forma.

Formatação de Texto

Existem algumas tags que servem para você formatar o texto, colocando efeitos como negrito, itálico, sublinhado, entre outros.

 - Define um texto em negrito.
 - Define um texto em negrito, mas que tem importância semântica.
 - Define um texto em itálico.
 - Define um texto em itálico, mas que tem importância semântica.
 - Define um texto marcado/destacado.
 - Define um texto pequeno.
<del> - Define um texto riscado.
<ins> - Define um texto sublinhado.
 - Define um texto de forma subscrita.
 - Define um texto de forma sobrescrita.

A diferença entre b e strong, i e em, é que eles define que uma parte do seu texto tem mais importância do que o resto. Por padrão eles são impressos na tela da mesma forma, mas semanticamente são diferentes.

Quebra de linha (Break Line)

Par indicar quebra de linha em textos ou parágrafos, é necessário indicar por meio da tag br. Ela pode ser representada de três formas.

<br>
</br>
<br/>

Os navegadores reconhecem as três porém a correta é a última. Esse é o formato que damos para tags que não possuem elemento, ou seja, não tem nada dentro delas. <nomeDaTag />

Links

Links servem para você direcionar seu usuário para outra página. Quando o cursor do mouse passar por cima de um link ele muda de ícone para indicar que aquele texto é clicável.

<a href="url.frenética">Texto do link frenético</a>

O link pode possuir mais um atributo além do href, que é o target, para indicar onde ele deve abrir a url.

Numa nova aba (_blank)
Na mesma aba (_self, valor padrão)

Existem outros valores, mas esses costuma ser os mais comuns.

Ele também pode possuir um title para indicar mais informações sobre o link caso o usuário coloque o mouse em cima do texto.

Imagens

Serve para você imprimir uma imagem salva na sua página.

<img src="nome_da_imagem.jpg" alt="Descrição da imagem" width="500" height="600" />

O atributo src define qual o caminho para a imagem, se ela estive na mesma pasta, é só colocar o mesmo nome. O alt define uma alternativa para a imagem e é o que o navegador imprime quando ele não consegue achar a imagem e o que leitores de tela leem para quem tem alguma deficiência visual. Width e height define a largura e altura que você que sua imagem tenha.

Acessibilidade: Atenção, o atributo alt é um muito importante para a acessibilidade do site.

Tabelas

Para definir uma tabela, você ira precisar de 4 tags: table, tr, th e td. A tag table define que dentro dela os blocos devem ser impressas como uma tabela. A tr define um linha da tabela. Th e td, definem colunas dentro da linha, a primeira é utilizada na primeira linha da tabela que corresponde aos cabeçalhos. A segunda é utilizada nas demais linhas.

<table> 
    <tr> <!-- Primeira linha -->
        <th>Coluna 1</th> <!-- Primeira coluna -->
        <th>Coluna 2</th> <!-- Segunda coluna -->
        <th>Coluna 3</th> <!-- Terceira coluna -->
    </tr>
    <tr> <!-- Segunda linha -->
        <td>Valor 1</td> <!-- Primeira coluna -->
        <td>Valor 2</td> <!-- Segunda coluna -->
        <td>Valor 3</td> <!-- Terceira coluna -->
    </tr>
    <tr> <!-- Terceira linha -->
        <td>Valor 4</td> <!-- Primeira coluna -->
        <td>Valor 5</td> <!-- Segunda coluna -->
        <td>Valor 6</td> <!-- Terceira coluna -->
    </tr>
</table>

As vezes nos precisamos unir colunas ou linhas de uma tabela para alguns valores que são mais importantes, para isso, nos utilizamos os atributos colspan e rowspan. Eles dizem respeito as tags td e th e servem para indicar quantas colunas ou linhas aquele elemento deve ocupar. Um th com colspan igual a 2 indica que ele ocupará duas colunas ao invés de uma. Um td com rowspan igual a 2, indica que ele ocupará duas linhas ao invés de uma.

<table>
    <caption>E-mails do Banana de Programa</caption>
    <tr>
        <th>Nome</th>
        <th colspan="2">E-mails</th>
    </tr>
    <tr>
        <td>Banana de Programa</td>
        <td>bananadeprograma@gmai.com</td>
        <td>bananadeprograma@kidabisnaga.com</td>
    </tr>
</table><table>
    <caption>E-mails do Banana de Programa</caption>
    <tr>
        <th>Nome</th>
        <td>Banana de Programa</td>
    </tr>
    <tr>
        <th rowspan="2">E-mails</th>
        <td>bananadeprograma@gmai.com</td>
    </tr>
    <tr>
        <td>bananadeprograma@kidabisnaga.com</td>
    </tr>
</table>

A tag caption define qual será o título da tabela.

Listas

Existe três tags para definir uma lista. As duas primeiras são a ul e a ol. A primeira define um lista sem ordem, que utiliza símbolos para enumerar a lista, a segunda utiliza números. A última tag é a li, usada para definir cada elemento dentro da lista.

<ul>
    <li>Oi</li>
    <li>Tudo</li>
    <li>Bom</li>
    <li>?</li>
</ul>
<ol>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
    <li>Quarto</li>
</ol>

É possível mudar a forma que a lista ordenada é apresentada. Por padrão ela é enumerada com os números. Mas o atributo type possibilita mudar isso.

type=”1", enumera com números.
type=”A", enumera com as letras maiúsculas.
type=”a", enumera com as letras minúsculas.
type=”I", enumera com os números romanos em maiúsculo.
type=”i", enumera com os números romanos em minúsculo.

Você também pode definir o número de início da lista usando o atributo start.

start=”50"

Também é possível construir listas descritivas para descrever um elementos em tópicos.

<dl>
    <dt>Café</dt>
    <dd>- Néctar dos deuses</dd>
    <dt>Chá</dt>
    <dd>- Quem se importa?</dd>
</dl>

dl é a tag da lista, dt é o nome do termo e dd é a descrição do mesmo.

Blocos

Existem algumas tag estruturais, ou seja, elas servem para definir um espaço para outras tags ou textos. São divididas em dois grupos, em bloco e em linha. Estruturas que são definidas em bloco, ocupam a linha inteira dentro de uma página. Já as em linha, ficam uma do lado da outra.

As principais utilizadas são a div (em bloco) e a span (em linha).

<div>
Isso ocupará um linha inteira.
</div><span>
Isso não.
</span>
<span>
Isso não 2.
</span>

Linha horizontal (Horizontal Rule)

Existe uma tag que desenha uma linha horizontal na tela da página. Usada para separar seções da sua página.

Eu amo
<hr/>
Torta

Texto pré formatado

É possível também você fazer com que o navegador imprima o texto exatamente da forma que você quer. Para isso, ao inves de usar a tag p você deve utilizar a tag pre

<pre>
Esse texto será
impresso exata
mente    assim.
</pre>

Metadados

Vimos que a tag head serve para definir metadados da página, como: descrição, palavras-chave, autor da página, etc.

<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Comentários

É possível escrever comentários no seu código HTML para facilitar a vida de outra pessoa quando ela for lê-lo. Eles não serão impressos pelo navegador.

<!-- Comentário frenético para lembrar de adicionar mais informações para o próximo que for escrever neste arquivo. -->

iFrames

iFrame é uma tela de navegador dentro de uma tela de navegador. Possui diversas aplicações, mas é mais raro ver sua utilização hoje em dia. O atributo src define qual a url da página que será aberta.

<iframe src="URL"></iframe>

Outras tags

As tags vistas aqui são algumas das mais utilizadas, outras costumas ter uma aplicação muito especificia ou quase nunca são usadas, são elas:

Abreviação (abbr), utilizada para dizer que um texto é uma abreviação. Utilizamos o atributo title para escrever o que ela significa.
Endereço (address), utilizada para informar o endereço do autor ou dono da página web.
Título de obras (cite), utilizada para dar destaque ao nome de obras.
Texto da Direita pra esquerda (bdo), faz com que o texto dentro dela seja impresso da direita para a esquerda.
Mapa (map), define que um conjunto de áreas clicáveis dentro de uma imagem.
Área (area), define uma área clicável em uma imagem.
Computação (code, kbd, samp, var), são utilizados para representar comandos ou instruções típicas de um computador.
Citações (q, blackquote), utilizada para informar que aquele texto é uma citação. O blackquote é utilizado para citações pegas de outro site, enquanto o q serve para os outros casos.

O material usado de apoio é o w3schools.com/html. Caso tenha alguma dúvida ele é uma excelente fonte de conteúdo.

E agora José?

Vimos praticamente todas as tags que existem. Faltam as de formulário e as novas que o HTML5 trouxe para gente. Com isso já conseguimos dar a estruturas bem mais complexas para nosso site e estamos cada vez mais perto de conseguirmos fazer páginas bonitas que condizem com o nosso interior.

O conhecimento das tags, do que elas são capazes e qual a melhor forma de usá-las vem com o tempo e a prática. No nosso próximo artigo vamos começar a produzir páginas completas para por em prática aquilo que estamos aprendendo.

Dúvidas, questionamentos, sugestões ou anseios? Entre em contato conosco via nosso e-mail bananadeprograma@gmail.com!