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.
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>
<!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’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 © 2012</p></footer> </body> </html>