HTML5 Video Tutorial

Part 5 - New Semantic Elements

The following code is from the Video.

New Semantic Elements <article> <aside> <footer> <header> <main> <nav> <section>

The following is the HTML code for a sample web page that uses semantic elements that are new to HTML5.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>News</title>
  </head>
  <body>
    <header>
      <h1>News</h1>
      <p>Local and National News</p>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="archive.html">Archives</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>Local News</h2>
        <article>
          <header>
            <h3>Fire fighters rescue man from building</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>

        <article>
          <header>
            <h3>New Library to be built</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>
      </section>

      <section>
        <h2>National News</h2>
        <article>
          <header>
            <h3>Snow storm is making travel difficult</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>

        <article>
          <header>
            <h3>Thousands are without power</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>
      </section>
    </main>

    <aside>
      <h2>Be a news reporter</h2>
      <p>If you see news happening - Send us a Text.</p>
    </aside>

    <footer>
      <p>Footer Information</p>
    </footer>

  </body>
</html>