Skip to content
Snippets Groups Projects
Commit 4d9c531a authored by AB0410's avatar AB0410
Browse files

WV-E1 done

parent c9973455
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 113 additions and 0 deletions
article.html 0 → 100644
+ 113
− 0
View file @ 4d9c531a
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Semantic HTML</title>
</head>
<body>
<div class="page">
<header>
<h1>Interneting Is Easy!</h1>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Sign Up</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h1>Semantic HTML</h1>
<p>By Troy McClure. Published <time datetime='2017-1-3'>January
3rd</time></p>
</header>
<!-- Look! A fake advertisement! -->
<aside class='advert'>
<img src='some-advert-image.png'/>
</aside>
<p>This is an example web page explaining HTML5 semantic markup.</p>
</article>
<article>
<section> <!-- Add this -->
<h2>The Document Outline</h2>
<p>HTML5 includes several “sectioning content” elements that
affect the document outline.</p>
<figure>
<img src='semantic-elements.png'
alt='Diagram showing <article>, <section>, and <nav> elements'/>
<figcaption>New HTML5 semantic elements</figcaption>
</figure>
<h3>Headers</h3>
<p>The <code>&lt;header&gt;</code> element is one such sectioning
element.</p>
<h3>Footers</h3>
<p>And so is the <code>&lt;footer&gt;</code> element.</p>
</section> <!-- And this -->
<section> <!-- This too! -->
<h2>Inline Semantic HTML</h2>
<p>The <code>&lt;time&gt;</code> element is semantic, but it’s not
sectioning content.</p>
</section> <!-- Don't forget this -->
</article>
<h2>Inline Semantic HTML</h2>
<section>
<!-- This will be an "Untitled Section" -->
<p>The <code>&lt;time&gt;</code> element is semantic, but it’s not
sectioning content.</p>
</section>
<article>
<footer> <!-- Add this -->
<p>This fake article was written by somebody at InternetingIsHard.com,
which is a pretty decent place to learn how to become a web developer. This
footer is only for the containing <code>&lt;article&gt;</code> element.</p>
<address>
Please contact <a href='mailto:troymcclure@example.com'>Troy
McClure</a> for questions about this article.
</address>
</footer> <!-- And this -->
</article>
<aside class='sidebar'>
<h2>Sidebar</h2>
<p>Some sidebar content</p>
<nav>
<h3>HTML &amp; CSS Tutorial</h3>
<ul>
<li><a href='#'>Introduction</a></li>
<li><a href='#'>Basic Web Pages</a></li>
<li><a href='#'>etc...</a></li>
</ul>
</nav>
<nav>
<h3>JavaScript Tutorial</h3>
<ul>
<li><a href='#'>Introduction</a></li>
<li><a href='#'>Hello, JavaScript</a></li>
<li><a href='#'>etc...</a></li>
</ul>
</nav>
</aside>
<footer> <!-- This, too -->
<p>&copy; 2017 InternetingIsHard.com</p>
</footer> <!-- Don't forget to close it! -->
</div>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment