HTML5语义元素

Semantiikka (kreikkalainen alkuperä) voidaan määritellä kielen merkityksen tutkimisena.

Semanttiset elementit ovat merkityksellisiä elementtejä.

Mitä semanttiset elementit ovat?

Semanttiset elementit kuvastavat selkeästi niiden merkitystä selaimille ja kehittäjille.

Ei-semanttinenElementtien esimerkkejä: <div> ja <span> - ei voi tarjota tietoa niiden sisällöstä.

SemantiikkaElementtien esimerkkejä: <form>, <table> ja <img> - määrittelee selkeästi niiden sisällön.

Selaimen tuki

Kyllä Kyllä Kyllä Kyllä Kyllä

Kaikki nykyaikaiset selaimet tukevat HTML5-sembanttisia elementtejä.

Lisäksi voit "auttaa" vanhoja selaimia käsittelemään "tuntemattomia elementtejä".

Tutki lisää tästä luvusta HTML5-selaimen tuesta.

HTML5:n uudet semanttiset elementit

Monet verkkosivut sisältävät HTML-koodia, joka viittaa navigointiin, otsikkopalkkiin ja alatunnisteeseen, kuten nämä: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 tarjoaa uusia semanttisia elementtejä sivun eri osien määrittämiseen:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5语义元素

HTML5语义元素

HTML5:n <section>-elementti

<section>-elementti määrittelee asiakirjan osion.

W3C:n HTML-dokumentissa sanotaan: "Osio (section) on aiheisiin liittyvä sisältöryhmä, jolla yleensä on otsikko".

Verkkosivun etusivun voidaan jakaa esittelyyn, sisältöön ja yhteystietoihin ja niin edelleen.

Esimerkki

<section>
   <h1>WWF</h1>
   <p>World Wide Fund for Nature (WWF) on....</p>
</section>

Kokeile itse

HTML5:n <article>-elementti

<article>-elementti määrittelee itsenäisen sisäisen sisällön.

Dokumentilla on oma merkityksensä, ja sitä voidaan lukea riippumatta verkkosivuston muusta sisällöstä.

<article>-elementin sovellusskenaariot:

  • Foorumi
  • Blogin
  • Uutiset

Esimerkki

<article>
   <h1>Mikä WWF tekee?</h1>
   <p>WWF:n tehtävänä on lopettaa planeettamme luonnonympäristön heikkeneminen,</p>
  ja rakentaa tulevaisuuden, jossa ihmiset elävät luonnon kanssa yhteenkuuluvuudessa.</p>
</article>

Kokeile itse

Sisennetyt semanttiset elementit

HTML5-standardissa <article>-elementti määrittelee täyden liittyvän elementtiblokin.

<section>-elementti määritellään liittyvän elementtiblokin.

Voimmeko käyttää tätä määritelmää päätelläksemme, miten elementtejä voidaan sisällyttää toisiinsa? Ei, emme voi!

Internetissä löydät <section>-elementtejä, jotka sisältävät <article>-elementtejä HTML-sivuilla, ja <article>-elementtejä, jotka sisältävät <sections>-elementtejä.

Huomaat myös, että <section>-elementti voi sisältää <section>-elementtejä, ja <article>-elementti voi sisältää <article>-elementtejä.

HTML5:n <header>-elementti

<header>-elementti määrittelee asiakirjan tai luvun otsikkopalkin.

<header>-elementti tulisi käyttää esittelykohteen konttorina.

Asiakirjassa voi olla useita <header>-elementtejä.

Alla on esimerkki artikkelista, jossa määritellään otsikkopalkki:

Esimerkki

<article>
   <header>
     <h1>Mikä WWF tekee?</h1>
     <p>WWF:n tehtävä:</p>
   </header>
   <p>WWF:n tehtävänä on lopettaa planeettamme luonnonympäristön heikkeneminen,</p>
  ja rakentaa tulevaisuuden, jossa ihmiset elävät luonnon kanssa yhteenkuuluvuudessa.</p>
</article>

Kokeile itse

HTML5:n <footer>-elementti

<footer>-elementti määrittelee asiakirjan tai luvun alatunnisteen.

<footer>-elementin tulisi tarjota tietoa sen sisältämistä elementeistä.

Alatunnisteet sisältävät yleensä asiakirjan kirjoittajan, tekijänoikeustiedot, käyttöehdot-linkit, yhteystiedot ja niin edelleen.

Voit käyttää useita <footer>-elementtejä yhdessä asiakirjassa.

Esimerkki

<footer>
   <p>Julkaisija: Hege Refsnes</p>
   <p>Kontaktitiedot: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Kokeile itse

HTML5 <nav> -elementti

<nav> -elementti määrittelee navigointilinkkien kokoelman.

<nav> -elementti tarkoittaa suurta navigointilinkkikokonaisuutta. Mutta ei kaikki linkit dokumentissa kuulu <nav> -elementtiin!

Esimerkki

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Kokeile itse

HTML5 <aside> -elementti

<aside> -elementti sisältää sivun pääsisällön ulkopuolista sisältöä (esim. sivupalkki).

aside-sisältö tulisi olla liittyvä ympäröivään sisältöön.

Esimerkki

<p>Perheeni ja minä vierailimme Epcot Centerissä tänä kesänä.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Epcot Center on teemapuisto Disney Worldissa, Floridassa.</p>
</aside>

Kokeile itse

HTML5 <figure> ja <figcaption> -elementit

Kirjoissa ja sanomalehdissä kuvien kanssa käytetään usein otsikoita.

Otsikon (caption) tehtävänä on lisätä kuvalle näkyvä selitys.

HTML5:n avulla kuvat ja otsikot voidaan yhdistää <figure> Elementissä:

Esimerkki

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - Pulpit Pock, Norja.</figcaption>
</figure>

Kokeile itse

<img> Elementti määrittelee kuvan,<figcaption> Elementti määrittelee otsikon.

Miksi käyttää HTML5-elementtejä?

Jos käytetään HTML4:ää, kehittäjät käyttävät heidän suosikkimerkkijonojaan sivuelementtien tyylejä varten:

otsikko, yläosa, alalaita, alatunniste, valikko, navigointi, pää, kontti, sisältö, artikkeli, sivupalkki, ylivalikko, ...

Tällä tavalla selaimet eivät voi tunnistaa oikeaa verkkosivun sisältöä.

Ja HTML5-elementtien kautta, kuten: <header> <footer> <nav> <section> <article>, tämä ongelma ratkaistaan.

W3C:n mukaan semanttinen verkkoon:

“Mahdollistaa datan jakamisen ja uudelleenkäytön sovellusten, yritysten ja ryhmien välillä.”

HTML5 semanttiset elementit

Alla luetellaan kirjainjärjestyksessä järjestetyt HTML5 uudet semanttiset elementit.

Nämä linkit ohjaavat täydelliseen HTML viittausoppikirjaan.

Tunniste Kuvaus
<article> Määritellään artikkeli.
<aside> Määritellään sivun sisällön ulkopuolinen sisältö.
<details> Määritellään käyttäjän näkyvissä olevat tai piilotetut lisätiedot.
<figcaption> Määritellään <figure>-elementin otsikko.
<figure> Määritellään sisällytetty sisältö, kuten kuvat, kaaviot, valokuvat, koodilistaat ja niin edelleen.
<footer> Määritellään asiakirjan tai osan alatunniste.
<header> Määritellään asiakirjan tai osan otsikkopalkki.
<main> Määritellään asiakirjan pääsisältö.
<mark> Määritellään tärkeä tai korostettu teksti.
<nav> Määritellään navigointilinkki.
<section> Määritellään asiakirjan osa.
<summary> Määritellään <details>-elementin näkyvä otsikko.
<time> Määritellään päivämäärä/aika.