Emily Kauffman

Back to teaching

CIS 275 Lecture 12: HTML5 Structural Elements and Exam Review


  1. Learn HTML5 structural elements
  2. Review for CSS test
  3. Practice

HTML5 Structural Elements

  • HTML5 structural elements are basically specific types of DIVs
  • Makes HTML elements more meaningful
  • You'd more than likely have these elements on your page already...
  • We'll cover this more after spring break! Just know what each of these do for now...
  • <header> - the header, contains site title (not <title>)
  • <nav> - navigation links
  • <main> - primary content area
  • <section> - thematic grouping of content, generic section, usually associated with a heading (h1-h6)
  • <aside> - section outside of the primary page content
  • <footer> - ...the footer
  • <article> - page section that could be standalone (ex. blog post, comment, forum post)
  • <div> - we can still use these when none of the above make sense!
<!-- old way -->
  <div id="page">
    <div id="header">
      <div id="navigation">
      </div><!-- /navigation -->
    </div><!-- /header -->
    <div id="content">
      <div class="article">Some content</div>
      <div class="article">Some more content</div>
    </div><!-- /content -->
    <div id="sidebar">
      <p>Some content goes in the sidebar...</p>
    <div id="footer"></div>
  </div><!-- /page -->
<!-- new way -->
  <div id="page">
    <div id="content">
      <article>Some content</article>
      <article>Some more content</article>
    </div><!-- /content -->
      <p>Some content goes in the sidebar...</p>
    <footer>footer content</footer>
  </div><!-- /page -->

Exam Review

  1. Principles of Graphic Design. Describe each and give examples on how to implement them in a web page.
  2. Typography/Color theory
  3. Design principles for web design (design basics lecture)
  4. CSS rules covered in the book or class
  5. What makes up a CSS rule?
  6. How do you apply CSS to HTML?
  7. Box model
  8. HTML elements discussed thus far (tables, forms, text)
  9. HTML5 Structural Elements

Don't Need to Know for Exam (but should be familar with)

  1. Principles/Elements of Art
  2. Atomic Web Design...yet
  3. Anything from the human processing slides...yet

In Class Exercises

Part 1: Finish last class's exercises

If you want to work on this more, now is the time. When/if you're done, comment the following on today's class site:

  1. Something you found that was challenging
  2. Something you found that you thought was interesting
  3. Something you'd like more practice with or further explanation on, if anything

Part 2: Finish the homework

  1. Where appropriate, replace your existing structural elements with the HTML5 elements we've covered from today.
  2. Once you've completed the homework, zip the project and email it to me. Don't spend all of class working on this so you have time to start today's exercises. When you're ready to move on, email it to me. I won't be grading for correctness - just to see where everyone is at with the course content so I can adjust my timeline for after spring break.

Part 3: More Practice!

Choose an event that's coming up and make a website for it. Include the following elements:

  • Color scheme: think back to design basics lecture. Be able to explain why you selected it.
  • At least one custom font NOT included in the list of accepted web fonts (i.e. download one from the web and include it in your CSS). Check out Google Fonts or FontSquirrel for free fonts.
  • A table with rows that have an alternating background color
  • Navigation section with links inline
  • A sidebar to the left with the main content to the right
  • A fixed positioned element
  • An absolute positioned element
  • A relative positioned element
  • A local (inline) CSS style (Yeah, it's not great. But you should be able to write/recognize them.)
  • Use at least five of the HTML5 structural elements we covered today
  • Be able to identify how you've followed CRAP principles
  • Extra: A section of your webpage with a background image set (check out chp. 16 for help)