A primeira versão do HTML, abreviação para a expressão HyperText Markup Language, publicada em 1991 por Tim Berners-Lee e Dan Connolly continha apenas 18 tags. De lá para cá, a versão 5 já conta com mais de 140 tags.
É importante destacar que todo documento em HTML possui essas tags (ou marcadores) que são os comandos de formatação da linguagem. O HTML é um recurso muito importante, apesar de não ser considerado uma linguagem de programação e sim uma linguagem de marcação, pois é um padrão internacional usado na estruturação de qualquer página web.
Se você quer entender um pouco mais sobre a base do HTML e como estruturar um arquivo para ser exibido por um navegador, continue a leitura desse artigo que vamos falar um pouco mais sobre elementos, tags e atributos.
Tags de texto
Um documento HTML é formado por elementos, que são agrupados por funções. Há elementos básicos que são a base de todos os documentos HTML e sem eles um navegador não consegue ler corretamente uma página. Temos um outro artigo para te ajudar a entender um pouco mais sobre a estrutura básica de um documento HTML.
Enquanto os elementos representam as partes estruturais do conteúdo, as tags são as unidades básicas de construção e que definem os diferentes elementos da página. É sobre as tags que vamos aprofundar neste artigo. Entender sobre o funcionamento das tags HTML é importante para que o seu documento seja corretamente interpretado pelo navegador e tenha uma aparência bonita e atrativa para os leitores da sua página.
As tags geralmente tem a seguinte sintaxe:
- tag de abertura: <tag_nome>
- conteúdo da tag: texto que será apresentado
- tag de fechamento: </tag_nome>
As Tags de Texto HTML são a base para estruturar e formatar o conteúdo textual em uma página da internet. São elas que vão fornecer as instruções aos navegadores sobre como exibir o texto.
As tags de texto estão divididas em três tipos:
Tags de formatação:
- negrito
- itálico
- sublinhado
- pré-formatado
Tags de estrutura:
- parágrafo
- títulos
- citações
Tags de conteúdo:
- listas
- definições
- abreviação
Abaixo, veja em maiores detalhes algumas dessas tags:
<h1> - <h6>
As tags de título são usadas para destacar um conteúdo na web ou subdividir a seções do seu texto. Vai do <h1></h1> que é o título de maior nível hierárquico de um texto, até o <h6></h6> que é o subtítulo de menor nível hierárquico. É mais comum o uso até o H3, e mais raro o uso a partir do H4.
<p>
Outra tag de texto muito utilizada é a parágrafo, que define um bloco de texto em um parágrafo de conteúdo. É o caso desse parágrafo explicativo sobre essa tag, que está lendo nesse momento 😉.
<strong>
A tag <strong> é utilizada para destacar um conteúdo e dar muita importância para ele. É normalmente apresentado em negrito e servem para determinar que uma parte do texto tem muita importância naquele conteúdo, como o caso de alertas ou palavras de grande importância. Essa tag é diferente da <b></b>, que é usada para colocar um texto em negrito, apenas. Essa é uma tag de importância.
<em>
Já a tag <em> marca um texto que se quer enfatizar. Geralmente é mostrado no tipo itálico, no entanto não deve ser utilizado simplesmente para aplicar o estilo itálico no texto. É normalmente usado para indicar um contraste explícito ou implícito. Essa é uma tag de ênfase.
Listas
As listas são elementos muito importantes para os textos, quando queremos listar alguns itens e também para criar conteúdos no menu de navegação. Nos documentos HTML temos as listas ordenadas, as listas desordenadas e as listas por definição.
<ul>
A tag <ul></ul> é usada para as listas desordenadas ou listas não ordenadas. São marcadas por "bullets" que são normalmente pequenos círculos pretos.
Código:
<ul>
<li>frutas</li>
<li>verduras</li>
<li>arroz</li>
</ul>
Exibição no navegador:
- frutas
- verduras
- arroz
Como pode ver, essa opção pode ser usada para listar uma série de itens mas sem nenhum grau de priorização.
<ol>
Já a tag <ol></ol> é usada para começar uma lista ordenada, que normalmente são ordenadas por números, letras ou algoritmos romanos, por exemplo.
Código:
<ol>
<li>acordar</li>
<li>tomar café da manhã</li>
<li>escovar os dentes</li>
<li>tomar banho</li>
<li>vestir roupa</li>
<li>ir para o trabalho</li>
</ol>
Exibição no navegador:
- acordar
- tomar café da manhã
- escovar os dentes
- tomar banho
- vestir roupa
- ir para o trabalho
A lista ordenada é usada quando se quer enumerar os itens de uma lista, em ordem de prioridade, por exemplo.
<li>
Como você já deve ter notado nos exemplos acima, a tag <li></li> é usada para cada item de uma lista, seja ela uma lista ordenada ou uma lista não ordenada.
Além desses dois tipos de listas, mais comuns, há também a lista de definições. Essa não é uma lista de itens, mas sim uma lista de termos e explicações desses termos. Cada lista de definição começa com a tag <dl>, cada termo começa com a tag <dt> e cada definição começa com a tag <dd>.
A correta utilização das tags semânticas no seu site fará com que ele seja mais acessível e legível, tanto para os usuários, como para os mecanismos de busca.
Links e imagens
Nos primórdios da internet, as páginas eram apenas um amontoado de textos. Um conteúdo pouco atrativo, mas ainda assim revolucionário e muito útil. Pouco tempo depois, começou a possibilidade de incorporar imagens e outros conteúdos interessantes nas páginas da web.
A tag <img> tem uma funcionalidade semelhante a tag de inclusão de links <a>. Isso porque, a imagem não é inserida na sua página, e sim, é criado um link para a imagem de forma que ela apareça como se estivesse mesmo inserida no texto.
<a>
A tag <a></a> é utilizada para inserção de links no seu site. Ao inserir um hiperlink, as pessoas que estiverem a ler o seu conteúdo podem acessar rapidamente as informações que constam em outra página do seu próprio site ou mesmo um conteúdo externo.
Você também pode criar links para que o leitor acesse rapidamente outra seção da página, otimizando a navegação e permitindo que o usuário acesse rapidamente o conteúdo que deseja ler naquele momento.
O hiperlink é um texto, imagem ou ícone em que se pode clicar e ser redirecionado para outra página, conteúdo ou parte do documento. Normalmente os links aparecem em azul ou sublinhados em uma página, mas é possível personalizar.
O texto que consta entre as tags de abertura <a> e fechamento </a> é conhecido como texto âncora. O ideal é que ele possua entre três e cinco palavras e que sejam um "resumo" daquilo que o usuário vai encontrar ao clicar no link.
Exemplo de texto âncora:
<p>Encontre um <a>professor particular de HTML</a> na Superprof.</p>
Exibição:
Encontre um professor particular de HTML na Superprof.
O processo de inclusão de um hiperlink na web é geralmente parecido com o de um editor de texto como o Word, por exemplo. Primeiro você deve copiar a URL que você quer adicionar, destacar o texto âncora, localizar o ícone de hiperlink, geralmente representado por elos de uma corrente 🔗, colar a URL e pressionar enter. Pronto, você já terá incluído o link. A outra opção é sempre usar as tags de abertura e fechamento.
Inserir links no seu site pode trazer várias vantagens. Além de otimizar a navegação, como já dito, ainda melhora a otimização do SEO e valoriza o seu conteúdo.
<img>
As imagens são muito importantes para tornar a sua página da web mais atrativa, para trazer um respiro quando o conteúdo tem muito texto, para ilustrar e exemplificar e tornar a sua homepage mais chamativa.
As imagens possuem direitos autorais, por isso, antes de incluir uma imagem em seu site, você tem de certificar-se que é o dono da imagem, ou que você tem a permissão do autor da imagem para utilizá-la, ou ainda usar uma imagem de domínio público.
As imagens suportadas pelos navegadores podem ter a extensão .jpg, .png, .gif ou ainda outros formatos. Certifique-se de que a imagem inserida está sendo lida corretamente pelos principais navegadores. Para inserir a imagem na web usamos a tag <img> que deve ser usado em conjunto com o atributo source - src. É esse segundo que aponta o caminho para a imagem que deseja incorporar.
É importante que a sua imagem tenha um nome de arquivo descritivo, pois os mecanismos de burca da internet também leem nomes de arquivos para o SEO.
Sempre que inserir uma imagem, não se esqueça de incluir o texto alternativo (atributo alt). Ele deve ser uma descrição textual da imagem, que será usada em situações que a imagem não pode ser exibida, quando a conexão está lenta ou quando a página leva muito tempo para ler a imagem. Além disso, o texto alternativo é útil para quando o usuário é deficiente visual e utiliza um leitor de tela para ler o conteúdo da página.
Formulários e controles de formulários
Superadas as tags mais básicas que já detalhamos, é hora de partir para estruturas mais complexas do HTML. Os formulários, quando bem estruturados, podem ajudar que seu site seja ainda mais acessível e interativo.
Através de formulários, você pode coletar dados dos leitores, recolher impressões, fazer pesquisas de opinião e muito mais.
<form>
O elemento <form> define um formulário no HTML, e há ainda uma série de atributos que vão definir a forma como esse formulário se comporta. Todo o conteúdo do formulário vai estar dentro dessa tag <form></form>.
Atributo action: define o local ao qual serão envidos os dados coletados através de uma URL
Atributo method: define o método HTTP que o formulário irá lidar (GET ou POST)
Ainda dentro dos formulários HTML, existem diversos elementos que vão compor o formulário. Entenda quando usar cada um deles.
Fique por dentro de todas as novidades do HTML5.
<input>
Essa tag define ou cria campos de entrada de dados. É usada dentro da tag <form> para que os dados coletados sejam processados e encontrados em outro documento. Essa é uma das poucas tags do HTML que não possuem fechamento. Dentro da tag input, temos uma série de tipologia de entrada de dados, como por exemplo: button, checkbox, data, arquivo, password, texto e outras.
<button>
Essa tag define um botão genérico. É normalmente a última seção de um formulário, contendo apenas um botão de submeter os dados, por exemplo.
<select>
Essa tag define uma lista selecionável, também chamada de drop-down ou um menu de opções. Também é usada dentro de uma tag <form>.
Listamos aqui algumas tags básicas, e outras nem tão básicas assim. Para compreender em detalhe cada uma dessas funcionalidades do HTML, você pode agendar uma aula particular com um professor de HTML disponível na plataforma da Superprof.
Gostou desse artigo? Deixe uma nota!
Loading...
