Tags HTML: Conheça as Principais e Mais Usadas

Brasil Code 03/03/2021 0 Comentários Leitura: 14 min

Utilizar Tags HTML em uma construção de projetos é extremamente importante, tendo em vista que você pode montar sites, programas e outras aplicações que interagem diretamente com o usuário.

Sua função é demarcar textos, especialmente em um ambiente web, e por este motivo é importante saber quais as estratégias que podem ser utilizadas para explorar as variações que podem ser aproveitadas.

A seguir vou falar mais sobre as tags HTML, cada uma delas, e como elas podem ser utilizadas nas páginas a serem construídas, conseguindo dar características de acordo com o que você quer estruturar.

O Que São Tags HTML

As Tags HTML possuem uma função muito importante: informar ao navegador a estrutura do site, quais são os elementos, como os textos vão estar dispostos, e de que maneira tudo isso vai se encaixar.

Basicamente você vai montar uma estrutura que vai ser interpretada pelo navegador, e que por sua vez vai disponibilizar todas essas informações para que qualquer pessoa que acesse a página possa visualizar.

Lógico que as pessoas não ver o código, mas já todas as informações prontas e todo o conteúdo visual montado, e para que isso aconteça, é necessário pensar em como explorar os elementos que são disponibilizados.

As tags possuem como estruturas principais os sinais < e >, sendo divididas em dois tipos: as que precisam de fechamento são escritas com início <tag> </tag> e as que não precisam de fechamento, sendo escritas somente <tag/>.

As Tags HTML também podem receber um ou mais atributos que vão alterar sua estrutura e funcionalidade.

Atributos

Os atributos são utilizados para personalizar as tags, e vão dar todas as informações que de fato são indicadas.

Algumas utilizadas são:

class=”…“ – Indica classe ao elemento, podendo ser utilizada em um ou mais elementos;
id=”…“ – Indica um id ao elemento, que pode ser atribuído a somente um ;
style=”…” – Inclusão de elementos CSS, que vão dar estilos ao html;
lang=”…” – Indica o idioma principal;
title=”…” – Título do elemento;
alt=”…” – Definição de textos alternativos para as imagens, geralmente, e é mais aplicado para técnicas de SEO;
hidden – Utilizado para ocultar elementos;
align=”…” – Alinhamento do texto e de alguns elementos;
width=”…” – Largura do elemento;
height=”…” – Altura do elemento.

Esses atributos quando são combinados e bem utilizados vão fornecer todo o visual que será apresentado.

Estrutura Básica

Para utilizar as Tags HTML e construir uma boa página web você precisa da estrutura base para iniciar o trabalho.

<!DOCTYPE html>

<html>

<head>

    <title>Título da página</title>

    <meta charset="utf-8"/>

</head>

<body>

</body>

</html>

É com essa estrutura que você começa qualquer trabalho com HTML.

A seguir vou falar mais sobre cada uma das estruturas que foram aqui citadas.

<!DOCTYPE html> – Essa é a tag que informa ao navegador qual o tipo de linguagem utilizada. Em um HTML simples é preciso utilizar a linguagem <!DOCTYPE html>, enquanto no HTML5 é necessário somente !DOCTYPE html, e o navegador já vai entender ;
<html></html> – Todo o trabalho feito em HTML deve conter essa tag, já que ela vai indicar todo o caminho a ser trilhado, além, é claro, de reconhecer cada tag que vai ser incluída. Se você não indicar essa tag no início e no final, qualquer tipo de atributo não vai ser reconhecido;
<head></head> – A Tag head é o cabeçalho do seu código. Normalmente não tem nenhum tipo de utilidade prática na página, mas ajuda a delimitar o início do trabalho feito com HTML;
<title></title> – Essa é a tag html mais importante, pois ela vai determinar o título da página. Essa é uma das tags que todos que trabalham com SEO devem estar sempre atentos;
<meta/> – Ela permite a inserção de metadados no seu documento, e para isso é importante utilizar charset=”UTF-8″, para que as informações inseridas estejam dentro do padrão latino americano. Em outras palavras, é o reconhecimento dos atributos que serão inseridos depois.;
<body></body> – Com tudo inserido, é hora de colocar a tag body, que é onde você vai colocar finalmente as informações referentes ao código a ser trabalhado, ou seja, está tag representa o corpo do documento.

Essas tags html básicas vão estruturar todo o código, você pode entrar com as tags que vão dar forma à sua página.

Tags de Comentário

A Tag de comentário é uma das mais comuns e que não costumam dar muito resultado logo de cara dentro da página, porém ela é muito importante para a construção das partes do seu código para a página.

Ela permite fazer comentários que auxiliam na escrita dos códigos, e por este motivo é muito importante considerar a sua utilização, especialmente se você estiver trabalhando em conjunto com outras pessoas.

São como anotações que você vai fazendo no documento.

Ela recebe como estrutura básica <!– e fechada com –>

Se temos um código:

<!-- Construção da página em HTML -->

<p>Olá Programadores</p> <!-- aqui inicia o texto-->

Na página web o que vemos é:

Olá Programadores

Note que a tag não fica visível para quem visita a página, mas oferece algumas boas indicações para quem vai começar ou continuar um projeto.

Tags Estruturais

As tags HTML você já conheceu algumas, mas também existem outras que podem ser utilizadas e que também possuem uma grande importância.

São elas:

<header></header> – É uma definição de cabeçalho, determinando o começo de todo o código que está sendo feito. Diferente do <head>, ela tem uma função de estruturar todo o texto e seu trabalho como um todo;
<main></main> – Essa Tag é uma tag que define o conteúdo central da página, ainda que este não esteja localizado de fato no centro;
<footer></footer> – Essas tags são utilizadas para definir rodapé de qualquer página. Nela você pode colocar qualquer tipo de informação, sempre lembrando que vai estar em uma seção abaixo na visualização da página;
<section></section> – Utilizada para a criação de seções em sua página;
<article></article> – Para quem tem uma página mais voltada para conteúdos, ou mesmo um blog, a tag article é muito importante para a separação de informações para que o artigo possa se destacar;
<aside></aside> – São tags que relacionam conteúdos de uma seção com algum conteúdo da página. Basicamente ela organiza informações para que fiquem bem disponibilizadas;
<nav></nav> – Para quem quer ter menus na sua página, a tag de navegação é fundamental, até mesmo para que sejam dispostas as informações de maneira organizada;
<div></div> – Essa é uma tag literalmente para separar conteúdos e alocar uns próximos aos outros. Em combinação com outras ela pode deixar uma página muito bem dividida e visualmente organizada.

Tags de Conteúdo

Depois das tags apresentadas, vamos falar das tags HTML de conteúdo que vão definir o texto que vai ser escrito.

Do contrário do que muitas pessoas pensam, não é somente escrever aleatoriamente, mas existe todo um planejamento que vai ajudar na escrita de artigos como esse, por exemplo, que possui todo um trabalho de códigos.

As tags, assim como em todo o trabalho feito, vão ser importantes para que consigam organizar os conteúdos e para que principalmente sejam utilizadas como marcadores até mesmo para mecanismos de busca.

Elas se dividem em:

Tags de título
Tags de texto
Tags de link
Tags de multimídia
Tags de listas
Tags de formulário

A seguir vou falar detalhadamente sobre cada uma para que você possa conhecer melhor.

Tags de Título

Elaborar um título de um artigo, seja título principal ou secundário, parte de um trabalho feito com Tags HTML, e por isso também é uma forma de você conseguir explorar todas as possibilidades de como organizar o conteúdo.

Elas são apresentadas da seguinte maneira:

<h1></h1> - Título mais importante da página

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6> - Título menos importante da página

A variação entre os títulos já podem fazer um texto de muitas palavras.

Primeiro é pensado um título para o h1, o título principal. Ele é muito importante, e demanda inclusive técnicas de SEO para a definição das palavras que serão utilizadas.

Você deve pensar então que o texto pode ser escrito em h2, certo? Errado!

O h2 ou h3 é reservado para títulos secundários. Como um desenvolvimento do texto. O primeiro subtítulo importante.

Já o h4, h5 e h6 são pouco utilizados e possuam baixo valor hierárquico em relação aos demais. Essa divisão é fundamental para o trabalho de SEO e consequentemente para o alcance de sua página.

Tags de Texto

Entendendo então como você começa a construir um conteúdo escrito, é preciso também pensar em estratégias para o estabelecimento de textos.

Eles servem para ornamentar o texto ou para indicar alguns detalhes que precisam ser de fato destacados.

Alguns deles são:

<p></p> – É a tag que vai definir o início de um parágrafo. Onde o seu texto vai começar;
<span></span> – São tags muito próximas da <p> mas possuem uma função diferente. Ela é utilizada para outros elementos como imagens, legendas ou informações que vão somar ao texto. Formam uma espécie de container;
<pre></pre> – Utilizada principalmente para a utilização de textos pré formatados, como códigos, por exemplo.;
<b></b> – Transforma todo o texto dentro desse intervalo em negrito;
<i></i> – Transforma todo o texto dentro desse intervalo em itálico;
<br/> – Tag de HTML utilizada para quebra de linha. Não necessita de fechamento.
<hr/> – Formação de linha horizontal no texto.

Assim você vai formatando o seu conteúdo, especificamente o texto dentro das especificações que você quer.

Tags de Link

As tags de link também são muito importantes, e praticamente ajudaram a montar a internet que temos hoje, especialmente a construção dos conteúdos e conexões entre eles.

Essa tag pode linkar qualquer coisa, dentro da mesma página, ou mesmo alguns elementos que não são da mesma página. Isso já é uma forma de conseguir fazer parcerias e até dar mais visibilidade para o seu conteúdo.

Por este motivo é interessante o seu uso, e até mesmo indicado.

Elas são definidas por <a></a> e podem ser feitas assim:

<p>Para acessar o Google, <a href="https://www.google.com">clique aqui.</a></p>

Tendo como resultado: Para acessar o Google, clique aqui.

Tags de Multimídia

As tags de multimídia também são essenciais para montar uma boa página visualmente para o seu público.

Elas podem incluir imagens, vídeos, sons, iframes, e qualquer outro tipo de multimídia que pode ser incorporado.

Para imagens é utilizada a linguagem <img>, sem fechamento. Como no exemplo:

<img src="imagens/imagem1.jpg" alt="imagem 1 da minha página">

Esse é um código que vai indicar onde está a imagem e como incorporar na página.

Para vídeos temos a seguinte sequência:

<video controls>

  <source src="video.mp4" type="video/mp4">

  <source src="video.ogg" type="video/ogg">

  Seu navegador não possui suporte para Vídeos.

</video>

Note que tem o início <source src=…> que é a indicação de onde vão ser pegos os vídeos,e duas “types”. Isso é proposital para que se tenham duas opções de reprodução e possa atingir mais pessoas. Ao final é indicado o texto “Seu navegador não possui suporte para Vídeos” caso não tenha recursos para a reprodução.

A tag áudio também segue o mesmo funcionamento:

<audio controls>

  <source src="musica.ogg" type="audio/ogg">

  <source src="musica.mp3" type="audio/mpeg">

  Seu navegador não possui suporte para áudio.

</audio>

Os iframes são mais complexos, e envolvem multimídias de outras páginas, mas ainda assim é possível encontrar formas de como fazer:

<iframe src="https://brasilcode.com.br">

  <p>Seu navegador não possui suporte para iFrames.</p>

</iframe>

O src vai em busca da multimídia e o link indica qual o local onde este está alocado.

Tags de Listas

As tags de listas são indicadas para a organização de informações que são pensadas para determinar uma ordem, ou não necessariamente.

Para uma lista ordenada você utiliza:

<p>Lista por ordem de importância:</p>

<ol>

  <li>item 1</li>

  <li>item 2</li>

  <li>item 3</li>

</ol>

O atributo <ol> faz uma lista ordenada, e o item <li> serve para organizar as informações conforme você quer.

Outra forma de construir é com:

<p>Minha lista não ordenada:</p>

<ul>

  <li>item 1</li>

  <li>item 2</li>

  <li>item 3</li>

</ul>

O atributo <ul> monta uma lista não ordenada.

Tags de Formulário

As tags de formulário são indicadas para colher informações dos usuários por meio de dados simples.

Eles são feitos com <form> e </form> e então você pode colocar uma área para inserção de dados com <input>, e type para definir o tipo de informação a ser colhida, seja nome, email ou qualquer outra.

Você pode inserir também <textarea> para ser o local onde serão escritas as informações pelos usuários, como uma mensagem, opinião ou reclamação. Ao final, <input type=”submit” value=”ENVIAR”> para criar um botão de envio da mensagem.

Existem vários tipos de input que você pode conferir no site w3schools.

Tags de Estilos

Por fim, você pode utilizar a tag <style> e <script>.

A <style> e </style> deve ser posicionada logo depois do <head>, enquanto a <script> e </script> pode ser posta em qualquer local, sendo recomendada após o <footer> por conta da linguagem.

Exmplo de Página em HTML

<!DOCTYPE html>

<html>
<head>
    <title>Título da página</title>
    <meta charset="utf-8">
    <style>
        /*AQUI VAI TODO NOSSO CÓDIGO CSS*/
    </style>
</head>
<body>
<header><!--criando um cabeçalho para nossa página com um menu-->
    <h2>Minha Página</h2>
    <nav><!--vamos criar um menu utilizando listas-->
        <ul>
            <li>Home</li>
            <li>Meu menu</li>
        </ul>
    </nav><!--aqui finaliza o meu menu-->
</header>
<main>    
    <section><!--vamos criar a primeira section do meu documento-->
        <article>
            <h3>Titulo do meu artigo</h3>
            <p>Conteudo do meu artigo</p>
            <p>Mais conteúdo para o meu artigo</p>
            <ol><!--vamos criar uma lista ordenada-->
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ol>
        </article><!-- aqui finaliza meu primeiro artigo da section-->
        <article>
            <h3>Titulo do meu segundo artigo</h3>
            <p>Conteudo do meu segundo artigo</p>
            <p>Mais conteúdo para o meu segundo artigo</p>        
        </article><!--aqui finaliza meu segundo artigo da section-->
</section><!--aqui encerra a primeira section do meu documento-->
</main><!--aqui finaliza todo conteúdo principal do corpo da pagina-->

<aside>
    <h4>Conteúdos relacionados</h4>
    <ul>
        <li>Página oficial da <a href="https://www.homehost.com.br/">Home Host</a></li>
        <li>item da lista</li>
        <li>item da lista</li>
    </ul>
</aside>

<footer>
    <div><!--criando uma divisão para meu rodapé-->
        <p>Inscreva-se para receber noticias</p>
        <form method="post">
            <input type="text" name="nome" placeholder="Digite seu Nome">
            <input type="email" name="email" placeholder="Digite seu Email">
            <input type="submit" name="enviar" value="Enviar">
        </form>
    </div>
    <div><!--criando outra para meu rodapé-->
        <h3>Minha primeira página html</h3>
        <span>Todos os direitos reservados</span>
    </div>
</footer>

<script>
    //AQUI VAI NOSSO CÓDIGO DE SCRIPT (JAVASCRIPT)
</script>

</body>
</html>

Essas são as Tags HTML mais importantes e que você precisa conhecer para montar a sua página. Agora você já pode aplicar todas elas e também ter todos os cuidados referentes a informações claras e funções bem definidas.

Caso queira aprender a programação melhor, de maneira consciente e GRATUITA, confira o Mini Curso GRATUITO HTML/CSS E JavaScript que preparei especialmente para você dar os primeiros passos na programação.