19 tags HTML comumente usadas para saber para iniciantes

Publicados: 2022-12-08

Se você deseja se tornar um desenvolvedor front-end, um dos conselhos mais comuns que você receberá é aprender HTML. Hypertext Markup Language, abreviado como HTML, é a base da maioria das páginas da web.

HTML é feito de coisas diferentes, como tags, atributos e elementos. Nosso foco serão tags HTML. Usamos tags HTML para informar aos navegadores como estruturar o conteúdo em cabeçalhos, títulos, parágrafos, imagens e muito mais. As tags HTML são, portanto, como palavras-chave que definem como o navegador exibirá ou formatará o conteúdo.

Os servidores leem tags HTML de cima para baixo. Não há restrição quanto ao número de tags HTML que uma página da Web deve ter.

Todas as tags HTML estão entre <>
Cada tag HTML executa uma função diferente
A maioria das tags HTML tem abertura <tag> e fechamento </tag>

Tags HTML versus elementos HTML versus atributos HTML

A maioria das pessoas usa os termos tags e elementos HTML de forma intercambiável. Mas eles são os mesmos? Tecnicamente, elementos HTML e tags HTML são diferentes.

Tags HTML definem elementos HTML. Para conseguir isso, o conteúdo é agrupado usando um nome de tag de abertura e fechamento que corresponda ao conteúdo da tag com a qual estamos trabalhando.

Este é um exemplo de um elemento HTML:

 <p> This is a paragraph </p>

<p> é um exemplo de tag HTML

Os atributos HTML fornecem informações adicionais sobre elementos HTML em um documento. Os atributos são encontrados nos elementos HTML.

Este é um exemplo de um atributo HTML

 <button id=" SubmitOrder" class="btn">Order</button>

Tags HTML que todos deveriam conhecer

O HTML como linguagem de marcação evoluiu ao longo dos anos desde que Tim Berners-Lee o introduziu em 1993. A primeira versão HTML tinha 18 tags. Novas tags são adicionadas a cada versão HTML; a atualização mais recente foi HTML5 em 2014.

Uma comparação próxima de HTML e HTML5 mostra que o último possui tags semânticas como <article>, <header> e <footer> que descrevem claramente o conteúdo. Agora temos mais de 100 tags HTML. A seguir estão algumas das tags mais populares que você deve conhecer:

<!DOCTYPE>

O DOCTYPE não é tecnicamente uma tag, mas uma declaração que informa ao navegador que tipo de arquivo será carregado. Esta tag informa ao navegador o tipo de HTML que será carregado.

Em HTML5, você pode declarar seu arquivo como

 <!DOCTYPE html>

 <!doctype html>

Observação: a declaração não tem uma marca de fechamento e não faz distinção entre maiúsculas e minúsculas.

<html> </html>

A tag <html> ….. </html> vem depois da tag DOCTYPE. Essa tag define o documento como uma página da web; todos os outros elementos serão aninhados dentro. A tag HTML especifica o início e o fim de um documento HTML.

Uma tag <html> é representada como;

 <html>Content</html>

<head></head>

A seção head de um documento HTML é representada por uma tag <head>. Essa tag está incluída na tag <html> e fornece informações gerais sobre a página da web.

A tag <head> contém outras tags que fornecem detalhes da página da Web, como o título e o autor da página. O conteúdo desta tag não é exibido na página da web

Esta é a sintaxe de uma tag <head>;

 <head> …….. </head>

<title></title>

A tag <title> declara o título da página da web. Esta tag está dentro da tag <head>. A tag <title> aparecerá na barra de título ou na guia da janela do navegador, mas não na página da Web real.

A sintaxe para a tag <title> é;

 <title>HTML Tags for Beginners</title>

Quando dentro de uma tag <head>, aparecerá como;

 <head> <title>HTML Tags for Beginners</title> </head>

<corpo> </corpo>

A tag <body> exibe todo o conteúdo visível em uma página da web. Imagens, links, texto simples, vídeos e muito mais podem ser encontrados dentro das tags <body> e </body>.

Algumas das outras tags que você encontrará dentro do corpo incluem a tag <p> para parágrafo, a tag <a> para imagens, a tag <strong> para texto em negrito e a tag <ol> para uma lista ordenada, para mencionar algumas.

A sintaxe da tag <body> é;

 <body> Content </body>

Etiquetas <h1> a <h6>

Pode haver até 6 tags de título em um documento HTML. Cada uma das tags é representada por um número que começa de 1 a 6 como <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

H1 é a maior tag de cabeçalho, enquanto H6 é a menor.

Em um documento HTML, as tags de título podem ser representadas da seguinte forma:

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

As tags <h1> a <h6> ficam dentro da tag <body>.

Por exemplo, uma tag ,<H1> será incluída como;

 <body> <h1> This is heading 1 >/h1> </body>

<p> </p>

O <p> </p> ou simplesmente a tag de parágrafo é usado quando você deseja estruturar o conteúdo em um parágrafo. Pressionar o botão 'enter' em um documento HTML em seu editor de código não criará um novo parágrafo.

Se você quiser mais de um parágrafo, terá que usar várias tags <p> </p> em seu documento. As tags de parágrafo devem ser colocadas dentro da tag <body>.

A sintaxe de uma tag de parágrafo é;

 <p> ….some content here….</p>

Se você quiser ter quatro parágrafos, seu código será estruturado como;

 <body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>

<b> </b>

A tag <b> </b> ou simplesmente negrito irá formatar qualquer conteúdo entre a abertura <b> e o fechamento </b> como negrito.

A tag em negrito pode estar entre um cabeçalho como H1 ou até mesmo dentro de uma tag de parágrafo.

Estes são exemplos de uma marca em negrito;

 <b> Bold Tag </b>

A frase 'Bold Tag' aparecerá em negrito.

 <h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>

A quinta edição estará em negrito.

<i> </i>

A tag em itálico, indicada por <i>, coloca em itálico o texto dentro das tags.

Por exemplo, se tivermos

 <i> These are italics </i>

As palavras ' estes são itálicos ' aparecerão em itálico.

<u> </u>

A marca de sublinhado, ou <u>, é usada quando você deseja sublinhar um determinado trecho de texto em um documento HTML.

Por exemplo, se tivermos;

 <u> underline these words </u>

A frase entre as tags será sublinhada.

<centro> </centro>

A tag Center, <center>, é usada para centralizar o conteúdo em um documento HTML.

Por exemplo, se tivermos uma tag h2 escrita como <h2> Centering Content in HTML </h2> , podemos centralizá-la da seguinte maneira;

 <center> <h2> Centering Content in HTML </h2> </center>

<span></span>

A tag Span, <span>, é um contêiner embutido genérico que não vem com um estilo padrão. Você pode usar a tag span para agrupar os textos que deseja estilizar.

Você pode estender a tag dentro de outras tags, como cabeçalhos e parágrafos;

 <h2> Learn HTML <span> from experts </span> and be ready for the market </h2>

 <p> Learn HTML <span> from experts </span> and be ready for the market </p>

<div></div>

Uma tag de divisão, abreviada como div, é uma tag que permite agrupar diferentes tags em um documento HTML.

Uma tag div pode receber uma 'classe' para adicionar estilo externo usando CSS.

É assim que um div envolvendo um h1, h2 e uma tag de parágrafo será representado.

 <div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>

<em></em>

A ênfase, ou tag <em>, é usada para enfatizar certas palavras em um documento HTML.

O conteúdo entre as tags <em> aparecerá inclinado ou em itálico.

O conteúdo enfatizado dentro de um parágrafo pode aparecer em um editor de código aparecerá como;

 <p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>

<sup></sup>

A tag <sup> ou sobrescrito permite que o texto incluído fique acima do restante. Um exemplo perfeito é quando você deseja elevar ao quadrado um número X e representá-lo matematicamente para obter X ²

A sintaxe para <sup> dentro de uma tag de parágrafo será;

 <H1> Harveys <sup>TM </sup> Company Limited </H1>

<sub></sub>

A tag subscrito ou <sub> é o oposto da tag sobrescrito. O conteúdo incluído na tag <sub> aparecerá abaixo da linha normal de texto. Um exemplo perfeito é escrever a fórmula química da água como H ₂ 0.

A sintaxe para a tag de subscrito será;

 Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

<br> é uma tag de fechamento automático que significa uma pausa. Todo o conteúdo após <br> começará em uma nova linha.

A sintaxe para <br> dentro de um parágrafo será;

 <p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>

<ol></ol> e <li> </li>

A tag de lista ordenada ou <ol> deve ser usada com outra tag como <li>.

Os dois podem aparecer em um editor de código como;

 <ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>

Quando renderizado no navegador, o conteúdo aparecerá numerado.

<img src=””/>

Você pode querer adicionar uma imagem para apelo visual ou até mesmo um logotipo. A tag de imagem de fechamento automático, <img src=””/>, é útil nesse caso.

A sintaxe para a tag de imagem será;

 <img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

O conteúdo entre aspas representa o URL de origem.

Empacotando

Existem mais de 100 tags HTML, mas as acima são as que você deve conhecer como iniciante. O HTML é suportado na maioria dos editores de código e, portanto, você tem certeza de que nunca errará quando começar a aprender.