Como a pergunta indica, se eu tenho algum texto que desejo adicionar ao HTML, quando devo usar <p>e quando devo usar <span>?
Respostas:
Você deve ter em mente que o objetivo do HTML é DESCREVER o conteúdo que contém.
Portanto, se você deseja transmitir um parágrafo, faça-o.
Porém, sua comparação não está exatamente correta. A comparação mais direta seria
Quando usar um em
<div>vez de um<p>?
como ambos são elementos de nível de bloco.
A <span>é embutido, bem como uma âncora ( <a>), <strong>ênfase ( <em>), etc., então tenha em mente que por sua natureza padrão tanto em html quanto na escrita natural, um parágrafo causará uma quebra antes e depois de si mesmo, como um <div>.
Às vezes, ao estilizar coisas - coisas inline - a <span>é ótimo para dar a você algo para "enganchar" o CSS, mas de outra forma é uma tag vazia sem significado semântico ou estilístico.
pativada span. No parágrafo, o preenchimento afeta todas as linhas (bloco de texto), enquanto que na extensão afeta apenas a primeira linha.
A <p>tag é um pgráfico e, como tal, é um elemento de bloco (como está, por exemplo, h1e div), enquanto spané um elemento embutido (como, por exemplo, be a)
Os elementos de bloco por padrão criam alguns espaços em branco acima e abaixo de si mesmos, e nada pode ser alinhado próximo a eles, a menos que você defina um floatatributo para eles.
Os elementos embutidos lidam com extensões de texto dentro de um parágrafo. Eles normalmente não têm margens e, como tal, você não pode, por exemplo, definir um widthpara ele.
Span é totalmente não semântico. Não tem sentido e serve apenas como elemento para efeitos cosméticos.
Os parágrafos têm significado semântico - eles dizem a uma máquina (como um navegador ou um leitor de tela) que o conteúdo que encapsulam é um bloco de texto e tem o mesmo significado que um parágrafo de texto em um livro.
Semanticamente falando, ap é uma tag de parágrafo e deve ser usada para formatar um parágrafo de texto. Uma extensão é uma alteração de formatação embutida que não é tratada semanticamente.
Uma extensão é um elemento de formatação embutido que NÃO possui uma alimentação de linha acima ou abaixo.
A p é um elemento de bloco que TEM uma alimentação de linha implícita acima e abaixo.
Uma explicação prática: Por padrão, <p> </p>adicionará quebras de linha antes e depois do texto incluído (para criar um parágrafo). <span>não faz isso, é por isso que é chamado de inline .
A tag p denota um elemento de parágrafo. Tem margens / preenchimento aplicados a ele. Um span é uma tag embutida sem estilo. Uma diferença importante é que p é um elemento de bloco quando span está em linha, o que significa que <p>Hi</p><p>There</p>apareceria em linhas diferentes quando se <span>Hi</span><span>There</span>encerrasse lado a lado.
tag é um elemento de nível de bloco, mas tag é elemento embutido. Normalmente usamos a tag span para estilizar dentro dos elementos do bloco. mas você não precisa usar a tag span para o estilo embutido. você tem que fazer é; converter elemento de bloco em elemento embutido usando "display: embutido"
ppode não necessariamente ser estilizado com quebras de linha ao redor, por exemplo, ele pode ser seguido por um símbolo de pilcrow embutido . Os termos "inline" e "bloquear" também não significam nada para usuários cegos. Em vez disso, faça a distinção entre o conteúdo do fluxo e o conteúdo do fraseado (consulte este link ).