Tags de Estrutura, de Texto e Formatação, Links e Imagens
Tags de estrutura e sua Função:
<header> Cabeçalho da página ou seção
<nav> Navegação (menu)
<main> Conteúdo principal da página
<section> Seção genérica de conteúdo
<article> Conteúdo independente (ex: post de blog)
<aside> Conteúdo secundário (ex: barra lateral)
<footer> Rodapé da página
<div> Container genérico
<span> Elemento em linha genérico
Tags de texto e formatação e sua Função:
<h1> a <h6> Títulos: do maior(h1) ao menor(h6)
<p> Parágrafo
<br> Quebra de linha
<strong> Texto em negrito (semântico)
<em> Texto em itálico (ênfase)
<mark> Texto destacado (marcado)
<small> Texto menor
<blockquote> Citação longa
<code> Texto com formatação de código
<pre> Texto pré-formatado
Tags de Links e Imagem e sua Função:
<a href="paginahtml"> Link clicável (esta tag não precisa do elento /a indicando seu final)
<img src="..." alt="..."> Imagem (esta tag também não precisa de elemento que marca seu final. Não existe </img>)
<figure> e <figcaption> Imagem com legenda - vale o mesmo da anterior sobre o elemento final
Por que não se pode colocar certas tags dentro de <p>?
A tag <p> é um elemento de bloco que não pode conter outros elementos de bloco, como:
<div>, <h1>, <section>, <ul>, >table<, etc.
Esses elementos quebram a estrutura do parágrafo e causam comportamento inesperado no navegador.
O que você pode colocar dentro de <p>:
Apenas elementos em linha (inline), como:
<a> - link
<strong> - negrito semântico
<em> - itálico semântico
<span> - container em linha
<img> imagem (sim, imagem é inline!)
<mark>, <abbr>, <code>, <br>, etc
Veja abaixo um exemplo de uso correto e incorreto:
Construindo um site