Olitpa sitten aloitteleva HTML-käyttäjä tai HTML-asiantuntija, on tärkeää noudattaa joitakin parhaita käytäntöjä, jotta HTML-dokumenttisi pysyvät johdonmukaisina ja järjestettyinä. Kun elementtejä, attribuutteja, ominaisuuksia, arvoja ja paljon muuta on niin paljon opittavaa.
Tässä on 10 parasta HTML-käytäntöä, jotka kannattaa pitää mielessä, kun työstät seuraavaa projektiasi.
1. Käytä asianmukaista asiakirjan rakennetta
HTML-dokumentit toimivat silti ilman elementtejä, kuten <html>, <head> ja <body>. Sivut eivät kuitenkaan renderöidy oikein kaikissa selaimissa, joten on tärkeää olla johdonmukainen käyttämällä oikeaa asiakirjarakennetta.
Esimerkki:
2. Ilmoita oikea doctype
HTML-dokumenttia luotaessa ensimmäinen asia, joka tulee ilmoittaa, on doctype. Tämä kertoo selaimelle, mitä standardeja käytät, jotta merkkauksesi voidaan renderöidä oikein. Doctype tulee ennen <html>-tagia sivun yläosassa. Jos olet epävarma siitä, mitä ilmoitusta kannattaa käyttää, W3.org tarjoaa tietoa oikean doctype-tyypin valinnasta.
3. Sulje aina tagit
Välttääksesi validointivirheiden kohtaamisen muista aina, että jokaisella luomallasi tagilla on sulkeva tagi.
4. Älä käytä inline-tyylejä
Saattaa tuntua helpolta reittiä sijoittaa tyylittelyt riviin koodin yhteyteen ulkoisen tyylitiedoston luomisen sijasta. Inline-tyylit eivät kuitenkaan ole hyvä koodauskäytäntö, koska se vaikeuttaa verkkosivuston päivittämistä ja ylläpitoa. Pidä sen sijaan tyylit erillään HTML-merkinnästä.
5. Käytä alt-attribuuttia kuvien kanssa
Kuvien kanssa ei tarvitse käyttää alt-attribuuttia, mikä tekee siitä helposti sivuutettavan. Merkityksellinen alt-attribuutti on kuitenkin tärkeää validointi- ja saavutettavuussyistä. Alt-attribuutti tarjoaa kontekstin ruudunlukuohjelmille, joten sen tulisi olla kuvaileva sen suhteen, mitä kuva sisältää.
6. Validoi usein
Sen sijaan, että odottaisit, kunnes olet saanut HTML-dokumentin valmiiksi, validoi koodisi useaan kertaan työn aikana. Tämä auttaa lopulta säästämään aikaa havaitsemalla virheet varhaisessa vaiheessa, varsinkin jos dokumenttisi on pitkä. Yksi suosittu HTML-validointilaite on W3C:n merkintöjen validointipalvelu.
7. Sijoita ulkoiset tyylitiedostot <head>-tagiin
Vaikka ulkoiset tyylitiedostot voi sijoittaa mihin tahansa HTML-dokumentissa, on paras käytäntö sijoittaa ne <head>-tagiin. Näin sivusi latautuu nopeammin.
8. Lue lisää. Käytä mielekkäitä tunnisteita
Jokainen verkkosivusi osio tulisi rakentaa käyttämällä sisällölle sopivinta HTML5-tunnistetta. Yleisten tagien, kuten <div>, liiallista käyttöä kannattaa välttää, kun tehtävään voisi olla kuvaavampi tagi, kuten <section>, <article> ja niin edelleen.
9. Ota huomioon, mitä tarkoitusta varten tarvitaan. Käytä pienillä kirjaimilla kirjoitettua merkintää
HTML-merkintäsi voidaan kirjoittaa pienillä tai isoilla kirjaimilla, ja verkkosivu renderöityy oikein. On kuitenkin paras käytäntö pitää tagien nimet pienillä kirjaimilla, koska se on helpompi lukea ja ylläpitää.
10. Vähennä sivulla olevien elementtien määrää
HTML-dokumenteista voi tulla monimutkaisia, erityisesti paljon sisältöä sisältävien verkkosivujen kohdalla. Jos haluat pienentää sivujesi kokoa, etsi mahdollisuuksia optimoida koodia entisestään, kun olet saanut merkinnät valmiiksi.
Haluatko oppia lisää HTML:n parhaista käytännöistä? Tutustu näihin muihin artikkeleihin:
- HTML:n parhaat käytännöt
- Front-end-koodin standardit & Parhaat käytännöt
- Parhaan koodin kirjoittaminen
Etkö halua tehdä sitä itse tai tarvitsetko apua?
TBH Creative työskentelee aina sen eteen, että se pysyy aina ajan tasalla web-kehityksen parhaista käytännöistä.