Here's some example HTML:


              <article>
  <header>
    <h1>Are Fats Unhealthy? The Battle Over Dietary Guidelines</h1>
  </header>
  <p>People are passionate about food.</p>
</article>

With HTML5, we have a lot of elements to choose from.

Our goal is to mark up our content semantically.

Not semantic:


              <div>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<div>
  <div>
    <div>Some heading</div>
  </div>
  <div>
    <div>Some content</div>
  </div>
  <div>Some more content</div>
  <div>Some tangential content</div>
</div>

Semantic:


              <nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>
<article>
  <header>
    <h1>Some heading</h1>
  </header>
  <section>
    <p>Some content</p>
  </section>
  <footer>Some more content</footer>
  <aside>Some tangential content</aside>
</article>

Finally, here is an example basic structure of a complete HTML document:


              <!DOCTYPE html>
<html>
  <head>
    <title>Page title...</title>
    <!-- The head is for document metadata. -->
  </head>
  <body>
    <!-- The body is where you put your HTML. -->
  </body>
</html>

Try it!

Using the following structure as a template:


              <!DOCTYPE html>
<html>
  <head>
    <title>Page title...</title>
    <!-- The head is for document metadata. -->
  </head>
  <body>
    <!-- The body is where you put your HTML. -->
  </body>
</html>

Create a news article document called news.html using at least the following elements:

<p>, <footer>, <header>, <h1>, <h2>, <h3>

Anatomy of CSS code:


p {
  color: red;
}

Given the following HTML:


              <p>Introductory paragraph.</p>
<p>Main content.</p>
<p>Concluding paragraph.</p>

And the following CSS:


p {
  font-size: 16px;
}

All three paragraphs will have a font size of 16 pixels.

HTML:


              <p class="intro">Introductory paragraph.</p>
<p>Main content.</p>
<p>Concluding paragraph.</p>

CSS:


p {
  font-size: 16px;
}

.intro {
  font-size: 20px;
}

An element's size is calculated by using the *box model*.

For a given element, like <p>My paragraph</p>:

My paragraph

Try messing around with the width, padding, border, and margin properties for elements in your news articles.