HIPERLINKS (LINKS) - <a>

Os hiperlinks permitem que o usuário navegue de um documento para outro.
O hiperlink (ou link) é um elemento clicável que aponta para um destino, definido pelo atributo href. Esse destino pode ser uma página, um arquivo, uma seção do próprio site, um e-mail ou qualquer recurso acessível na web.
O link é definido pela tag <a>, exemplo:


                    <a atributo="valor"> conteúdo </a>
                    <a href="link.html"> Link Interno </a>
                    <a href="https://www.link.com/"> Link Externo </a>

URLs ABSOLUTA E URLs RELATIVA

Quando você escreve um href, você está dizendo ao navegador como chegar a um recurso.
Existem dois modos mentais de fazer isso:

URL ABSOLUTA

Um URL absoluto é um endereço completo da internet que contém o URL completo e que inclui o protocolo (https://):


                    <a href="https://www.bibliotecadasalmas.com/ensino-tecnologico/html/hiperlinks.html">Hiperlinks</a>

URL RELATIVA

É um link local, direcionado para uma página dentro do mesmo site. São mais seguro e confiavel.


                    <a href="/ensino-tecnologico/html/hiperlinks.html">Hiperlinks</a>

ATRIBUTOS E VALORES DA TAG <a>


                    <a href="https://www.bibliotecadasalmas.com/" target="_blank" rel="noopener noreferrer"> Visite A Biblioteca Das Almas </a>

Para usar uma imagem como link, basta colocar a tag <img> dentro da tag <a>:


                    <a href="URL do link"><img src="URL da imagem" alt="descrição" width:"50" height:"50"></a>

Utilize o valor mailto: com o e-mail no atributo href para criar um link que abra o programa de e-mail do usuário (para que ele possa enviar um novo e-mail):


                    <a href="mailto:[email protected]">Enviar Email</a>

*Para colocar um botão, é indicado utilizar as CSS ou JavaScript.

O atributo title ou abbr title especifica informações adicionais sobre um elemento. Essas informações geralmente são exibidas como um texto de dica quando o mouse passa sobre o elemento.


                    <a href="URL" title="descrição">texto</a>
                

                    <a href="URL" title="Entre em contato com a nossa equipe">Contato</a>
                    <a href="URL" title="Baixar versão em PDF">Download</a>
                

                    <abbr title="HyperText Markup Language"> HTML </abbr>
                    <abbr title="Cascading Style Sheets"> CSS </abbr>

Um link é exibido em uma cor diferente dependendo se não foi visitado, foi visitado ou está ativo.
Por padrão, um link aparecerá assim (em todos os navegadores):

Observação:

Os links HTML podem ser usados para criar marcadores, permitindo que os leitores acessem partes especificas de uma página da web.

a) Você marca pontos da página com id:


                    <h2 id="capitulo-html">HTML</h2>

b) E cria links apontando para esse id:


                    <a href="/pastas/site.html#capitulo-html">HTML>/a>
                    <a href="#capitulo-html">HTML>/a>

*O #capitulo-html não é um arquivo, é um endereço interno da página.

Tudo acontece dentro da mesma página HTML.

Um link mal construído pode abrir portas para ataques, principalmente quando envolve:

*Leve em consideração que o estudo referente a segurança de link:

Quando um link, criado, pode ser perigoso?

- "Quando se é utilizado apenas target="_blank"." Exemplo:


                    <a href="https://exemplo.com" target="_blank"> Visitar </a>

Se você click em um link que abre um site externo, sem a devida proteção, o site externo pode:

Isso se chama Reverse Tabnabbing.

A proteção obrigatória: rel="noopener noreferrer"

Sempre que for usado o target="_blank", use o rel="noopener noreferrer". Isso elimina o risco de Reverse Tabnabbing.


                    <a href="https://exemplo.com" target="_blank" rel="noopener noreferrer"> Visitar </a>

*O atributo rel não é moda, não é detalhe — é parte da segurança estrutural do HTML moderno.

Quando um link é realmente perigoso?

A) Quando é utilizado no código: href="javascript:..."
Isso é uma brecha enorme. É como se tivesse escrevendo em letra de neon: AQUI O MEU CÓDIGO É VULNERÁVEL, ME INVADA!!!.


                    <a href="javascript:alert('teste')"> Clique </a>

Isso permite execução de scripts, abrindo portas para XSS, nunca use.

B) Links montados por usuários (comentários, inputs, etc.)
Se em algum momento futuro o seu site permitir que usuários enviem conteúdo, links precisam ser sanitizados.
Mas isso é problema para o back-end.

Estrutura mental e prática da segurança

Segurança em HTML não é “colar atributos”, é pensar como alguém quer tentar quebrar seu site. Se você só escreve HTML bonito e deixa o resto “para depois”, você está construindo uma fachada, não uma casa.

1) Entenda o limite do HTML (erro comum):

O HTML não protege nada sozinho.
O HTML organiza, exibe e orienta o navegador. Segurança real vem da combinação:

*Se você acha que “bloquear algo no HTML” impede ataques, essa crença já te enfraquece.

2) Princípios fundamentais (antes de qualquer tag):

Princípio da desconfiança:

Princípio do mínimo necessário:

3) Estrutura mínima de um HTML seguro:


                    <!DOCTYPE html>
                    <html lang="pt-BR">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">

                            <!-- Segurança -->
                            <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
                            <meta http-equiv="Referrer-Policy" content="no-referrer">
                            <meta http-equiv="X-Content-Type-Options" content="nosniff">

                            <title> Site Seguro </title>
                        </head>
                        <body>
                        </body>
                    </html>

*Mesmo em HTML puro, você já define limites.

Ⅰ) <meta http-equiv="Content-Security-Policy" content="default-src 'self';">

O que faz:
Define uma política de segurança de conteúdo (CSP).
Essa linha diz: - “Este site só pode carregar recursos da própria origem.”
Ou seja:

O que isso bloqueia na prática

Por que isso é poderoso
Mesmo que alguém consiga injetar um <script>:

*É uma defesa ativa, não estética.

O custo que quase ninguém menciona
Com essa política:

Ou seja: segurança máxima = liberdade mínima

Ⅱ) <meta http-equiv="Referrer-Policy" content="no-referrer">

O que faz?
Impede que o navegador envie o endereço da sua página ao acessar links externos.
Sem isso:

O que você está protegendo?

Exemplo prático:

                            
                                https://siteexterno.com
                                ← recebe →
                                https://seusite.com/aula/html/seguranca?aluno=123
                            
                        
                            
                                siteexterno.com
                                ← recebe →
                                (nada)

Custo real

Ⅲ) <meta http-equiv="X-Content-Type-Options" content="nosniff">

O que faz?
Impede que o navegador “adivinhe” o tipo de arquivo.
Sem isso:

Com nosniff: “Confie apenas no Content-Type declarado.”

Ataque que isso bloqueia?

Onde isso é crucial?

4) Formulários

Erro comum
- “Coloquei required e pattern, então está seguro.”
Não está!

HTML ajuda, mas não valida


                        <input type="email" required autocomplete="off">

O HTML:

A validação real acontece:

*Se você confia só no HTML, você está pedindo para ser explorado.

5) Nunca exponha lógica sensível no HTML

Jamais exponha:

Mesmo:

                        
                            <!-- comentário escondido -->
                            <!-- endpoint secreto -->

HTML é público por definição.
Se está no HTML: O atacante já leu.

6) JavaScript + HTML: separação é segurança

Misturar tudo (errado):


                        <button onclick="fazAlgoPerigoso()">Enviar</button>

Estrutura correta:

                        
                            <button id="enviar">Enviar</button>
                            <script src="app.js"></script>

Por quê?

7) Content Security Policy (CSP) — seu escudo invisível

Exemplo básico:


                        <meta http-equiv="Content-Security-Policy" content="default-src 'self';script-src 'self';style-src 'self';img-src 'self';">

Isso impede:

*Se você não usa CSP, você está andando sem cinto.

8) HTTPS não é opcional

Mesmo em HTML puro:

Segurança começa antes do HTML chegar ao navegador.

9) Mentalidade final (a parte que mais importa)

Pergunte sempre:

Se você realmente acredita em código limpo e compreensível, então:

*Caso contrário, você não está escrevendo código — está adiando problemas.