HTML 5 Introduction

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Block Elements

There are several primary block elements used in HTML5. We will look at some new and old tags that complement the <head> and <body> duo.

  • <header>
  • <nav>
  • <article>
  • <aside>
  • <footer>
  • <blockquote>


<header>

The <header> tag is a container for introductory materials in a document or section. <header> can be used multiple times in a document and usually contains at least one <h1>-<h6> element (in order to validate).

<header>
  <h1>Section/Document Header</h1>
  <p>A brief description of this section/document</p>
</header>

Further reading:

<nav>

The <nav> tag is used to demarcate a section containing navigation anchors (links) to other content or sections. The anchors can be nested within a list such as an unordered list <ul>.

<nav>
  <h1>Navigation</h1>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#contact">Contact Us</a></li>
  </ul>
</nav>

Further reading:

 

<article>

The <article> tag designates a region of a document that is self-contained. <article> can be an article, blog post, news story, etc.

<article>
  <img src="image.webp" alt="An image." />
  This is the content for the article.
</article>

Further reading:

<aside>

The <aside> tag contains information that is tangentially related to to the primary content. Examples can include anecdotes, sidebars, external links, keyword definitions, etc.

<article>
  <p>This is an article HTML5</p>
  <aside>
    HTML5 is often used in conjunction with CSS and JavaScript. 
  </aside>
</article>

Further reading:

<footer>

The <footer> element is located at the end of a content section, such as <html>, and will contain information including licensing details, addresses and contact information,  and links to site-wide documents such as a community aggreement.

<html>
  <article>Article content.</article>
  <footer>
  Creative Commons license.
  </footer>
</html>

Further reading:

<blockquote>

The <blockquote> tag is used to indicate a quotation or citation. The cite attribute is used within a <blockquote> tag to reference the origin of the quote.

<blockquote cite="Caleb">on the last element you listed 'bockquote', should be blockquote</blockquote>

Further reading:

Task

  1. Put together a news article using each of the above tags and any tags described in previous tasks.
  2. Post a link to your news article in the discussion area below.
  3. Be sure to review each others' news articles and comment on techniques and content as desired :-)

Hint: Use the following diagram as an example of how block elements are nested.

Note: CSS is required to obtain the layout in the following diagram.

HTML5 Block Elements

Task Discussion


  • Anonym   July 18, 2011, 11:36 a.m.

    Wait a minute how do we figure out the CSS for this and where exactly do we put "section" in our html5 document?

  • Michael   Aug. 16, 2011, 7:15 p.m.
    In Reply To:   Anonym   July 18, 2011, 11:36 a.m.

    One way would be to view the source code (via right-click). 

  • Michael   Aug. 16, 2011, 7:15 p.m.
    In Reply To:   Anonym   July 18, 2011, 11:36 a.m.

    One way would be to view the source code (via right-click). 

  • Brylie Oxley   Aug. 22, 2011, 1:51 a.m.
    In Reply To:   Anonym   July 18, 2011, 11:36 a.m.

    We haven't covered CSS yet. I was just pointing out that the layout would not be possible without using CSS. Are you ready to delve into a little bit of CSS?

    The <section> is located anywhere within the <body>.

  • Albert Rosa   July 5, 2011, 5:04 p.m.

    I have layed out the page as instructed no real content outside of lorem ipsums

     

    http://htmlpad.org/html5blockElements/

    Now this looks much better in chrome than it does in FF.

  • (aleb   June 23, 2011, 11:48 p.m.

    When would be best to use an 'Ordered' list versus an Unordered list?

    Btw, under the nav section, I think on the last element you listed 'bockquote', should be blockquote, unless of course, I'm missing something.;-)

    Thanks,

    (aleb

  • Brylie Oxley   June 24, 2011, 12:51 a.m.
    In Reply To:   (aleb   June 23, 2011, 11:48 p.m.

    Discussions regarding <ol> and <ul> can be posted here.

    Ordered lists are for ordered sequences, e.g. steps to open a can. Un-ordereed lists can be for  non-sequential lists such as a birthday wishlist.