Exemplos: Introdução ao HTML
Anatomia de uma tag
Clique em cada parte da tag para ver o que ela significa:
<p class="destaque">Olá, mundo!</p>
A tag define o TIPO do elemento. Aqui, "p" diz ao navegador que isto é um parágrafo.
Atributos ao vivo
Altere os atributos do link e veja o código e a explicação mudarem:
target="_self" → abre na MESMA aba (padrão)
<a href="https://developer.mozilla.org" target="_self">Documentação MDN</a>Por que rel="noopener"?
Quando target="_blank" abre uma nova aba, a página aberta ganha acesso (via window.opener) à aba original: um risco de segurança conhecido como tabnabbing. rel="noopener" bloqueia esse acesso; noreferrer também esconde a URL de origem.
Árvore de elementos
Clique em qualquer tag para ver seus pais, filhos e irmãos:
<html>
<head>
<title>
<meta />
<body>
<header>
<nav>
<main>
<section>
<p>
<img />
Selecionado: <section>
Pai: <main>
Irmãos: nenhum
Filhos: <p>, <img>