73

Eu vejo cada um usando de um jeito, eu mesmo vario a forma em alguns momentos e todos funcionam, mas qual é o certo? Depende de versão do HTML ou do browser?

2

7 Respostas 7

60
+100

O HTML sempre utilizou <br> somente e - de um modo mais geral - <tag> e pronto sempre que um elemento é considerado "vazio" (i.e. que não pode receber sub-elementos). Entretanto, com o advento do XHTML (uma tentativa de se unir HTML e XML em um dialeto unificado) algumas pessoas foram encorajadas a sempre "fechar" os elementos vazios utilizando uma barra ao final - <br/> ou <br />, já que o espaço em branco é livre dentro da tag. Os parsers passaram a aceitar esse formato em certa medida, e o HTML5 padronizou o comportamento das tags void, de modo que pode-se usar um ou outro e ainda estar dentro dos padrões.

(Esclarecendo: desde que a semântica dos elementos vazios/estrangeiros esteja bem clara na sua cabeça, e você não cometa o erro de tentar fechar uma tag não-vazia dessa forma - ex.: <textarea/> - o uso de um ou outro formato torna-se somente uma questão de estilo, subjetiva por assim dizer.)

Entretanto, há uma pequena diferença entre o uso de uma tag de auto-fechamento no HTML e no XML (incluindo XHTML): Se você escreve <tag/>, e tag é considerada uma tag "vazia" (void) um parser de HTML em conformidade com os padrões interpretará isso como sendo simplesmente <tag> (i.e. ele joga fora a barra), enquanto um parser de XML tratará isso de forma semanticamente equivalente a <tag></tag>. Por outro lado, se tag for um elemento estrangeiro (por exemplo um SVG ou MathML embutido no HTML) então ambos interpretarão como <tag></tag>. Se não é nem vazio nem estrangeiro, o comportamento é indefinido (e é aí que mora o perigo).

No caso do br isso faz pouca diferença, pois pelo menos eu nunca vi ninguém tentando escrever <br></br>... Mas em outras tags pode fazer. Experimente salvar o texto abaixo num arquivo teste.html:

<div>
    Teste
    <div/>
    Teste
</div>

...abri-lo, e inspecionar seu conteúdo no navegador. Provavelmente, você verá algo assim (ex.: Chrome):

<html>
    <head></head>
    <body>
        <div>
            Teste
            <div>
                Teste
            </div>
        </div>
    </body>
</html>

Enquanto se você salvar esse mesmo arquivo como teste.xhtml, o conteúdo exibido [ao inspecioná-lo] será este:

<div>
    Teste
    <div><div/>
    Teste
</div>

o que aconteceu? No caso do HTML, como descrito, a barra foi jogada fora, de modo que o que o parser encontrou foi o seguinte (indentado para melhor visualização):

<div>
    Teste
    <div>
        Teste
    </div>

E pela sua "permissividade" (i.e. robustez diante de conteúdo mal-formado - no caso, uma tag div aberta mas não fechada [do ponto de vista do parser]), ele acrescentou um </div> no final. Cabe notar que esse código apresentado não é considerado HTML válido, mas o fato do browser não "reclamar" pode levar alguém a pensar que está ok usar tags de auto-fechamento em qualquer elemento - tal como no XML - e isso não é verdade.

No caso do br, entretanto, não há diferença prática, pois como já foi dito ele é considerado um elemento vazio pela especificação do HTML, de modo que ele nunca será interpretado como tendo um conteúdo. Esteja a barra final presente ou não, o elemento acaba ali mesmo, e pronto.

3
  • 3
    P.S. Acabo de me lembrar onde, no passado, esse equívoco já me "mordeu" muito: JAMAIS escrevam <textarea/> quando quiserem uma área de texto inicialmente vazia! <input/> pode, mas <textarea/> não. O browser vai te ferrar do jeito mais inesperado/inexplicável possível...
    – mgibsonbr
    10/01/2015 às 21:45
  • A forma pode ser inesperada mas o motivo não, ao contrário do <input>, o <textarea> não é auto-terminante mesmo e terminá-lo na mesma tag deveria criar um problema, ainda que previsível. Se tivesse um pouco mais de informações a sua resposta seria bem interessante para aceitar.
    – Maniero
    15/01/2015 às 17:19
  • Eu me refiro a esperar (erroneamente) que um <textarea/> seja interpretado como <textarea></textarea>, como no XML. Eu tinha essa expectativa, antes de descobrir sobre as tags void, o que me trouxe muita dor-de-cabeça. Quanto à resposta, vou dar uma melhorada nela.
    – mgibsonbr
    15/01/2015 às 18:35
24

<br/> e <br /> são essencialmente a mesma coisa. O espaço costuma ser usado para facilitar a identificação visual da barra e é recomendado, mas não obrigado, pela especificação do XHTML.

Se você está usando a especificação de XHTML esta é a forma correta de utilizar a tag. Qualquer browser que eu conheço aceita HTML ou XHTML mal formado independente de determinação de estar usando XHTML. Na prática você usa se quiser.

Ninguém que eu conheça usa de fato XHTML conscientemente. É uma especificação morta. E algumas pessoas consideram até algo que não deveria ser usado.

Não tem problema algum usá-lo, se você se sente mais confortável para identificar melhor que a tag é auto-terminante, use. Se achar que por alguma razão qualquer que o código deva ser compatível com XHTML, use sempre.

Conheço algumas pessoas que preferem esta forma para uso com ferramentas que só entendem ela.

HTML nunca exigiu isto e HTML5 explicitamente deixa o uso da barra como opcional apenas para efeito visual. Claro que ele impede o uso em tags que precisam de um terminador.

Note que os exemplos oficiais de HTML5 nunca usam a barra. Estritamente pensando na intenção original do HTML a barra não deve ser usada.

Como sempre é importante manter um padrão. Ou nunca use, ou use sempre. Mas não se preocupe se está certo ou errado, se mistura com códigos legados.

Obviamente o mesmo vale para outras tags que são auto-terminantes.

Documentação da <br>. Documentação de elementos void.

Há alguma dúvida sobre o que significa o <br> e a especificação não diz nada sobre o nome ser uma coisa ou outra por extenso. Eu vi muita coisa em português dizendo que é break row, mas quase não existe essa referência em inglês, então acho que é invenção de brasileiro e é só break mesmo, inclusive row não é a tradução de linha no sentido que é usado em uma página. Até que alguém me mostre algo canônico que diga que não é isso eu fico com break, ainda que seja bem pouco relevante, não ajuda entender melhor o conceito se souber se é uma coisa ou outra.

Coloquei no GitHub para referência futura.

2
  • Aproveitando a deixa, poderia também explicar o uso de inputs com a `\` de fechamento, eu particularmente não uso, mas já vi gente usando e nunca entendi se realmente há necessidade 9/01/2015 às 16:35
  • Você quer saber se deve usar barra no <input>. Dá uma olhada no penúltimo parágrafo da resposta.
    – Maniero
    9/01/2015 às 16:48
18

Isto é um comentário à resposta do Maniero, mas ficou grande demais para caber em um comentário. A resposta dele é absolutamente correta para hoje, mas não explica por que existe essa confusão entre as formas. Ele diz:

Qualquer browser que eu conheço aceita HTML ou XHTML mal formado independente de determinação de estar usando XHTML.

Isso em geral é verdade. É verdade se o documento estiver sendo servido como texto. Porém, durante um tempo diziam que todo XML, incluindo documentos XHTML, deveria ser servido com o MIME-type adequado – no caso do XHTML, seria application/xhtml+xml. Quando servido assim, o browser valida o documento como XML, e reclama se encontrar qualquer erro de sintaxe, exibindo uma mensagem de erro em vez da página. Na época em que começaram a defender essa ideia, apenas o Firefox fazia isso direito, se não me falha a memória. O fato é que isso não colou, XHTML morreu, e o HTML5 veio para simplificar as coisas. Ou seja, tente se desapegar dos velhos hábitos, e use o doctype do HTML5, e simplesmente <br> (apesar de as variantes com a barra no final também serem válidas).

13

(O título original da pergunta me pareceu uma questão entre dois formatos - <br></br> e <br />. A resposta a seguir leva em consideração esta premissa.)

<br></br> é uma sequência inválida, já que o elemento <br> é um elemento vazio (void element, em inglês).

Um elemento vazio é qualquer elemento que não pode, por definição, possuir qualquer conteúdo entre as tags de início e fim; a única maneira de um elemento vazio possuir dados é via atributos.

Assim sendo, o único formato aceitável entre os dois apresentados é <br />.

Fontes:

Void Element Definition, W3C (em inglês)

7
  • 2
    <br></br> causava problemas de renderização em alguns browsers. Acho que acabava interpretado como 2x <br>. Não sei como isso ficou nos browsers atuais.
    – bfavaretto
    9/01/2015 às 17:05
  • @bfavaretto exatamente - se a memória não me falha, toda implementação WebKit realiza o parse de <br></br> como dois elementos separados.
    – OnoSendai
    9/01/2015 às 17:06
  • Ahhhmmm... Pena que está errado. Nem o link que você postou diz isso (tem uns “Optionally” ali). A resposta do bigown está certa.
    – marcus
    9/01/2015 às 17:39
  • 4
    Eu acho que a pergunta na verdade se referia à <br>, <br/> (sem espaço) ou <br /> (com espaço), mas achei bom você ter levantado a questão da tag de fechamento também.
    – Largato
    9/01/2015 às 18:03
  • 2
    Complementando a resposta do @OnoSendai Verifique as url´s do seu site no validator.w3.org Eles são os responsáveis por ditar as regras do html. Esse site verifica a página informada toda, todas as tags html.
    – Luiz
    29/11/2018 às 16:51
4

No meu Visual Studio quando digito <br ele completa automaticamente para <br />, fazendo nos pensar que o certo é <br />. Mas é sabido que em HTML <br> é o adequado, e em XHTML <br />.

É possível mudar a configuração do Visual Studio para parar de completar o <br>,<img>,<hr> e etc com /> , acessando o menu

Tools -> Options -> Text Editor -> HTML -> Advanced-> XHTML coding style = False

Obs.: Isso no Visual Studio 2013

1
  • 3
    Na verdade, em HTML5 a barra é opcional.
    – bfavaretto
    9/01/2015 às 17:43
-1

Em arquivos cuja a extensão é .html pode-se usar os três <br>, <br/> e <br /> de forma interpolada sem causar prejuízos porém quando a extensão é .xhml lembro-me de ser obrigatório a presença da / de fechamento para toda tag logo <br/> e <br /> eram válidos, está comparação pode ser vista em w3schools

3
  • 1
    A extensão pouco difere, o que vale é o mime-type, se o mime-type for application/xhtml+xml no servidor então sim será obrigatório o uso de <?xml ?> e ` />` em tags como <input /> e <br />, .xhtml é só válido para arquivos locais pois o navegador não irá acessar um servidor par a obter o tipo de documento. Nota: w3schools não é uma boa fonte, se for ler sobre HTML e XML leia o w3.org, note que w3schools e w3c não tem ligação, eles só usam o w3 para ganhar notoriedade.
    – Syzoth
    21/04/2015 às 23:14
  • mas já mudei a extensão de .html para .xhtml e o foi retornado um erro pelo browser erro este que pode ser visto nesta imagem: xhtml.com/en/xhtml/serving-xhtml-as-xml
    – Ricardo
    21/04/2015 às 23:28
  • 1
    Amigo foi o que eu disse .xhtml só vale para ARQUIVOS LOCAIS (protocolo file:///), para um servidor você pode passar .html e ainda sim enviar um mime-type dizendo que é application/xhtml+xml.
    – Syzoth
    21/04/2015 às 23:31
-1

Para xhtml o certo é <br/>, e para html o certo é <br>.

Depende do doctype que você usar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .