O elemento <p> é responsável por definir o início de um parágrafo, deixando uma quebra de linha entre cada parágrafo. A dica é utilizar um HTML semântico, ou seja, utilizar a marcação
apenas em parágrafos, não utilize p em títulos, listas, imagens etc.. A fim de ter como resultado uma quebra de linha.
E sempre feche a marcação com elemento </p>, por mais que funcione sem o fechamento vamos aderir práticas de desenvolvimento padronizado.
O elemento <br /> faz uma quebra de linha sem acrescentar espaço extra entre as linhas.Veja a diferença do uso de <p> e <br /> ,nos exemplos a seguir:
<html> <body> <h1>Utilizando parágrafo</h1> <p>Vamos separar esta parágrafo com a marcação p.</p> <p>Confira a diferença de espaçamento</p> </body> </html>
<html> <body> <h1>Utilizando quebra de linha br</h1> É notável a diferença quando separamos duas linhas utilizando<br /> a marcação de quebra de linha<br /> É notável a diferença quando separamos duas linhas utilizando<br /> a marcação de quebra de linha<br /> Deu pra notar? </body> </html>
Confira abaixo os respectivos resultados:
Vamos separar esta parágrafo com a marcação p.
Confira a diferença de espaçamento
Novamente em se tratar de padrões sabemos que todas as tags devem ser fechadas, mas o elemento <br /> não tem tag de fechamento, por isso que terminamos o próprio elemento com uma barra. Funciona se utilizarmos apenas <br>, mas por questões de padrões vamos sempre utilizar assim <br />.