Olá pessoal, vamos começar nosso curso de HTML e hoje vamos falar sobre o que é uma Tag HTML (Hypertext Markup Language) que desempenham um papel crucial.
Esses elementos fundamentais são a espinha dorsal de qualquer página web, estruturando o conteúdo e permitindo a comunicação eficaz entre o navegador e o usuário.
Exploraremos o que são as tags HTML, sua importância e como são essenciais para a construção de páginas web dinâmicas e interativas.
O que são Tags HTML?
As Tags HTML consistem em códigos inseridos no texto para definir a estrutura e o layout de uma página. Cada tag possui uma função específica e contribui para a apresentação visual e organização do conteúdo.
Estrutura Básica das Tags HTML:
As tags HTML geralmente seguem uma estrutura básica, composta por uma tag de abertura ‘< >‘, conteúdo e uma tag de fechamento ‘< / >‘. Por exemplo, a estrutura básica de um parágrafo em HTML seria:
<p>Este é um exemplo de parágrafo em HTML</p> |
Aqui, <p> representa a tag de abertura, e </p> é a tag de fechamento. O conteúdo entre essas tags é o texto que será exibido na página.
Atributos das Tags HTML:
Além do conteúdo entre as tags, muitas tags HTML podem conter atributos. Os atributos fornecem informações adicionais sobre a tag e podem influenciar o comportamento ou estilo da página. Por exemplo, a tag de imagem (`<img>`) pode ter o atributo `src` para especificar o caminho da imagem:
<img src="imagem.jpg" alt="Descrição da imagem" /> |
Principais Tags HTML
As tags HTML desempenham um papel crucial no SEO (Search Engine Optimization). Os motores de busca, como o Google, utilizam as tags para entender a estrutura e o conteúdo de uma página e vamos falar disso em outro artigo.
Neste momento vamos falar sobre as principais ou as tags mais usadas para se criar um site ou sistema para web, não focando a parte de SEO
Tags apropriadas e bem otimizadas podem melhorar a classificação nos resultados de pesquisa, tornando o conteúdo mais visível para os usuários.
Titulos ‘h1’ a ‘h6’:
As tags de cabeçalho variam de ‘h1’ a ‘h6’, indicando a importância e hierarquia do texto. Motores de busca consideram os cabeçalhos ao avaliar a relevância do conteúdo.
<h1>Título Principal</h1> <h2>Subtítulo</h2> |
‘a’ (Âncora ou Link):
A tag de âncora é usada para criar links. O atributo href define o destino do link.
<a href="https://www.exemplo.com">Visite o Exemplo</a> |
‘img’ (Imagem):
A tag de imagem é usada para incorporar imagens. O atributo src especifica o caminho da imagem e o atributo alt fornece uma descrição para acessibilidade.
<img src="imagem.jpg" alt="Descrição da imagem"> |
‘table’ (Tabelas):
As tabelas são uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos em uma página HTML, em outras palavras podemos dizer que as tabelas lembram muito uma planilha do excel, e esta é a estrutura padrão para criação de uma tabela.
<table border="1"> <tr><th>Cabeçalho 1</th><th>Cabeçalho 2</th><th>Cabeçalho 3</th></tr> <tr><td>Linha:1 Célula:1</td><td>Linha:1 Célula:2</td><td>Linha:1 Célula:3</td></tr> <tr><td>Linha:2 Célula:1</td><td>Linha:2 Célula:2</td><td>Linha:2 Célula:3</td></tr> <tr><td>Linha:3 Célula:1</td><td>Linha:3 Célula:2</td><td>Linha:3 Célula:3</td></tr> </table> |
Tag HTML para formatação de texto
‘ul e li’ (Listas):
Uma lista ordenada é uma lista de itens e as vezes as listas de itens são marcadas com números.A lista mais comum é a lista não-ordenada definida pela tag ‘ul’. O Elemento HTML ‘ol’ cria também uma lista mas separa os itens por numero como vemos no exemplo abaixo:
<-- Lista com marcadores --> <ul> <li>Arroz</li> <li>Feijão</li> <li>Leite</li> </ul> <-- Lista Numerica --> <ol> <li>São Paulo</li> <li>Rio de Janeiro</li> <li>Minas Gerais</li> </ol> |
‘p, b, i’ (paragrafo, negrito, italico):
Sempre que quisermos que um trecho de um texto seja visto como parágrafo, devemos colocar tal texto entre as tags ‘p’. A tag ‘b’ faz com que o texto entre esta tag fique em negrito, a tag ‘i’ deixa o texto em italico e ‘u’ deixa o texto sublinhado (u vem da palavra underline) como vemos no exemplo abaixo:
<p>O <b>Lorem Ipsum</b> é um texto modelo da <i>indústria tipográfica</i> e de <u>impressão</u>.</p> |
Outras Tags HTML
<div> !! </div> <!-- Faz a divisão dentro do conteúdo --> <span> !! </span> <!-- modificar propriedades do texto, ou separar partes do texto --> <q> !! </q> <!-- Citação --> <code> !! </code> <!-- Exibir uma parte do código de programação --> <address> !! </address> <!-- Informações de contato --> <br> <!-- para quebras de linha --> |
Em nosso próximo artigo falaremos mais sobre as Tags do HTML que são usadas principalmente por conta do SEO e otimização dos sites.
No responses yet