HTML(5) tyylivihjeet ja koodisopimukset

HTML-koodisäännöt

Web-kehittäjät epäilevät usein HTML:ssä käytettävää koodityyliä ja syntaksia.

Vuonna 2000-2010 monet web-kehittäjät siirtyivät HTML:stä XHTML:ään.

XHTML:n avulla kehittäjät joutuvat kirjoittamaan tehokasta 'hyvin muotoiltua' koodia.

HTML5 on hieman laajempi koodin vahvistuksessa.

HTML5:n avulla sinun täytyy luoda omaParhaat käytännöt, tyylisäännöt ja koodisopimukset.

Älykäs ja tulevaisuuden varma

Looginen tyylityksen käyttö voi tehdä HTML:stä helpommin ymmärrettävää ja käytettävää.

Tulevaisuudessa, kuten XML-lukijat, saattavat tarvita HTML:n lukemista.

Hyvin muotoiltu 'lähes XHTML:n' syntaksi tekee siitä älykkäämpää.

Kommentit:Pitää pitää tyylit älykkäinä, siistinä, puhtaina ja hyvin muotoiltuina.

Käytä oikeaa dokumentityyppiä

Varmista aina, että dokumentin ensimmäisellä rivillä on dokumentityyppi:

<!DOCTYPE html>

Jos pidät aina pienikirjaimisia taggeja, voit käyttää:

<!doctype html>

Käytä pienikirjaimisia elementtejä

HTML5 sallii elementtien nimissä sekavärisen kirjoitusasun.

Suosittelemme pienikirjaimisten elementtien käyttöä:

  • sekavuus ei ole hyvä
  • kehittäjät käyttävät yleensä pienikirjaimisia nimiä (esim. XHTML:ssa)
  • Pienet kirjaimet näyttävät puhtaammilta
  • Pienet kirjaimet ovat helpompia kirjoittaa

Ei niin hyvä:

<SECTION> 
  <p>Tämä on kappale.</p>
</SECTION>

Erittäin huono:

<Section> 
  <p>Tämä on kappale.</p>
</SECTION>

Ei huonoa:

<section> 
  <p>Tämä on kappale.</p>
</section>

Sulje kaikki HTML-elementit

HTML5:ssa sinun ei tarvitse sulkea kaikkia elementtejä (esim. <p>-elementti).

Suosittelemme kaikkien HTML-elementtien sulkemista:

Näyttää huonolta:

<section>
  <p>Tämä on kappale.
  <p>Tämä on kappale.
</section>

Näyttää hyvältä:

<section>
  <p>Tämä on kappale.</p>
  <p>Tämä on kappale.</p>
</section>

Tyhjien HTML-elementtien sulkeminen

HTML5:ssä tyhjien HTML-elementtien sulkeminen on valinnainen.

Tämä on sallittu:

<meta charset="utf-8">

Tämä on myös sallittu:

<meta charset="utf-8" />

Vaihe (/) on pakollinen XHTML:ssä ja XML:ssä.

Jos odotat XML-ohjelmistoa käsittelevän sivusi, on hyvä pitää tätä tottumusta.

Käytä pieniä kirjaimia

HTML5 sallii sekavaiheisia ominaisuusnimiä.

Suosittelemme pieniä kirjaimia:

  • Mixed attribute names are not good
  • kehittäjät ovat tottuneet käyttämään pieniä kirjaimia (esim. XHTML:ssä)
  • Pienet kirjaimet näyttävät puhdummilta tilanteen mukaan
  • Pienet kirjaimet ovat helpompia kirjoittaa

Näyttää huonolta:

<div CLASS="menu">

Näyttää hyvältä:

<div class="menu">

Attribute values with quotes

HTML5 sallii lainausmerkkivapaita ominaisuusarvoja.

Suosittelemme ominaisuusarvojen kirjoittamista lainausmerkeillä:

  • Jos ominaisuusarvossa on arvo, se on pakollista kirjoittaa lainausmerkeillä
  • Mixed styles are absolutely bad
  • Quoteed values are easier to read

Tämä ominaisuusarvo on epäkelvollinen, koska siinä on välilyönnit:

<table class=table striped>

Tämä on oikein:

<table class="table striped">

Välttämättömät attribuutit

Aina määrittele kuville alt Attribute. Tämä ominaisuus on tärkeä, jos kuva ei näy.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Aina määrittele kuvien mitat. Tämä vähentää vilkkumista, koska selain varaa tilaa kuvalle ennen kuin se ladataan.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal sign

Spaces are allowed on both sides of the equal sign:

<link rel = "stylesheet" href = "styles.css">

但是精简空格更易阅读， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

Vältä pitkiä koodirivejä

HTML-s编辑器中，通过左右滚动阅读HTML代码很不方便。

Vältä mahdollisimman paljon yhden rivin koodin ylittämistä 80 merkillä.

Tyhjät rivit ja sisennys

Vältä tyhjien rivien tarpeetonta lisäämistä.

Lisää tyhjiä rivejä suurten tai loogisten koodiblokkien erottamiseksi parantaaksesi luettavuutta.

Lisää kaksi välilyöntiä sisennykseksi parantaaksesi luettavuutta. Vältä tabua.

Vältä tarpeetonta tyhjää tilaa ja sisennystä.

Ei tarpeen:

<body>
  Kannattaa:
  <h1>Tunnetut kaupungit</h1>
  <h2>Tokyo</h2>
    <p>
    Tokyo on Japanin pääkaupunki, suuren Tokion alueen keskus,</br>(ja maailman väkirikkain suurkaupunki.)
    Se on Japanin hallituksen ja keisarillisen palatsin sijainti,</br>(ja maailman väkirikkain suurkaupunki.)
    ja Japanin keisarillisen perheen koti.
  </p>
</body>

Ei tarpeen:

<body>
Kannattaa:
<h1>Tunnetut kaupungit</h1>
<h2>Tokyo</h2>
<p>
Tokyo on Japanin pääkaupunki, suuren Tokion alueen keskus,</br>(ja maailman väkirikkain suurkaupunki.)
Se on Japanin hallituksen ja keisarillisen palatsin sijainti,</br>(ja maailman väkirikkain suurkaupunki.)
ja Japanin keisarillisen perheen koti.
</p>
</body>

Taulukko-esimerkki:

<table>
  <tr>
    <th>Nimi</th>
    <th>Kuvaus</th>
  <tr>
  <tr>
    <td>A</td>
    <td>A:n kuvaus</td>
  <tr>
  <tr>
    <td>B</td>
    <td>B:n kuvaus</td>
  <tr>
</table>

Luettelo-esimerkki:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Voimmeko jättää pois <html> ja <body>-elementit?

HTML5-standardin mukaan voidaan jättää pois <html>- ja <body>-elementit.

Seuraava koodi on validoitu HTML5:n mukaisesti:

Esimerkki

<!DOCTYPE html>
<head>
  <title>Sivun otsikko</title>
</head>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>

Kokeile itse

Emme suosittele <html> ja <body>-elementtien jättämistä pois.

<html>-elementti on tekstin juurelementti. Se on ihanteellinen paikka määrittää sivun kieli.

<!DOCTYPE html>
<html lang="en-US">

Avoimuuden lisäämiseksi sovelluksille (näytönlukijoille) ja hakukoneille, kielen määrittäminen on tärkeää.

Jättämällä pois <html> tai <body> voi aiheuttaa DOM- ja XML-ohjelmistojen kaatumisen.

Jättämällä pois <body>-elementti voi aiheuttaa virheitä vanhoissa selaimissa (IE9).

Voimmeko jättää pois <head>-elementin?

HTML5-standardin mukaan <head>-elementti voidaan myös jättää pois.

Oletuksena selain lisää <body>-elementin edellä olevat kaikki elementit oletusarvoiseen <head>-elementtiin.

Vähentämällä <head>-elementin, voit vähentää HTML:n monimutkaisuutta:

Esimerkki

<!DOCTYPE html>
<html>
<title>Sivun otsikko</title>
<body>
  <h1>Tämä on otsikko</h1>
  <p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Kommentit:Web-kehittäjille tagien poistaminen on tuntematonta. Sääntöjen luominen vie aikaa.

Metadatat

<title>-elementti on välttämätön HTML5:ssä. Tee mahdollisimman merkityksellisiä otsikoita.

<title>HTML5 Syntax and Coding Style</title>

Varmista, että kieli ja merkistö��n määrittely on varhainen dokumentissa, jotta tulkinta on oikein ja hakukoneiden indeksointi on oikein:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML-kommentit

Lyhyet kommentit tulisi kirjoittaa yhdelle riville, ja lisätä välilyönti <!-- jälkeen ja välilyönti --> ennen:

<!-- This is a comment -->

Pitkät kommentit, jotka ylittävät useita rivejä, tulisi kirjoittaa erillisillä riveillä <!-- ja -->:n avulla:

<!-- 
  Tämä on pitkä kommentti esimerkki. Tämä on pitkä kommentti esimerkki. Tämä on pitkä kommentti esimerkki.
  Tämä on pitkä kommentti esimerkki. Tämä on pitkä kommentti esimerkki. Tämä on pitkä kommentti esimerkki.
-->

Pitkät kommentit ovat helpommin havaittavissa, jos ne on sisennetty kahdella välilyönnillä.

Tyylitaulukot

Käytä yksinkertaista syntaksia linkittääksesi tyylitaulukon (type-ominaisuus ei ole välttämätön):

<link rel="stylesheet" href="styles.css">

Lyhyet säännöt voidaan kompressoida yhdelle riville, kuten näin:

p.into {font-family:"Verdana"; font-size:16em;}

Pitkät säännöt tulisi jakaa useille riveille:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Avainsanat ja valitsimet sijoitetaan samalle riville
  • Sulkeet avaimet sijoitetaan edellisen rivin loppuun, ennen niitä ei ole välilyöntiä
  • Käytä kahden merkin sisennystä
  • Jokaisen ominaisuuden ja sen arvon välissä käytetään kaksi välilyöntiä
  • Jokaisen välilyönnin tai semikolmopisteen jälkeen käytetään välilyöntiä
  • Jokaisen ominaisuusarvon parin (mukaan lukien viimeinen) jälkeen käytetään semikolmopistettä
  • Käytä lainausmerkkejä arvon sisältämällä välilyönnillä
  • Sulkeet sulut sijoitetaan uudelle riville, ennen niitä ei ole välilyöntiä
  • Vältä, että rivit ylittävät 80 merkkiä

Kommentit:Välilyönti tai semikolmopiste jälkeen lisätään aina välilyönti, se on kaikkien kirjoitusmuotojen yleinen sääntö.

Lataa JavaScript HTML:sta

Käytä yksinkertaista syntaksia ulkoisten skriptien lataamiseen (type-ominaisuus ei ole välttämätön):

<script src="myscript.js">

HTML-elementtien käsittely JavaScriptillä

Epäsiistien HTML-tyyleiden seuraukset voivat johtaa JavaScript-virheisiin.

Nämä kaksi JavaScript-lauseet tuottavat erilaisia tuloksia:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Kokeile itse

Jos mahdollista, käytä HTML:ssä samanlaisia nimeämisperiaatteita (kuten JavaScript)

Vierailkaessa JavaScript-tyylipäätöksissä

Käytä pienikirjaimisia tiedostonimiä

Useimmat verkkopalvelimet (Apache, Unix) ovat kirjainten suuruudesta riippuvaisia:

Ei voida päästä käsiksi London.jpg:een伦敦.jpg.

Muut verkkopalvelimet (Microsoft, IIS) eivät ole kirjainten suuruudesta riippuvaisia:

Mahdollista päästä käsiksi London.jpg:een伦敦.jpg tai London.jpg.

Jos käytät sekavaihtoehtoista kirjoitusmuotoa, sinun on pidettävä erittäin jatkuvaa yhtenäisyyttä.

Jos siirryt ison ja pienen kirjaimen erottamattomaan palvelimeen, nämä pienet virheet voivat tuhota verkkosivustosi.

Välttääksesi nämä ongelmat, käytä aina pienikirjaimisia tiedostonimiä (jos mahdollista).

Tiedostopäätteen käyttö

HTML-tiedostonimien tulisi käyttää laajennusta .htmlEi .htm）。

CSS-tiedostojen tulisi käyttää laajennusta .css.

JavaScript-tiedostojen tulisi käyttää laajennusta .js.