Thomas Wallace

Lectures and Resources

Structuring Content with HTML5

Prototype HTML Document Requirements

Sample Content –  Additional Information if you’d like to use it. Feel free to use alternate content if you prefer.

  • Proper Doctype – HTML5
  • Use XHTML Syntax (All tags lowercase and closed)
  • Properly declare the document language – Info
  • Head Section Requirements – Place and HTML Comment after each element in the head section explaining its purpose. 
    • Title
    • Metatags
      • Description
      • Author
      • Character Encoding
  • Body Requirements
    • Page regions (<div id=”section-name”> or HTML5 Structural Elements where they apply)
      • main – surrounds all elements within the body
      • header – surrounds <h1> text
      • section id=”content” – This section should contain examples of the following elements. You can use the sample content from this document or create your own if you prefer.
          • <h2> thru <h5>
          • <p>
          • <strong>
          • <em>
          • Three types of lists
            • ordered
            • unordered
            • definition list
          • A properly marked up quote (Examples of both an inline and block level)
          • A table consisting of 5 rows and 5 columns with a horizontal heading – Make sure you include the caption and scope attributes appropriately. (You can make up content for this)
          • <img> – the image source should be set to this image. Make sure you have all of the required attributes.
      • nav – That contains the following elements:
        • An unordered list with four list items as links with a title attribute.
          • Home – Links to index.html
          • About – link to https://en.wikipedia.org/wiki/University_of_Arkansas_at_Little_Rock
          • UALR – Set target attribute to _blank
          • Contact – Example of a mailto: link
      • footer
        • h6 that includes a copyright symbol, the year, your name, a link that will send an email,  and a Back to Top anchor link that returns the user to the top of the page.

Place an html comment after each closing <div> tag identifying which ID’d <div> you are closing.

Make sure you validate your html, upload to your web space and add a link to the assignment on your course homepage. If you get lost, refer to the document we created in class. Good Luck.