Semântica e Navegação em HTML

Semântica e Navegação em HTML

Atualmente o papel do HTML não é apenas “organizar visualmente” o documento, mas também descrever o significado do conteúdo por meio de tags semânticas, tornando-o mais claro tanto para programadores, quanto para browsers e outras engines que processam essa informação.

<h1>Título Principal</h1>
<p style="font-size: 32px; font-weight: bold;">Título Principal</p>

No exemplo, a tag h1 não serve apenas para deixar o texto grande. Ela significa: “Este é o título principal da página”. Visualmente, a segunda opção pode parecer igual, mas semanticamente está incorreta.

Com boa semântica temos:

• Acessibilidade - Leitores de tela entendem melhor a estrutura da página e melhoram a navegação.
• SEO (Google) - Motores de busca usam a semântica para entender qual é o assunto principal, o que é título e o que é seção.
• Organização e Manutenção - Código semântico é mais legível, organizado e fácil de manter.

A tag <header> representa o cabeçalho de um documento e <footer> representa o rodapé.

<section> representa uma seção dentro de um documento e geralmente contém um título, sendo utilizada quando não existe um elemento semântico mais específico.

<nav> é utilizado quando precisamos representar um agrupamento de links de navegação. Normalmente esses links são estruturados utilizando <ul>, <li> e <a>.

<main> especifica o conteúdo principal e de maior relevância da página.

Links HTML

Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço (URL).

A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.

Como fazer um link em HTML

No HTML, os links são definidos pela tag <a>. Dentro dessa tag incluímos o atributo href (Hypertext Reference), que é o endereço de destino do link. Dentro do conteúdo da tag <a>, incluímos então o texto ou elemento que servirá como redirecionador, ou seja, que ao ser clicado, executará a função de redirecionar para o endereço dentro do atributo href.

Dessa forma, a sintaxe básica do HTML link é:

<a href="url">Clique aqui</a>

A tag <a> pode ser utilizada dentro ou fora dos demais elementos (tags) do HTML, como no exemplo abaixo onde criamos um parágrafo, e dentro dele, apenas a palavra Google contém um hiperlink para a página inicial do Google:

<p>Link para o site do
<a href="https://google.com">Google</a>
</p>

Como resultado temos:
Link para o site do Google.

O atributo href

O atributo href é utilizado para especificar o endereço de destino do link. Um link pode direcionar para:

• Um endereço completo, como https://google.com, utilizados para páginas de outros domínios, ou seja, externas.
• Um caminho relativo, como /contato.html, que aponta para um arquivo dentro do mesmo site.
• Um elemento interno, como #secao-principal, que aponta para um elemento HTML existente na mesma página.

O atributo target

O atributo target é utilizado para especificar onde o link será aberto. Os valores mais comuns são:

• _self: O link será aberto na mesma aba.
• _blank: O link será aberto em uma nova aba.

<a href="https://google.com" target="_blank">Link para o site do Google</a>

URLs e Caminhos em HTML

Na web, cada recurso possui um endereço chamado URL (Uniform Resource Locator). Uma URL indica onde um recurso está localizado, podendo apontar para páginas HTML, imagens, arquivos ou qualquer outro conteúdo disponível na internet.

Ao criar links ou carregar arquivos em um site, utilizamos esses endereços dentro de atributos como href (em links) ou src (em imagens, scripts e outros recursos).

<a href="https://www.google.com">Ir para o Google</a>

Nesse exemplo, o atributo href contém a URL que indica para onde o navegador deve ir quando o usuário clicar no link.

Estrutura de uma URL

Uma URL completa geralmente possui alguns componentes principais:

• Protocolo – define como o recurso será acessado (ex: http ou https)
• Domínio – o endereço do servidor que hospeda o site
• Caminho – indica a localização específica do recurso dentro do site

https://www.exemplo.com/paginas/sobre.html

Nesse exemplo:

• https é o protocolo
• www.exemplo.com é o domínio
• /paginas/sobre.html é o caminho para o arquivo dentro do site

URLs Absolutas

Uma URL absoluta contém o endereço completo do recurso, incluindo protocolo e domínio. Ela é usada principalmente quando queremos acessar um recurso externo ou um site diferente.

<a href="https://www.wikipedia.org">Acessar Wikipedia</a>

Nesse caso, o navegador sabe exatamente onde encontrar o recurso, pois o endereço completo foi especificado.

URLs Relativas

Uma URL relativa indica o caminho do recurso em relação ao arquivo atual. Ela é muito utilizada em projetos web, pois permite referenciar arquivos dentro do próprio site sem precisar repetir todo o endereço.

Exemplo de estrutura de projeto:

/site
   index.html
   /paginas
       sobre.html
   /imagens
       logo.png
	fundo.jpg

Se estivermos no arquivo index.html, podemos acessar a página sobre.html com o seguinte link:

<a href="paginas/sobre.html">Página Sobre</a>

E podemos carregar uma imagem da pasta imagens assim:

<img src="imagens/logo.png" alt="Logo do site">

Por que usar caminhos relativos?

• Facilitam a organização do projeto
• Evita repetir o domínio em todos os links
• Permitem mover o site para outro domínio sem quebrar os links internos
• Tornam o código mais limpo e fácil de manter

Por esse motivo, em projetos web é comum utilizar URLs absolutas apenas para recursos externos e URLs relativas para recursos internos do próprio site.

Âncoras em HTML

Uma âncora permite criar um link que leva o usuário para uma posição específica dentro da mesma página. Isso é muito útil em páginas longas, como documentações, artigos ou páginas com sumário.

Para criar uma âncora, utilizamos o elemento <a> com o atributo href apontando para um identificador (id) presente na página.

Exemplo de uso

Primeiro criamos um link que aponta para uma seção da página:

<a href="#contato">Ir para a seção de contato</a>

Depois criamos um elemento com o atributo id correspondente:

<h2 id="contato">Seção de Contato</h2>
<p>Aqui estão as informações de contato.</p>

Quando o usuário clicar no link, o navegador irá rolar a página automaticamente até o elemento que possui o id indicado.

Outros Elementos Importantes

Listas de Itens

Listas HTML organizam conteúdos utilizando tags estruturais. A tag <ul> cria listas não ordenadas e <ol> cria listas ordenadas (com números ou letras). Cada item dentro dessas listas é definido pela tag <li>.

Essas estruturas são muito utilizadas em menus de navegação, tutoriais e organização de informações.

Lista não ordenada:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
</ul>

Lista ordenada:

<ol>
	<li>Primeiro passo</li>
	<li>Segundo passo</li>
</ol>

Também é possível colocar uma lista dentro de outra, criando listas aninhadas.

Imagens

Podemos adicionar imagens em uma página utilizando o elemento <img>. O atributo src indica o caminho da imagem e o atributo alt define um texto alternativo que descreve a imagem.

O elemento <figure> é uma marcação semântica utilizada para agrupar uma imagem e sua legenda.

<figure>
	<img src="elephant.jpg" alt="Um elefante na selva" />
	<figcaption>Um elefante na selva</figcaption>
</figure>