HTML5 Migrare. Schimbare la elemente semantice HTML5.

Schimbare la elemente semantice HTML5

CSS-ul existent conține ID-uri și clase pentru stilizarea elementelor: 
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}
Înlocuiți cu stiluri CSS egale pentru elemente semantice HTML5: 
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

header, footer {
  padding: 10px;
  color: white;
  background-color: black;
}

section {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

nav ul {
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 5px;
}
În cele din urmă, schimbați elementele în elemente semantice HTML5:

Exemplu: 
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>Știri</li>
    <li>Sport</li>
    <li>Vremea</li>
  </ul>
</nav>

<section>
  <h2>Secțiunea știri</h2>
  <article>
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
  <article>
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
</section>

<footer>
  <p>&copy; 2014 Monday Times. Toate drepturile rezervate.</p>
</footer>

</body>