HTML5-muuttaminen

HTML4:stä HTML5:een siirtyminen

Tämä luku selittää, miten siirrytään tyypillisestä HTML4-sivusta tyypilliseen HTML5-sivuun.

Tämä luku näyttää, miten olemassa olevaa HTML4-sivua voidaan muuntaa HTML5-sivuksi ilman, että alkuperäinen sisältö ja rakenne vahingoittuvat.

Huomautus:Voit käyttää samoja taitoja siirtyäksesi HTML4 ja XHTML:stä HTML5:een.

tyypillinen HTML4 tyypillinen HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

tyypillinen HTML4-sivu

Esimerkki

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>Uutiset</li>
    <li>Sportit</li>
    <li>Sää</li>
  </ul>
</div>
<div id="content">
<h2>Uutisosa</h2>
<div id="post">
  <h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Kaikki oikeudet pidätetään.</p>
</div>
</body>
</html>

Kokeile itse

HTML5 Doctypeksi muutettuna

Muuta dokumenttipyyntö HTML4 doctype:stä:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Muuta doctype HTML5:ksi:

<!DOCTYPE html>

Kokeile itse

HTML5 koodaukseksi muutettuna

Muuta koodausinfo HTML4:stä:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Muuta HTML5:ksi

<meta charset="utf-8">

Kokeile itse

Lisää shiv

Kaikki nykyaikaiset selaimet tukevat HTML5 semanttisia elementtejä.

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

Shiv lisätty Internet Explorerin tukea varten:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Kokeile itse

Huomautus:Lue lisää shivistä HTML5-selaimen tukemisesta.

Lisää CSS HTML5 semanttisiin elementteihin

Katso olemassa olevat CSS-tyylit:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Kopioi yhtä CSS-tyyleillä HTML5 semanttisiin elementteihin:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Kokeile itse

HTML5 <header> ja <footer> muotoon

Muuta id="header" ja id="footer" <div>-elementit:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&copy; 2016 CodeW3C.com. Kaikki oikeudet varattu.</p>
</div>

Muuta HTML5-merkinnöksi <header> ja <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Kaikki oikeudet pidätetään.</p>
</footer>

Kokeile itse

HTML5:n <nav>-elementiksi

Muuta id="menu" sisältävä div-elementti:

<div id="menu">
  <ul>
    <li>Uutiset</li>
    <li>Sports</a></li>
    <li>Sää</li>
  </ul>
</div>

Muuta HTML5-merkinnöksi <nav>-elementiksi:

<nav>
  <ul>
    <li>Uutiset</li>
    <li>Sports</a></li>
    <li>Sää</li>
  </ul>
</nav>

Kokeile itse

HTML5:n <section>-elementiksi

Muuta id="content" sisältävä div-elementti:

<div id="content">
.
.
.
</div>

Muuta HTML5-merkinnöksi <section>-elementiksi:

<section>
.
.
.
</section>

Kokeile itse

HTML5:n <article>-elementiksi

Muuta kaikki class="post" sisältävät <div>-elementit:

<div class="post">
  <h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Muuta HTML5-merkinnöksi <article>-elementiksi:

<article>
  <h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Kokeile itse

Poista nämä "ei enää tarvittavat" tyylit:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Kokeile itse

Tavallinen HTML5-sivu

Lopuksi voit poistaa <head>-elementin. HTML5:ssä niitä ei enää tarvita:

Esimerkki

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>Uutiset</li>
    <li>Sportit</li>
    <li>Sää</li>
  </ul>
</nav>
<section>
<h2>Uutisosa</h2>
<div id="post">
  <h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>Uutisartikkeli</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Kaikki oikeudet pidätetään.</p>
</footer>
</body>
</html>

Kokeile itse

<article>, <section> ja <div> -elementtien väliset erot

HTML5-standardissa <article>, <section> ja <div> -elementtien välillä on hyvin pieni ero, joka voi olla hämmentävä.

HTML5-standardissa <section>-elementti sijoitetaan lohkoksi.

<article>-elementti määritellään täydelliseksi itse sisältäväksi lohkoksi.

<div>-elementti määritellään lohko-elementiksi.

Miten ymmärtää tätä?

Yllä olevassa esimerkissä käytimme <section> -elementtiä liittyvien <articles> -elementtien kontteinana.

Mutta voimme myös käyttää <article> artikkelin konteissa.

Tässä on muutamia eri esimerkkejä：

Artikkelin <article> sisällä oleva <article>：
<article>
<h2>Tunnetut kaupungit</h2>
<article>
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki. Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki,</p>
<p>kaupunkialueella yli 13 miljoonaa asukasta.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</article>
<article>
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki, suuren Tokion alueen keskus,</p>
ja maailman väkirikkain suurkaupunki.</p>
</article>
</article>

Kokeile itse

<article> sisällä <div>:
<article>
<h2>Tunnetut kaupungit</h2>
<div class="city">
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki. Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki,</p>
<p>kaupunkialueella yli 13 miljoonaa asukasta.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</div>
<div class="city">
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki, suuren Tokion alueen keskus,</p>
ja maailman väkirikkain suurkaupunki.</p>
</div>
</article>

Kokeile itse

<article> sisällä <section> sisällä <div>:
<article>
<section>
<h2>Tunnetut kaupungit</h2>
<div class="city">
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki. Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki,</p>
<p>kaupunkialueella yli 13 miljoonaa asukasta.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</div>
<div class="city">
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki, suuren Tokion alueen keskus,</p>
ja maailman väkirikkain suurkaupunki.</p>
</div>
</section>
<section>
<h2>Tunnetut maat</h2>
<div class="country">
<h2>Englanti</h2>
<p>Lontoo on Englannin pääkaupunki. Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki,</p>
<p>kaupunkialueella yli 13 miljoonaa asukasta.</p>
</div>
<div class="country">
<h2>Ranska</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</div>
<div class="country">
<h2>Japani</h2>
<p>Tokio on Japanin pääkaupunki, suuren Tokion alueen keskus,</p>
ja maailman väkirikkain suurkaupunki.</p>
</div>
</section>
</article>

Kokeile itse