HTML5 document structure – Working Example

Given HTML5 snippet is a live tutorial to show how HTML5 document structure looks like and how web browser interprets HTML5 script. This tutorial is part of my appreciated article – HTML5 Basic Document Structure that you should go through for complete theory behind the tutorial.

Visual illustration

HTML5 document structure

HTML5 basic structure

<!DOCTYPE html>
<html lang="en">
<head>...</head>

<body>
   <header>...</header>
   <nav>...</nav>

   <article>
      <header>...</header>

      <section>
         <p>...</p>
      </section>

      <section>
         <p>...</p>
      </section>

      <footer>...</footer>
   </article>

   <aside>...</aside>

   <footer>...</footer>
</body>
</html>

Working example

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <title>CAREER EXPLORATION</title>
   <link rel="stylesheet" href="style.css" />
</head>

<body>
   <header><h1>Art and Design</h1></header>
   <nav>
      <ul>
         <li>New Articles</li>
         <li>Artists</li>
         <li>Career</li>
         <li>Portfolio</li>
      </ul>
   </nav>

   <article>
      <header><h1>Realizing as a career option</h1></header>
      <section>
         <header><h1>Understanding Visual Art</h1></header>

         <p>I would love to define the term art as
         <q>A visible impression of human mind in the form of colors and shapes,
         which is inspired by spontaneous feelings or emotions</q>.
         The term attracts most of us because of its use in today&rsquo;s commercial
         world and it attracts me because of its history. I am charmed by the fact that
         the art was invented before a language was developed. The humans were able to
         tell stories through line art before they could communicate well.</p>

         <p>However, we all love art and wish to posses beautiful things in our lives.
         These beautiful things you see in supermarkets and love to shop are also pieces
         of art and crafted by designers to suit your eyes. An art and a design are two
         different things technically but we can combine them by the term visual art.</p>
      </section>

      <section>
         <h1>Oppurtunities</h1>
         <p>There are unlimited possibilities for an artist (or a designer) because visual
         art has explored its branches more than you can imagine. While options are really
         many but you have to be specialized in one to start a career.</p>
      </section>

      <footer> <p>Posted by: Manoj Chauhan</p></footer>
   </article>

   <aside>
      <h1>Search career options</h1>
      <ul>
         <li>Communication Design</li>
         <li>Product Design</li>
         <li>Graphic Design</li>
      </ul>
      <p>You can search for more options on our <strong>Career</strong> Page</p>
   </aside>

   <footer><p>Copyright &copy; 2012</p></footer>
</body>
</html>

View browser interpretation of the above code »
The document is a valid HTML5 as passed by html5.validator.nu.

Ad

0 comments