Summary  
This chapter explains how to use HTML5 semantic elements—header, nav, section, article, and footer—to structure and group content within a webpage.

General domain of usage  
Web development

Alla on yleisimmät semanttiset elementit ja niiden käyttötarkoitukset.

## `header`-elementti
Edustaa verkkosivun tai osion yläosaa. Sisältää yleensä logon, otsikon tai navigointilinkkejä.

Älä sekoita `header`-elementtiä `head`-elementtiin. Niillä on eri käyttötarkoitukset.

Huomio

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPHVsPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Ib21lPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgPC91bD4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

## `nav`-elementti
Määrittää navigointilinkkien lohkon. Sijoitetaan usein otsikkoon.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+SG9tZTwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdDwvYT48L2xpPgogICAgICAgIDwvdWw+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

## `section`-elementti
Ryhmittelee toisiinsa liittyvän sisällön loogisiksi osioiksi. Jokainen osio alkaa yleensä otsikolla.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDE+Q29tcGFueSB0aXRsZSBvciBicmFuZCBwaHJhc2U8L2gxPgogICAgICA8cD5XZWxjb21lIHRvIG91ciBjb21wYW55LiBXZSBzcGVjaWFsaXplIGluLi4uPC9wPgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDI+U2VydmljZXM8L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPlNlcnZpY2UgMTwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMjwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMzwvbGk+CiAgICAgIDwvdWw+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

## article-elementti
Kuvaa itsenäisen sisällön osan, kuten blogikirjoituksen tai uutisartikkelin. Hyödyllinen hakukoneille pääsisällön tunnistamiseen.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPGgyPkJsb2cgUG9zdCBUaXRsZTwvaDI+CiAgICAgIDxwPkJsb2cgcG9zdCBjb250ZW50IGdvZXMgaGVyZS4uLjwvcD4KICAgIDwvYXJ0aWNsZT4KICA8L2JvZHk+CjwvaHRtbD4=

## `footer`-elementti
Määrittää verkkosivun tai osion alaosan. Sisältää yleensä tekijänoikeustiedot, yhteystiedot tai aiheeseen liittyviä linkkejä.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPCEtLSBhcnRpY2xlIGNvbnRlbnQgLS0+CiAgICA8L2FydGljbGU+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IE15IFdlYnNpdGUuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlByaXZhY3kgUG9saWN5PC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlRlcm1zIG9mIFNlcnZpY2U8L2E+PC9saT4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdCBVczwvYT48L2xpPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

Mikä on `<header>`-tunnisteen ensisijainen tarkoitus?

Mitä HTML-tunnistetta käytetään tyypillisesti määrittelemään navigointilinkkien osio, kuten valikot tai navigointipalkit?

Mikä on `<section>`-tunnisteen pääasiallinen tehtävä?

Milloin tulisi käyttää `<footer>`-tagia?

Hallitse HTML:n perusteet rakentaaksesi hyvin jäsenneltyä ja saavutettavaa verkkosisältöä. Opi jäsentämään dokumentteja käyttämällä tageja, elementtejä ja attribuutteja. Käsittele sujuvasti tekstiä, listoja, kuvia, ääntä ja videota rikastuttaaksesi verkkosivuja. Luo taulukoita järjestetyn datan esittämiseen ja lomakkeita käyttäjän syötteiden ja vuorovaikutuksen mahdollistamiseen. Tutustu semanttiseen HTML:ään saavutettavuuden parantamiseksi ja rakenna kokonaisia, toiminnallisia verkkosivustorakenteita alusta alkaen.

Master the essentials of HTML to build well-structured and accessible web content. Learn how to structure documents using tags, elements, and attributes. Work confidently with text, lists, images, audio, and video to enrich web pages. Create tables for organized data and forms for user input and interaction. Discover semantic HTML to enhance accessibility and build complete, functional website structures from the ground up.

Semanttisten Elementtien Tarkastelu HTML:ssä

`header`-elementti

`nav`-elementti

`section`-elementti

article-elementti

`footer`-elementti

1. Mikä on `<header>`-tunnisteen ensisijainen tarkoitus?

2. Mitä HTML-tunnistetta käytetään tyypillisesti määrittelemään navigointilinkkien osio, kuten valikot tai navigointipalkit?

3. Mikä on `<section>`-tunnisteen pääasiallinen tehtävä?

4. Milloin tulisi käyttää `<footer>`-tagia?

Semanttisten Elementtien Tarkastelu HTML:ssä

header-elementti

nav-elementti

section-elementti

article-elementti

footer-elementti

1. Mikä on <header>-tunnisteen ensisijainen tarkoitus?