HTML shell document

by Justin Harker

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<body>
<header>
<h1>HTML5 Overview</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" width="200" />
<h4>A header element typically contains:</h4>
  <ol>
  <li>one or more heading elements (from h1 - h6)</li>
  <li>A logo or icon</li>
  <li>authorship information</li>
  </ol>
</header>
<section>
<h1>HTML5 Overview</h1>
<p>HTML5 is used to structure documents on the web.
It contains a lot of useful elements (or tags).</p>
Used for grouping together content of similar meaning, the <strong>section</strong>  element should replace a lot of
overuse of the <em>div</em> tag. The section element is a big improvement because it actually has semantic meaning—it means that “this content is related” (div could have been used to denote a sidebar, or a
pagewrapper used to apply formatting to the entire document; it didn’t necessarily mean that the content contained within had any connection):
<article class="feature" Id="feature-1">
<h1>Swingline Stapler</h1>
<p>This workhorse stapler brings you a solid and consistent performance that makes it an
industry standard. An all-metal die-cast base for years of durability. A performance driven
mechanism with an inner rail for long-term stapling integrity. Ease of use, refined design,
time-tested features: exactly what you'd expect from America's #1 stapler.</p>
</article>
<article class="feature" Id="feature-2">
<h1>Black Standard Stapler</h1>
<p>Not as exciting as the Swingline Stapler, but a classic stapler nonetheless! </p>
</article>
</section>
<footer>
<p>Contents of this page licensed under a Creative Commons Share Alike license.</p>
</footer>
</body>
</html>

CSS

/*the strong element defines important text. default style - bold */
strong {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline; /*should not underline text unless it is also a hyperlink*/
}
/*the em element renders as emphasized text. default style - italics */
em {
  color: red;
  font-weight: normal;
  font-style: italic;
  text-transform: capitalize;
  text-decoration: none;
}