Semanttinen HTML ja sivun rakenne

Tähän mennessä olet oppinut rakentamaan elementtejä verkkosivulle. Nyt parannetaan sisällön rakennetta ja ymmärrettävyyttä.

Mitä on semanttinen HTML?

Semanttinen HTML tarkoittaa elementtien käyttöä, jotka kuvaavat sisällön tarkoitusta selkeästi. Sen sijaan, että käyttäisit yleisiä säiliöitä kuten <div>, käytät merkityksellisiä tageja kuten:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Miksi se on tärkeää

• Auttaa selaimia ja kehittäjiä ymmärtämään sivun rakennetta;
• Parantaa saavutettavuutta (ruudunlukijat hyödyntävät tätä);
• Auttaa hakukoneita tulkitsemaan sisältöä paremmin.

Yleiset semanttiset elementit

<header>

Edustaa sivun tai osion yläosaa (logo, otsikko, navigaatio).

<header>
  <h1>My Website</h1>
</header>

<nav>

Määrittelee navigointilinkit.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Ryhmittelee toisiinsa liittyvän sisällön.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Edustaa itsenäistä sisältöä (esim. blogikirjoitus).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Määrittää sivun alaosan.

<footer>
  <p>&copy; My Website</p>
</footer>

Miltä se näyttää yhdessä