Skip to content

Instantly share code, notes, and snippets.

@michaelkornblum

michaelkornblum/semantic-html-ex4.html

Last active May 13, 2019 21:56
Show Gist options
  • Save michaelkornblum/d40babdf7875bea1026e79cf0042c3a6 to your computer and use it in GitHub Desktop.
Save michaelkornblum/d40babdf7875bea1026e79cf0042c3a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
semantic-html-ex4.html
```html
<!-- Example Four -->
[...]
<body>
<!-- The Wrapper is for stylistic purposes only. -->
<div class="wrapper">
<!-- The Banner is also for stylistic purposes only. -->
<div class="banner">
<h1>Logo</h1>
<!-- Site Navigation -->
<div class="site navigation">
<ul>
<li><a href="link-1.html">Link 1</a></li>
<li><a href="link-2.html">Link 2</a></li>
<li><a href="link-3.html">Link 3</a></li>
</ul>
</div>
<!-- End Site Navigation -->
</div>
<!-- End Banner -->
<!-- The Side Content Area is for tangential information that is not directly related to the pages main content. -->
<div class="side-bar">
<h2>Side Content</h2>
[...]
</div>
<!-- End Side Content Area -->
<!-- The Main Content Area is for the main site content of this page. In this case, its where we put our blog post. -->
<div class="main-content">
<h2>Article Title</h2>
[...]
<!-- Section Areas are used to organize our posts into sub-topics. There can be multiple Section Areas. -->
<div class="article section">
<h3>Article Section</h3>
[...]
</div>
<!-- End Section Area -->
</div>
<!-- End Main Content Area -->
<!-- The Footer Area is where we put copyright notices, terms of use and other legalese. -->
<div class="footer">
<p class="legalese">Footer Content</p>
</div>
<!-- End Footer Area -->
</div>
<!-- End Wrapper Area -->
</body>
[...]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment