HTML

HTML-KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

HTML:n body: parhaat käytännöt

HTML-dokumentin runko eli body on aluksi tyhjä, toisin kuin head-osio, jolle HTML-standardi määrittelee vähimmäisrakenteen. Verkkosivun varsinainen sisältö — kuten tekstit, kuvat ja linkit — lisätään bodyn sisälle vain silloin, kun niitä halutaan esittää käyttäjälle.

Yksinkertaisen HTML-dokumentin runko

Yksinkertaisissa HTML-dokumenteissa kaiken sisällön voi sijoittaa suoraan body-elementin sisälle: 


...
<body>
  <h1>Pääotsikko</p>
  <p>Jotain leipätekstiä.</p>
  <p>Lisää leipätekstiä.</p>
  <h2>Alaotsikko</h2>
  <p>Lisää leipätekstiä.</p>
</body>
...

Rakenteellisen HTML-dokumentin runko

Monimutkaisemmissa HTML-dokumenteissa on suositeltavaa jakaa rakenne erillisiin lohkoihin. Näiden avulla sisällön voi jakaa erillisiin, loogisiin osiin.

Alla olevassa esimerkissä käytetään HTML5:n esittelemä semanttisia elementtejä kuten header, nav, main, ja footer luomaan perusrakenne. Tätä rakennetta voisi monipuolistaa lisäämällä muita rakenteita, kuten article, section ja aside. 


...
<body>
  <header>
    <h1>Pääotsikko</h1>
    <nav>
      <ul>
        <li><a href="#home">Etusivu</a></li>
        <li><a href="#about">Tietoa</a></li>
        <li><a href="#contact">Yhteystiedot</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Alaotsikko</h2>
    <p>Jotain leipätekstiä.</p>
    <p>Lisää leipätekstiä.</p>
  </main>

  <footer>
    <p>© 2025 Yritys. Kaikki oikeudet pidätetään.</p>
  </footer>
</body>...

Wrappereita hyödyntävän HTML-dokumentin runko

Dokumentin runkoon vaikuttaa sisällön ohella usein myös haluttu ulkoasu. Vaikka semanttiset elementit parantavat rakennetta, usein on tarpeen käyttää nk.wrapper-rakenteita, jotka lisäävät semantiikan kannalta tarpeettomia elementtejä. Kehittäjän näkökulmasta tämä merkitsee kompromissia: dokumentin on oltava sekä semanttisesti oikea että visuaalisesti toimiva. Liiallinen wrapperien käyttö voi kuitenkin johtaa niin sanottuun "divitus"-ilmiöön, jossa ylimääräiset elementit tekevät koodista monimutkaisempaa ja vaikeaselkoisempaa (esimerkki alla). 


...
<body>
    <div class="wrapper">
        <div class="header-wrapper">
            <div class="header-inner-wrapper">
                <div class="header-content">
                    <h1>Pääotsikko</h1>
                </div>
            </div>
        </div>

        <div class="main-content-wrapper">
            <div class="main-content-inner-wrapper">
                <div class="main-content">
				  <p>Jotain leipätekstiä.</p>
				  <p>Lisää leipätekstiä.</p>
                </div>
            </div>
        </div>


        <div class="footer-wrapper">
            <div class="footer-inner-wrapper">
                <div class="footer-content">
                    <p>© 2025 Yritys. Kaikki oikeudet pidätetään.</p>
                </div>
            </div>
        </div>
    </div>
</body>
...

Semanttinen HTML ja SEO

Vaikka semanttiset elementit parantavat koodin selkeyttä ja verkkosivujen saavutettavuutta, on hyvä tiedostaa, että niiden vaikutus hakukoneoptimoinnin (SEO) näkökulmasta on monivivahteinen. Ei ole mitään konkreettista näyttöä siitä, että semanttinen rakenne itsessään parantaisi SEO:ta. Vaikka nämä elementit auttavat hakukoneita jäsentämään sivun rakennetta, hakukoneet toimivat maailmassa, jossa suuri osa internetin sisällöstä ei noudata standardeja. Tästä syystä algoritmit hyödyntävät laajempaa kokonaisuutta, johon kuuluvat muun muassa sisällön laatu, intentio, IR-rakenteiden hyödyntäminen ja käyttäjäkokemus.

Rakenteellisten elementtien käyttöä kannattaa lähestyä samalla tavalla kuin terveellisiä elämäntapoja. Vaikka yksittäiset muutokset harvoin tuovat isoja läpimurtoja, ne voivat kumuloitua ja tuottaa positiivisia vaikutuksia. Tästä syystä semanttisten rakenteiden suosiminen on edelleen suositeltavaa, vaikka se ei takaa suoraa SEO-hyötyä.

Artikkelin tiedot

Otsikko: HTML:n body: parhaat käytännöt

Kuvaus: Paranna HTML-dokumenttisi rakennetta ja hakukoneystävällisyyttä tehokkailla käytännöillä, jotka korostavat semantiikkaa ja saavutettavuutta.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: