Der er tusinder af blogs og tutorials websteder er tilgængelige på internettet, men ikke alle de oplysninger, der er nyttige eller af god kvalitet. I denne artikel Vi viser dig 5 måder at holde din kode browser, bruger-og søgemaskine venlige. Hold følge dette få skridt, og jeg helt sikker på, at der vil hjælpe dig til din næste hjemmeside projekt. Nyd det!

1. Skriv ren kode

Skrivning af ren kode vil være let at vedligeholde og mindre af en smerte for dig og andre.

Bad Kode

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

God kode

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

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

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

 <! - / Content \ ->
 > </div> <div id = "Content"> </ div>
 <! - \ INDHOLD CLOSE / ->
 
 </ div>
 <! - \ Main CONTAINER CLOSE / ->

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

2. Brug den korrekte DOCTYPE

Hvis du ikke bruger DOCTYPE (dokument type erklæring) tag, dine websider, vil ikke vise i standarder kompatibel måder og kan resultere i nogle underlige websider.

3. Brug Tekst Tags og Unordered lister

Brug Tekst Tags og Unordered lister snarere end spacer grafik og indlejrede tabeller ..

Bad Kode

God kode

  <div>
 <h2> Tekst </ h2>
 <ul>
 <li> Content xyz </ li>
 <li> Content xyz </ li>
 <li> Content xyz </ li>
 <li> Content xyz </ li>
 </ ul>
 </ div> 

4. Brug semantisk meningsfulde klasse & ID navne

Når det er muligt, anvende klasse og ID-navne, der er semantisk meningsfulde og søge-venlige. For eksempel:

Bad Kode

  > <ul class = "blue">
 <li> Fejl 1 </ li>
 <li> Fejl 2 </ li>
 </ ul> 

God kode

  > <ul class = "Error">
 <li> Fejl 1 </ li>
 <li> Fejl 2 </ li>
 </ ul> 

5. Undgå IE's double float-margin, Brug display: inline for flød elementer

Undgå IE's double float-margin og tekst led fejl ved hjælp af display: inline for svævede elementer.

Bad Kode

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

God kode

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

Konklusion

Disse er blot nogle af de tips, der hjælper mig til at skrive bedre kode. Jeg håber, at tutorial også vil hjælpe dig til at skrive bedre og ren kode. Anvende disse tips til din nuværende og kommende projekter, og du vil helt sikkert sætte pris på den indsats.

Hvis du tror, at tutorial kan være mere bedre, kan du dele med os. Kommentar os

hvis du ønsker at modtage flere tips fra os, kan du overveje at abonnere på vores feed ved RSS eller e-mail.

Filed under: Css, Tutorials, Web udvikling af admin