Lesson 3: Common Tags

Overview

Now that the foundation is laid for the portfolio home page, we can begin to add the content. In this lesson you will learn to use some of the more commonly used tags.

Learner Outcomes

At the completion of this exercise:

you will be able to use some common tags for adding content to a web page including <h1>, <h2>, <h3>, <p>, and <div>
You will be able to apply the concepts of nesting and assigning attributes to tags.
You will be able to properly utilize headings and paragraphs to structure content on a web page

Activities

Return to index.html in the text editor.
Review the outline of your home page that you sketched in the Pre-coding Lesson of this unit. The outline should include:
- A main heading that reads "Web Portfolio"
- A block of text containing information about you. At a minimum this should include your name and email address.
- A block of text containing information about the course. This might include information such as the name of the course, teacher, section, school, and year.
- A paragraph that provides an overview of the content of your portfolio.
- A sub-heading for each of the remaining units of this curriculum (Unit 2 through 7).
- Some placeholder content beneath each sub-heading (something like "This section will be completed soon.")
Now your task is to translate that outline into HTML code. To do so, consider each piece of content, and ask "What is this?" Try to answer that question with an HTML tag. Is it a heading? Is it a subheading? Is it a paragraph? The more your work with HTML, the easier it will be to figure out which tags are most appropriate for a given piece of content.
Begin with the main heading of the page, "Web Portfolio". What is that? It's the main heading of the page. In HTML terms, it's an <h1>. To mark up your heading as an <h1>, simply place the cursor on a blank line directly below the body tag, <body>, and enter this:
<h1>Web Portfolio</h1>.

The <h1> tag marks the main heading within an HTML document. Browsers typically display this heading in a larger font than all other headings and text, although its appearance can be changed using CSS (more on that in Unit 3).

When finished, save, then refresh your browser to see your work. If you did everything correctly, you should see your heading at the top of your web page.
Next, markup the two blocks of content, the one with information about the class and the one with information about you. What are these? They're not headings. They're not paragraphs. In fact, they're just blocks of related text for which there really isn't a direct matching HTML tag. For blocks of related content, the best choice is the <div> element. So, wrap each of your two blocks in <div> and </div>. Since each of these blocks of text contains more than one item, we'll probably want each item to appear on a line by itself, so we'll want to use a <br/> tag to force a line break. Here's an example:
```
<div>
Judy Jetson<br/>
judy@ohs.edu
</div>
```
Make one <div> for each of your blocks of text. Then, refresh your browser and check.
The remaining content from your sketch included an overview paragraph, a sub-heading for each unit 2 through 7, and some text beneath each sub-heading to serve as a placeholder until you're ready to add more content. Since each unit is a sub-heading, the appropriate HTML markup would be <h2></h2>. And the text that follows each heading is a paragraph (paragraphs don't have to be more than one sentence), so that should be marked up with <p></p>. Here's what the markup for Unit 2 would look like:
<h2>Unit 2</h2>
<p>This section will include links to my work for this unit, once completed.</p>

After you have added the Unit 2 content to your web page, save and refresh your browser to check your work. If all is well, copy and paste this same content for the remaining units (but remember to change the Unit number after pasting).
Finally, take all the content you added in the previous step (everything from the overview paragraph down to the final paragraph under Unit 7) and wrap it in a <main> element. The opening <main> tag should precede the overview paragraph, and the closing </main> tag should be at the bottom of your document, just before the closing </body> tag. The purpose of the <main> element is to provide a container for all the main content of the page. This enables screen reader users to jump directly to the main content, bypassing all the other stuff. Plus it will come in handy later (in Unit 3) when we start to stylize the page using CSS.

Resources/Online documents

All done?

After you have saved the changes to index.html, return to your browser and refresh to see your changes. Are all your heading and subheadings displayed? Show your instructor your results before starting the next module.