Existem milhares de blogs e sites tutoriais estão disponíveis na internet, mas não a totalidade das informações é útil ou de boa qualidade. Neste artigo vamos mostrar 5 maneiras de manter o seu navegador de código de utilizador e motor de busca amigável. Mantenha seguir este passos, e eu definitivamente certeza que vai ajuda-lo para seu próximo projeto do Web site. Divirta-se!

1. Escrever código limpo

Escrever código limpo será de fácil manutenção e menos de uma dor para você e outros.

Bad Code

 > <div id = "MainContainer" > <div id = "Header" > </div> <div id = "Content" > </div> </div> </div> id <div = "Wrapper" id> <div = "MainContainer" id> <div "Header" => </ div id> <div "Content" => </ div> </ div> </ div> 

Código de Boas

  <! - / Wrapper \ ->
 > id <div "Wrapper" =>

 <! - CONTAINER / MAIN \ ->
 > id <div "MainContainer" =>

 <! - / HEADER \ ->
 > </div> id <div "Header" => </ div>
 <! - \ HEADER CLOSE / ->

 <! - CONTEÚDO / \ ->
 > </div> id <div "Content" => </ div>
 <! - Fechar o conteúdo \ / ->
 
 </ div>
 <! - \ MAIN CONTAINER CLOSE / ->

 </ div>
 <! - \ EMBALAGENS CLOSE / -> 

2. Use o DOCTYPE correto

Se você não usar o DOCTYPE (tipo de documento declaração) tag em suas páginas na Web não serão exibidos em forma compatível com as normas e pode resultar em algumas páginas Web estranho.

3. Use tags do título e ordenada listas

Use marcas de título e lista ordenada de gráficos em vez de informações e tabelas aninhadas ..

Bad Code

Código de Boas

 Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> </ul> </div> <div> <h2> Designação </ h2> <ul> xyz Conteúdo <li> </ li> <li> xyz conteúdo </ li> <li> xyz conteúdo </ li> <li> xyz conteúdo </ li> </ ul> </ div> 

4. Use a classe semanticamente significativos nomes & ID

Sempre que possível uso de classes e nomes de identificação que são semanticamente significativos e busca-friendly. Por exemplo:

Bad Code

  > classe <ul "blue" =>
 <li> Erro 1 </ li>
 <li> Erro 2 </ li>
 </ ul> 

Código de Boas

  > classe <ul "Error" =>
 <li> Erro 1 </ li>
 <li> Erro 2 </ li>
 </ ul> 

5. Float double Evite IE-margin, Use display: inline para elementos flutuantes

Evite float double IE margem de erros e travessão texto usando display: inline para elementos flutuantes.

Bad Code

  float : left ; width : 300px ; padding : 4px 7px ; margin-left : 20px ; } # content (float: left; width: 300px; padding: 4px 7px; margin-left: 20px;) 

Código de Boas

  # content (
 ; float: left;
 ; width: 300px;
 ; padding: 4px 7px;
 ; margin-left: 20px;
 ; display: inline;
 ) 

Conclusão

Estas são apenas algumas das dicas que me ajudam a escrever melhor código. Espero que o tutorial também irá ajudá-lo a escrever melhor e mais limpo o código. Aplicar estas dicas para seus projetos atuais e no próximo, e você certamente irá apreciar os esforços.

Se você acha que tutorial pode ser mais melhor, por compartilhar conosco. Comentário nós

Se você gostaria de receber mais dicas de nós, por favor considere subscrever o nosso feed de RSS ou por e-mail.