debashisbarman/semantic-layout.html

## semantic-layout.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="stylesheets/main.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header</h1>
            <h2>Subheader</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85"
                src="http://domain.tld/path/to/image.jpg"
                alt="foobar" />
            <figcaption>Foobar</figcaption>
        </figure>
    </aside>
    <footer>Footer</footer>
</body>
</html>

## semantic-layout.md

      
    Raw
  

              semantic-layout.md
            
          
    notes


You may omit the <header> and it's decendants if it's only a sole headline and replace it with <h1>.
In this example the navigation <nav> is a page specific navigation, hence after the page header <header>. If the <nav> is a global navigation, it might also be before the first page header <header>.


## semantic-layout.txt
  +-----------------------------------+
  |               header              |
  +-----------------------------------+
  |                 nav               |
  +---------------------+-------------+
  |                     |             |
  |       section       |    aside    |
  |                     |             |
  |                     |             |
  | +-----------------+ |             |
  | |     article     | |             |
  | +-----------------+ |             |
  | |     article     | |             |
  | +-----------------+ |             |
  +---------------------+-------------+
  |               footer              |
  +-----------------------------------+
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Title</title>
	<link href="stylesheets/main.css" rel="stylesheet" />
	</head>
	<body>
	<header>
	<hgroup>
	<h1>Header</h1>
	<h2>Subheader</h2>
	</hgroup>
	</header>
	<nav>
	<ul>
	<li><a href="#">Menu Option 1</a></li>
	<li><a href="#">Menu Option 2</a></li>
	</ul>
	</nav>
	<section>
	<article>
	<header>
	<h1>Article #1</h1>
	</header>
	<section>
	This is the first article.
	</section>
	</article>
	<article>
	<header>
	<h1>Article #2</h1>
	</header>
	<section>
	This is the second article.
	</section>
	</article>
	</section>
	<aside>
	<section>
	<h1>Links</h1>
	<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	</ul>
	</section>
	<figure>
	<img width="85" height="85"
	src="http://domain.tld/path/to/image.jpg"
	alt="foobar" />
	<figcaption>Foobar</figcaption>
	</figure>
	</aside>
	<footer>Footer</footer>
	</body>
	</html>
	+-----------------------------------+
	\| header \|
	+-----------------------------------+
	\| nav \|
	+---------------------+-------------+
	\| \| \|
	\| section \| aside \|
	\| \| \|
	\| \| \|
	\| +-----------------+ \| \|
	\| \| article \| \| \|
	\| +-----------------+ \| \|
	\| \| article \| \| \|
	\| +-----------------+ \| \|
	+---------------------+-------------+
	\| footer \|
	+-----------------------------------+