Devemos usar tabs ou espaços para indentação em arquivos HTML?

[drianoaz]

Quando comecei a estudar desenvolvimento web, em meados de 2010, fui ensinado que devemos usar tabs para indentar arquivos HTML. Devido a esse fato, continuei codificado assim desde então. Porém, praticamente em todo guia de estilo de código que vejo, é sugerido que usemos espaços ao invés de tabs, como por exemplo no Google HTML/CSS Style Guide. No entanto não é dito o motivo real para utilizarmos tal padrão. A grande pergunta é: por quê?! Há alguma diferença real na escolha entre tabs ou aspas, ou é apenas gosto pessoal?

[kivervinicius]

Geralmente é um guia que deve ser firmado na equipe para não haver os dois tipos, a vantagem do espaço que ele sempre terá o mesmo tamanho em qualquer editor que você abrir, já tabs podem variar o tamanho da tabulação muitas vezes atrapalhando na leitura. Mas de qualquer forma no final é questão de gosto pessoal ou normativa da empresa onde trabalha.

Edit: A maioria dos editores possuem configuração de "tabs to spaces" ou vice-versa onde ao pressionar a tecla tab converte para a quantidade de espaços definida, geralmente sendo 2 ou 4 espaços.

[n3pu]

No teu editor deve haver uma opção do tamanho da indentação. Ai vc usa tab mas, dependendo da configuração, vai ficar espaços. Atualmente uso indentação de 2 espaços pois quanto maior a estrutura mais afastado fica e dependendo da escolha fica melhor de ver. Mas isso vai de cada um ou de cada equipe, pois basicamente vai ser minificado, não importando os espaços. Vale fazer o teste com seu editor.

[luizbills]

Eu recomendo você seguir um padrão que mais te agradar. Tanto tab quanto espaço não fazem diferença hoje em dia pois você pode regular a largura da sua tab. Assim você pode usar tab, mas configurar para ter largura de 2 caracteres (por exemplo), ficando igual a 2 espaços. Mas como já citaram, espaço vai sempre ficar igual.

Uma vez também vi alguns indicando assim: use tab para indentação e espaço para alinhamento. (que é o que eu atualmente faço)

exemplo:

/* indentação com tab*/
body {
	/* propriedades alinhadas com espaços */
	color:      #333;
	font-size:  .9rem;
}

[dulcetti]

@Adriano-Azevedo O recomendado é espaço por ele ser único, ter o mesmo tamanho sempre. Tabs podem variar, não somente por um Editor/IDE, mas principalmente por Sistema Operacional. Lembro quando abria PR de alguém que fez algo no Windows e eu abria no Linux e dava uns problemas.

Eu usava tabs antigamente por serem menores, mas hoje em dia com uglify e afins, isso indifere. Portanto, recomendo espaços.

Mas claro, isso vai de acordo com a empresa ou projeto que você vá participar ;)

[ninetails]

O ideal é utilizar um styleguide de mercado, pq aí quem pegar seu código já tem um padrão a seguir. Não sendo possível, o da empresa.

Agora, pessoalmente: antes eu gostava de tabs, por diminuir a quantidade de caracteres pro navegador, mas hoje dá pra minificar js, html e css, não há mais necessidade de se economizar bytes nisso se seu código vai ser compilado/transpilado e minificado.

Acho que os standards por ae pra JS é 2 espaços, aí eu acabo tomando para todos os arquivos, mesmo os que não forem minificados (HTML). Recomendo botar um .editorconfig por projeto que aí fica perfeito.

Respondendo o "por que?!": Padrão é um dos porquês. E para linguagens não estruturadas por identação (ou mesmo elas), é ideal que tenha um padrão para que facilite a todos envolvidos na manutenção do código, além de um senso de unidade.

TL;DR espaços. 2 no geral, 4 pra PHP.

[mahenrique94]

Costumo e gosto de utilizar identação com "tab to space", onde o tab é convertido para espaços, e prefiro utilizar 4 espaços no geral.

[gabrieldarezzo]

Independente da escolha é bacana documentar na raiz do projeto usando esse carinha:
http://editorconfig.org/

Alguns styleGuides famosos usam o espaço:
https://github.com/airbnb/javascript/blob/master/.editorconfig
https://github.com/standard/standard/blob/master/.editorconfig

Importante mesmo é não fazer uma salada, se escolheu espaço ou tab, manter o padrão.

[felipefialho]

É bem pessoal, mas uso 2 espaços (para JavaScript e CSS também) a bastante tempo.
O código fica muito mais enxuto e melhor "desenhado".

Quando comecei a usar dessa forma (bons 5 anos atrás) achei estranho, dava a impressão da legibilidade ter diminuido, mas foi só questão de acostumar.

[kvnol]

Sim, mesma opinião do amigo @lfeh. Uso 2 espaços há uns 2/3 anos também e é coisa linda.

[saturnogallo]

Uso 2 espaços.

[willycamargo]

Esse artigo é bem interessante para analisar essa questão:

https://stackoverflow.blog/2017/06/15/developers-use-spaces-make-money-use-tabs/

Obs: para quem tem preguiça de ler, antes que tirem conclusões apenas com o título: É clickbait. A relação entre "salário x usar espaço" é apenas uma brincadeira e a análise é melhor fundamentada no texto.

---

Concordo com @ninetails de que colocar um .editorconfig no projeto é essencial. Ainda vou além com a configuração de regra para eslint e prettier. Forçando todos os desenvolvedores que trabalharem no projeto seguirem o mesmo padrão, seja ele qual for.

[stivyw]

Eu sempre sigo o que o time usa, mas....
Sonho num dia em que sempre fosse utilizado tabs, pois hj praticamente tudo tem config para tamanho de tabs. (Até o github tem)
Dessa forma, por ser configurável, o dev poderia optar sem mudar o código pelo tamanho dos espaçamentos.
Coisa que não conseguimos caso o dev use por exemplo, 4 espaços. Nunca poderemos configurar para ele ser de tamanho 2 sem mexer no código.
Mas, cada projeto é uma peculiaridade, cada time é um ou outro.

[dailyjotting]

It’s important for teams to establish a consistent coding style to avoid mixing indentation types. Using spaces is beneficial because it ensures uniformity across different editors, whereas tabs can display inconsistently, potentially hindering readability. Ultimately, it comes down to personal preference or the standards set by your company.

Most editors offer a configuration to convert tabs to spaces, allowing the Tab key to insert a defined number of spaces, typically 2 or 4. This flexibility can help maintain consistency while accommodating individual preferences.

Daily Jotting Updates