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
- An unordered list with four list items as links with a title attribute.
- 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.
- Page regions (<div id=”section-name”> or HTML5 Structural Elements where they apply)
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.