9 erros que você não deve cometer ao criar uma página da Web

Propaganda

Criar uma página da web com HTML e CSS é bem direto Como Fazer um Site: Para IniciantesHoje vou orientá-lo no processo de criar um site completo do zero. Não se preocupe se isso parecer difícil. Vou guiá-lo através dele a cada passo do caminho. consulte Mais informação . Mas é fácil cometer erros, e há algumas coisas em que você pode não pensar. Na maioria das vezes, esses pequenos erros não fazem muita diferença.

Mas, a longo prazo, eles podem tornar sua vida mais difícil. Esses nove erros são fáceis de cometer, mas se você os desviar mais cedo ou mais tarde, sua página ficará melhor, mais fácil de manter e funcionará como você deseja.

1. Estilo em linha

Uma das grandes coisas sobre HTML e CSS é que você pode formatar qualquer linha de texto - qualquer palavra, realmente - sempre que quiser. Mas isso não significa que você deve aproveitar esse recurso.

Veja um exemplo de estilo embutido que você pode usar para aumentar um parágrafo que os parágrafos ao redor e destacá-lo em uma cor diferente:

Seu texto aqui.

Isso dá ao parágrafo um Estilo CSS Aprenda HTML e CSS com estes tutoriais passo a passoCurioso sobre HTML, CSS e JavaScript? Se você acha que tem talento para aprender a criar sites do zero - aqui estão alguns ótimos tutoriais passo a passo que vale a pena tentar. consulte Mais informação isso termina com a conclusão do parágrafo. Parece bastante eficiente, certo?

Há um grande problema: se você deseja alterar muitas coisas no site, precisará encontrar todas as instâncias do estilo embutido e alterá-lo. Se você tiver 100 parágrafos diferentes, com tamanho de texto de 120% e azul, precisará encontrar todos os 100 e alterá-los para o que você decidiu que é um formato melhor.

Em vez disso, use uma folha de estilo CSS. Aqui está o estilo que você usaria para o parágrafo acima:

p.importante {tamanho: 120%; cor azul; }

Agora, em vez de usar o estilo embutido, você pode simplesmente usar esta linha:

Seu texto aqui.

E seu parágrafo será grande e azul. E quando você faz uma alteração na classe "importante" no seu CSS, todas elas mudam.

2. Tabelas para layout

As pessoas costumavam usar tabelas para formatar o layout da página regularmente. Usando uma tabela, você pode organizar os elementos da sua página em colunas e linhas, bem como aplicar diferentes alinhamentos e estilos. Mesmo tabelas unicelulares seriam usadas para alinhar o conteúdo corretamente. Mas esse uso de tabelas geralmente é desaprovado.

Assim como os estilos embutidos, é mais fácil manter o uso de CSS em vez de tabelas HTML para o layout. Novamente, se você quiser fazer alterações em dezenas ou centenas de páginas, é muito mais fácil editar sua folha de estilo do que percorrer cada página e ajustar as tabelas.

Além de facilitar a manutenção, a leitura de layouts de CSS tende a ser um pouco mais fácil do que a leitura de tabelas HTML. Especialmente se você acabar aninhando muitos níveis de tabelas entre si. Pode não ser super fácil alternar entre o documento HTML e a folha de estilo para ver exatamente o que está acontecendo, mas o conteúdo da sua página será mais claro e fácil de editar.

Usar tabelas aqui e ali para dividir páginas em colunas não é um pecado mortal. Às vezes, é mais fácil e rápido do que brincar com CSS. Mas se você estiver criando tabelas gigantescas e com várias camadas, considere reformatar com CSS.

3. HTML obsoleto

Como qualquer idioma, o HTML muda regularmente. As tags reconhecidas oficialmente são alteradas e algumas ficam obsoletas. Mesmo se essas tags ainda funcionarem, é melhor evitá-las.

Por exemplo, se você está acostumado a usar o tag para negrito e o tag em itálico, você está atrasado. e (para "ênfase") agora são as tags padrão.

, , , e outros também estão obsoletos.

A maioria das tags descontinuadas foi substituída por CSS; portanto, você precisará usar estilos (de preferência não os incorporados) para obter o mesmo efeito. Se você não tiver certeza de como substituir uma tag obsoleta ou se uma tag específica ainda estiver em uso, verifique o documentação HTML oficial ou apenas faça uma pesquisa rápida.

4. JavaScript embutido

Algumas páginas da web usam JavaScript para adicionar funcionalidade adicional JavaScript e desenvolvimento da Web: usando o modelo de objeto de documentoEste artigo apresentará o esqueleto do documento com o qual o JavaScript trabalha. Tendo um conhecimento prático desse modelo de objeto de documento abstrato, é possível escrever JavaScript que funcione em qualquer página da web. consulte Mais informação . Ele pode tornar as páginas da web interativas, validar o texto conforme ele é digitado, adicionar animações, fornecer respostas às ações do usuário etc. Em resumo, ele pode tornar uma página mais útil, fornecendo um comportamento adicional.

Assim como o CSS, você pode adicionar JavaScript embutido no seu HTML. Também como o CSS, isso geralmente é desencorajado. Além de ser potencialmente mais difícil de manter, existem algumas outras razões que justificam essa advertência.

O JavaScript embutido pode usar maiores quantidades de largura de banda do que um script vinculado de um arquivo diferente. Um processo chamado minification comprime HTML e CSS antes de enviá-lo para um usuário, exigindo menos largura de banda em conexões de banda larga ou móveis. JavaScript embutido, no entanto, não pode ser reduzido. Ele também não será armazenado em cache, enquanto um arquivo JavaScript separado posso ser armazenado em cache.

Todas essas coisas tornam o JavaScript embutido mais intensivo em largura de banda.

Também é mais difícil depurar, pois você pode usar um validador JavaScript para um arquivo JavaScript... mas não funcionará no script embutido. E, novamente, cria um HTML mais limpo e de manutenção mais fácil.

5. Múltiplas tags H1

Tags de cabeçalho são ótimas. Eles tornam as páginas mais fáceis de ler, podem dar um impulso no SEO e podem ser usados ​​para enfatizar certos pontos.

Mas há seis níveis de tags de cabeçalho por um motivo. Realmente deve haver apenas uma tag H1 na sua página. E esse geralmente é o título da página (especialmente em blogs e sites semelhantes). Você pode pensar que colocar várias palavras-chave nas tags H1 tornará o Google mais provável de buscá-las e classificar seu site com uma classificação mais alta nos resultados.

Mas o que realmente faz é tornar sua página mais confusa e mais difícil de ler. O que negará quaisquer benefícios de SEO que você possa ver de qualquer maneira.

Use H2, H3 e o restante das tags de cabeçalho para delinear melhor sua página. O nível do cabeçalho deve dar ao leitor uma idéia de quão importante é a seção a seguir. Se você os enganou, eles saberão e não serão felizes.

6. Ignorar imagem Alts

Cada imagem pode receber um atributo "alt" que exibe uma linha de texto específica se a imagem não puder ser exibida. Isso pode não parecer muito importante, especialmente em navegadores modernos (desktop e celular) que podem ser exibidos praticamente qualquer coisa.

Mas não adicionar atributos alt é um grande erro, especialmente na era da constante navegação móvel. As conexões móveis nem sempre são ótimas e, se um navegador não pode carregar uma imagem, seu leitor fica sem ideia do que deve ver lá. Um atributo alt pode corrigir isso.

E se alguém estiver usando um leitor de tela O VoiceOver torna os dispositivos Apple mais acessíveis do que nuncaO presidente da Fundação Americana para os Cegos reconhece que "a Apple fez mais pela acessibilidade do que qualquer outra empresa até agora" - e o VoiceOver teve um papel importante nisso. consulte Mais informação ou outro recurso de acessibilidade, esse atributo alt pode ser tudo o que obtém da imagem.

Obviamente, também existem benefícios potenciais de SEO. Os mecanismos de pesquisa podem indexar atributos alternativos curtos e descritivos. Mas o maior benefício aqui é ajudar seus leitores.

7. Tags não fechando

Existem algumas tags HTML que você pode evitar ao não fechar, como

e

. Os navegadores sabem que quando você inicia outro parágrafo ou item de lista, o anterior termina. Mas isso não significa que você deve pular as tags de fechamento.

Em primeiro lugar, apesar dos avanços na tecnologia dos navegadores, existe definitivamente a possibilidade de o navegador exibir seu conteúdo incorretamente se você não tiver fechado suas tags. E aplicar estilos pode produzir resultados imprevisíveis, como O usuário robertc do Stack Exchange demonstra.

O que se resume é que os navegadores esperam as tags de fechamento. Eles não precisam absolutamente deles... mas definitivamente se beneficiarão de ter o HTML correto quando tentarem exibir sua página.

Felizmente, não é preciso muito para fechar suas tags, principalmente se você estiver usando um bom editor de HTML.

8. Não incluindo um DOCTYPE

No início dos documentos HTML, você geralmente vê uma declaração DOCTYPE, como esta:

É algo que não é discutido com frequência, mas é um elemento importante na sua página. A declaração DOCTYPE informa ao navegador que tipo de HTML você está usando. Isso permite renderizar o HTML corretamente.

Se você pular a declaração DOCTYPE, a página será renderizada no "modo peculiar". Essa é a defesa do navegador moderno contra páginas da web antiquadas. E isso muda como a sua página é exibida. Uma rápida olhada em Modo peculiar do Firefox mostra que a distinção entre maiúsculas e minúsculas é alterada, as propriedades da fonte não herdam as tabelas, os tamanhos das fontes são calculados de maneira diferente e as imagens sem os atributos ALT são exibidas incorretamente.

A maioria dessas coisas é relativamente pequena. Mas se você deseja que sua página seja exibida corretamente, verifique se o navegador tem o modo de padrões completos ativado.

E para fazer isso, você precisa de um DOCTYPE. (Se você não tem certeza do que usar, use .)

9. Negociar marcação de esquema

A marcação de esquema ajuda os mecanismos de pesquisa a ter uma idéia melhor do que está na sua página. Mais especificamente, essa marcação informa aos mecanismos de pesquisa o que você está escrevendo em cada seção.

Por exemplo, em um artigo, você pode usar a marcação de esquema para informar ao mecanismo de pesquisa o título, autor, data, editor e outras informações úteis sobre um artigo.

Existem esquemas para filmes, livros, organizações, pessoas, restaurantes, produtos, lugares, ações, tipos diferentes de dados, música, escultura, reservas, serviços, caixas eletrônicos, cervejarias e quase tudo o que você pode imaginar. É incrível.

Você pode definitivamente fugir sem usar a marcação de esquema. Sua página será exibida corretamente sem ela. Seus leitores nem sabem que está lá. Mas há muito a ganhar com a inclusão dessa marcação. Os mecanismos de pesquisa poderão fornecer informações úteis e muito mais detalhadas sobre sua página, incluindo rich snippets.

E com a ferramenta de marcação de esquema do Google, o processo é realmente muito fácil.

Acostume-se às melhores práticas de HTML

Tornar essas melhores práticas um hábito pode demorar um pouco. E, às vezes, pode parecer que você está gastando muito tempo extra com algo que não recebe muito. Mas certificando-se de que seu HTML e CSS Aprenda HTML e CSS com estes tutoriais passo a passoCurioso sobre HTML, CSS e JavaScript? Se você acha que tem talento para aprender a criar sites do zero - aqui estão alguns ótimos tutoriais passo a passo que vale a pena tentar. consulte Mais informação são bem definidos, fáceis de trabalhar e de manutenção, você economizará muito tempo a longo prazo.

Que outros bons hábitos você achou úteis ao criar páginas da web? Você discorda de alguma das práticas acima? Compartilhe seus pensamentos nos comentários abaixo!