HTML:n muotoilu verkossa
Muuta tiivistetty sivun lähdekoodi luettavaksi merkintäkieleksi. Tunnisteet sisennetään sisäkkäisyyden syvyyden mukaan, attribuutit asetellaan selkeästi, ja upotetut komentosarjat ja tyylit muotoillaan dokumentin mukana.
Miksi sivun lähdekoodi näyttää tältä?
HTML:n minimointityökalut tiivistävät tunnisteiden väliset tyhjät merkit, poistavat kommentit, jättävät pois valinnaisia lopputunnisteita ja poistavat lainausmerkit niitä tarvitsemattomien attribuuttiarvojen ympäriltä. Palvelimen sivupohjat lisäävät sekavuutta, koska kymmenistä osista koottu sivu saapuu yhtenä virtana ilman näkyvää yhteyttä sen tuottaneisiin tiedostoihin. Lähes minkä tahansa tuotantosivuston lähdekoodi koostuu vain muutamasta valtavasta rivistä. Osion lopputunnisteen löytäminen tarkoittaa silloin kulmasulkeiden laskemista silmämääräisesti.
Rakenne on tärkeintä
HTML muodostaa puun, jota on vaikea lukea litteäksi tulostettuna. Sisäkkäisyyden mukainen sisennys näyttää heti dokumentin muodon: missä ylätunniste päättyy, mikä säiliö ympäröi pääsisältöä, kuinka syvällä komponentti sijaitsee ja missä odottamatonta sisäkkäisyyttä kannattaa tutkia. Siksi muotoiltu lähdekoodi auttaa otsikkojärjestyksen tarkistamisessa, kehyksen tuottaman merkintäkielen tutkimisessa tai kiinnostavan sivusto-osion rakenteen ymmärtämisessä. Valitse lähde kysymyksesi mukaan. Tallennettu sivun lähdekoodi näyttää palvelimen toimittaman merkintäkielen, kun taas kehittäjätyökalujen elementtipaneelista kopioitu sisältö voi sisältää selaimessa suoritettujen komentosarjojen muutoksia. Muotoilu ei yhdistä näitä näkymiä eikä tuota suoritusaikaista DOM-rakennetta. Kun jäljität odottamatonta elementtiä, vertaa lähdekoodia ajantasaiseen dokumenttiin ja tutki sen lisännyttä komentosarjaa. Selkeästi sisennetty otsikkorakenne auttaa käsin tehtävää tarkastusta, mutta ei vastaa koko sivun saavutettavuusauditointia.
Myös upotetut komentosarjat ja tyylit muotoillaan
Oikea sivu on harvoin pelkkää merkintäkieltä. Analytiikkakoodit, JSON-LD-muotoinen rakenteinen tieto, asetusoliot ja kriittinen CSS upotetaan suoraan dokumenttiin, ja minimointityökalu tiivistää nekin. Muotoilija käsittelee jokaisen upotetun lohkon oikealla jäsentimellä: minimoitua JavaScriptiä sisältävä script-tunniste tulostuu luettavana JavaScriptinä ja style-tunniste luettavana CSS:nä, kaikki oikein sisennetyn dokumentin sisällä.
Tarkista tyhjille merkeille herkkä sisältö
Tyhjät merkit voivat vaikuttaa HTML:n esitykseen etenkin rivinsisäisen tekstin ympärillä sekä pre- ja textarea-elementeissä. Muotoilija huomioi HTML:n tavalliset välilyöntikäytännöt, mutta muotoilu ei ole visuaalinen regressiotesti. Säilytä alkuperäinen sivu ja tarkista tulos oikeassa käyttöyhteydessään ennen muutosten julkaisemista. Asettelu riippuu myös tyylitiedostoista, komentosarjoista ja selaimen toiminnasta, joita täällä ei arvioida. Muotoiltu kopio helpottaa dokumentin lukemista tutkimuksen aikana, mutta se ei todista sivun näkyvän täsmälleen ennallaan.
Usein kysytyt kysymykset
Voinko liittää kokonaisen sivun lähdekoodin?
Kyllä. Kopioi lähdekoodi selaimesta view-source-näkymästä tai tallenna sivu ja avaa tiedosto, niin koko dokumentti muotoillaan, mukaan lukien head- ja body-osat, upotetut komentosarjat ja rakenteinen tieto.
Muuttaako muotoilu sivun ulkoasua?
Muotoilija pyrkii kunnioittamaan HTML:n merkityksellisiä tyhjiä merkkejä, mutta tulosta kannattaa silti verrata alkuperäiseen ennen julkaisemista. Rivinsisäinen teksti, esimuotoiltu sisältö ja tyylien vaikutus voivat tehdä väleistä merkityksellisiä. Säilytä alkuperäinen kopio ja testaa esitys siinä projektissa, jossa merkintäkieltä käytetään.
Toimiiko työkalu Twig- tai Blade-sivupohjien kanssa?
Editori on tarkoitettu selaimelle toimitettavalle HTML:lle. Twig, Blade ja muut sivupohjakielet käyttävät syntaksia, jonka HTML-muotoilija voi hylätä tai käsitellä odottamattomasti. Luotettavimman näkymän tuotettuun merkintäkieleen saat renderöimällä sivupohjan projektissasi ja muotoilemalla syntyneen HTML-dokumentin.