HTML Practice and Review Exercise

Create This Mockup

See if you can create the HTML for this mockup by following the steps below. Don't worry about the CSS. We'll add that tomorrow!

Initializing a page

1. In your dev folder:
   • create a new folder called html_blog_practice
   • create an index.html
   • set up a basic html page with DOCTYPE, html, head, and body tags.
2. Add some content to the page
3. Open the page in your browser

basic tags

1. Pretend you are preparing a paper with title, headings, and sub headings
2. Add the relevant heading tags
3. Add some fake content as if they were paragraphs

specific structure

1. In your page, add header, footer, main, section, and nav tags where appropriate
2. insert placeholder text

elements

1. Add a list to your navigation section. Put some items in with content. Later we'll make these links.
2. Choose some random chunks of text to make bold and italics

decorative elements

1. After each sub section of your page, add a horizontal line

List some common tags that have attributes

1. In your navigation, add actual links to other sites
2. For each sub section, between the header and the beginning of the placeholder text, add an image.

Describe what Semantic HTML means

1. Go to a favorite web page of yours
2. Write down what kind of tag you think is being used for each piece of text

Other Topics

For information on accessibility and search engine optimization, see Accessibility and SEO.

For information on HTML5 Boilerplate, see HTML5 Boilerplate.