Conheça a lista de Tags HTML (principais)

Por | Atualizado em 2015-01-09


Aqui no Montar um Blog sempre defendemos a ideia que é possível criar páginas Web completas sem necessitar de programação. Mas também não deixa de ser verdade, que quanto melhor você dominar as linguagens de programação, mais “autónomo” conseguirá ser, podendo resolver os problemas que lhe possam surgir mais facilmente.

Em relação à linguagem “HTML” (Hyper Text Markup Language), existe uma lista de tags “essenciais” que você deverá saber para dominar a construção das páginas. Não se esqueça de guardar esta página nos favoritos do navegador (CTRL+D), para futura referência.

Lista de tags HTML:

<HTML > a tag HTML serve para delimitar o início e o fim do documento HTML. Apenas a tag <!DOCTYPE html> não é englobada.
<head> Engloba vários elementos da página HTML, como declaração de estilo, meta tags, título da página, declaração de tipo de caracteres, etc.
<body> - A secção contém todos os elementos da página como texto, links, imagens, etc.
<br/> - adiciona uma quebra de linha no texto;
<p>texto</p> - adiciona um parágrafo na página;
<hr/> - Desenha uma linha de separação;
<div> - Criar uma "divisória" ou secção da página, que pode incluir vários elementos.
<input> - Pode ser usado para criar botões de ação, caixas de texto que recebam dados (que podem ser retrabalhados em javascript), etc.
<iframe> - Usado para carregar elementos externos, como por exemplo uma página Web alojada no Google Drive.

lista de tags html

Outras Tags HTML importantes:

1. Inserir imagem:

<img src="link_da_imagem" alt="descrição da imagem" width="comprimento em px" height="altura em px">

2. Link com texto âncora:

<a href="link de destino">Texto âncora</a>

3. rel=”nofollow” – Adicionar “Nofollow” ao link indica aos motores de busca que não devem seguir esse mesmo link. Deve ser usado em links de afiliados.

<a href="link de destino" rel="nofollow">Texto Âncora</a>

4. Abrir link numa nova janela

<a href="link de destino" target="_blank">Texto âncora</a>

5. Imagem com link

<a href="link de destino"><img src="link da imagem" alt="descrição da imagem"></a>

6. ID vs Class



A Tag “id” é usada para usar um único elemento na página. Pode ser usado para chamar atributos CSS, para “linkar” para uma zona específica da página, etc.

O atributo class é usado para definir o estilo de vários elementos HTML (ao contrário do ID que apenas pode ser usado uma vez).

Para mais detalhes, consulte o tutorial Class vs ID – Como usar?

7. Linkar para uma zona específica da página.

Imagine que necessita de linkar para a parte inferior de uma página, como fazemos? Muito simples, basta usar o atributo “ID”. Para isso, basta identificar o elemento que pretende linkar (por exemplo, uma “div”). Agora, basta criar um link com o link da página onde irá implementar essa, seguido de “#nome_do_id”.

<a href="www.exemplo.com/#nome_do_id">texto Âncora</a>

8. Títulos em HTML

Os motores de busca gostam de conteúdo limpo e organizado. Como tal, é importante que implemente a utilização das tags de titulo em HTML:

<title>...</title>
<h1>Titulo Principal</h1>
<h2>Sub titulo</h2>
<h3>.....</h3
.....
<h6>...</h6>

9. Tabelas

Criar uma tabela é uma excelente forma de organizar o seu conteúdo. Em HTML é possível criar tabelas com relativa facilidade, podendo ainda usar a linguagem CSS para adicionar algum “estilo” e retirar a monotonia das suas tabelas.

Para mais detalhes consulte o seguinte tutorial: Como criar tabelas em HTML.

10. Adicionar estilo em Texto

<i>Texto em itálico</i>
<b>texto em negrito</b>
<blockquote>parágrafo delimitado, indicando uma citação</blockquote>

11. Criar listas em HTML

A linguagem HTML também lhe permite criar vários tipos de listagem. Podendo inclusivamente listagens com numeração (normal e romana), e listagens de descrição.

<ul>
<li>...</li>
<li>...</li>
</ul>
<ol>
<li>...</li>
<li>...</li>
</ol>

Este tipo de listagem pode também exibir letras, bastando adicionar o atributo “type=A”. Por exemplo:

<ol type="a">
<li>...</li>
<li>...</li>
</ol>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *