In Lesson 3, we introduced paired tags and you got to play around with your first taste of text formatting using the bold, italics, and unnderline pairs. In this lesson, we'll explore some additional tags that allow you to apply hierarchical formatting to blocks of text. These include:
The ability to render headings is built into every browser's capability. In HTML, there are 6 levels, with heading level 1 assuming the most importance and leading level 6 assuming the least. If you look a tthis page, you can see that I am using three levels of headings. I use a level 1 heading at the top of the page for my page title ("Lesson 4: Headings and Lists (oh my!)"), a level 2 heading for my "Let's Get Started!" subheading, and a level 3 heading for the sections that detail the individual learning objectives.
Headings are paired tags, so you can turn them off an on. In your code, they will appear like this:
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
When your browser renders this code, it looks like this:
The really neat thing about headings is that not only does your browser know that it needs to make these peices of text look different, it also knows that the content is less important that content with a higher level of heading. That means that when a search index like Google comes along to look at your page, the content will be recorded with the appropriate level of attention. Pretty cool, huh?
Lists are a really amazing little pieces of code that also come prebuilt into HTML. There are two types of lists:
Unordered lists are identified with the paired tags, <ul> and </ul>. Ordered lists are identified with the paired tags, <ol> and </ol>. regardless of whether you are working on an unordered or ordered list, list items are identified witht he paired tags, <li> and </li>. Let's take a look at an example of an unordered list, shall we?
<ul>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
Let's take a look at that in real life...
When the borwser sees the list tags, it automatically knows that it has found a list item and indents it. Pretty cool right? But what if you're making a list that needs numbers instead of bullets? That's an easy change. All you have to do is swap the <ul>s for <ol>s. The browser does the rest!
<ol>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ol>
And... viola!
You have already created a new document... now it's time to try out your new skills. For this assignment, the text content can be anythign you like, but you must include:
For bonus credit, try throwing in a paragraph or two and add some of the tags we learned in Lesson 3. Remember, practice makes perfect!
When you are done, save the file as MyLesson4.html and upload it to the folder with your name. You can check your work here. If you want to see an example of how this file might look, you can check mine out here.
Back to the lesson plan.