HTML - Tags Básicas
Tags Básicas Comuns
Títulos
O HTML tem seis níveis de títulos, de <h1> a <h6>, para estruturar o conteúdo de uma página web. A tag <h1> é o título principal, enquanto <h6> é o menor subtítulo. Cada nível de título tem um estilo e importância diferentes. O uso de títulos ajuda a criar uma estrutura clara para o seu conteúdo, facilitando a compreensão da organização da sua página web pelos leitores.
Parágrafos
A tag <p> define parágrafos de texto em HTML. É um elemento de nível de bloco, o que significa que os navegadores adicionam algum espaço vertical antes e depois de cada elemento <p>. Os parágrafos organizam e separam blocos de texto, tornando seu conteúdo mais legível. Use a tag <p> para agrupar sentenças ou ideias relacionadas, criando um fluxo lógico de informações.
Exemplo: Código HTML para um parágrafo com espaços extras
<p>This is a paragraph with extra spaces.</p>Quando um navegador renderiza este código, ele exibirá o texto como:
Exemplo: Texto renderizado para um parágrafo com espaços extras
This is a paragraph with extra spaces.
Links
A tag <a>, abreviação de "âncora", cria hiperlinks para outras páginas web ou recursos. O atributo href dentro da tag <a> especifica a URL de destino ou o caminho para o recurso vinculado. Os links podem ser aplicados a texto, imagens ou outros elementos HTML, permitindo que os usuários naveguem entre diferentes páginas ou acessem informações adicionais. Ao criar links, use texto claro e descritivo para indicar o propósito ou destino do link.
Imagens
A tag <img> incorpora imagens em páginas web. É uma tag de fechamento automático, ou seja, não precisa de uma tag de fechamento separada. O atributo src especifica o caminho ou URL do arquivo de imagem, enquanto o atributo alt fornece texto alternativo para acessibilidade e otimização de mecanismos de busca. O texto alternativo descreve o conteúdo da imagem e é exibido quando a imagem não pode ser carregada ou quando um usuário está usando tecnologias assistivas, como leitores de tela.
Listas
O HTML tem dois tipos de listas:
| Tipo de Lista | Tag | Descrição |
|---|---|---|
| Não ordenada | <ul> |
Usada quando a ordem dos itens não é importante, geralmente exibida com marcadores |
| Ordenada | <ol> |
Usada quando a ordem dos itens importa, exibida com marcadores numerados |
Cada item dentro de uma lista é representado pela tag <li> (item de lista). As listas são úteis para apresentar uma série de itens relacionados ou etapas de forma estruturada.
Ênfase e Ênfase Forte
Para adicionar ênfase a palavras ou frases dentro do seu texto, você pode usar as tags <em> e <strong>. A tag <em> indica ênfase e geralmente é renderizada como texto em itálico pelos navegadores. Ela transmite uma mudança no significado ou tom do conteúdo enfatizado. A tag <strong> indica ênfase forte e geralmente é renderizada como texto em negrito. Ela implica maior importância em comparação com o texto ao redor. Use essas tags com moderação para destacar pontos-chave ou chamar atenção para partes específicas do seu conteúdo.
Exemplo: Código HTML com tags incompatíveis
<p>This is a paragraph.</div>Neste caso, a tag de abertura <p> é fechada com uma tag </div>, o que está incorreto. A maneira correta de fechar o parágrafo é:
Exemplo: Código HTML corrigido para um parágrafo
<p>This is a paragraph.</p>