به عناصر معنایی HTML5 تغییر دهید

CSS موجود حاوی شناسه‌ها و کلاس‌هایی برای استایل دادن به عناصر است:



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;
}

با سبک‌های CSS برابر برای عناصر معنایی 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;
}

در نهایت، عناصر را به عناصر معنایی HTML5 تغییر دهید:


Example



<body>

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

<nav>

 
<ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>


<section>
  <h2>News Section</h2>
  <article>
    <h2>News Article</h2>

   
<p>Lorem ipsum dolor sit amet..</p>
  </article>
  <article>
    <h2>News Article</h2>

   
<p>Lorem ipsum dolor sit amet..</p>
  </article>
</section>


<footer>
  <p>&copy; 2014 Monday Times. All rights reserved.</p>

</footer>

</body>