More HTML StructureS2C Home « More HTML Structure

In Lesson 2 of the Basic HTML Tutorials we explored basic HTML structure, it's now time to introduce the other structural tags. In this lesson we learn about the </div> and </span> tags and how they affect the structure of our HTML.

The <div> Tag

The <div> tag and its' closing </div> tag doesn't affect our web page directly but is generally used to group blocks of HTML together for styling with CSS.

See CSS Advanced Tutorials - Lesson 6 - Layout for more on this.

The <span> Tag

The <span> tag and its' closing </span> tag doesn't affect our web page directly but are generally used to group some inline HTML together for styling with CSS.

So Let's Add the New Structures

As mentioned above the </div> and </span> tags do nothing on their own. So to demonstrate the tags we are going to use a little CSS, without going into CSS sematics, which are best left for the CSS tutorials.

Open the file with Notepad we created and tested in Lesson: 1 What is XHTML

You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_1_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML follows -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Intermediate Lesson 2 - More HTML Structure
</title>
</head>
<body>
<div style="font-style:italic">
  <h2>The Div and Span Tags</h2>
  <p>The Colours of the Rainbow are:</p>
   <ol>
     <li><span style="color:red">Red</span></li>
     <li><span style="color:orange">Orange</span></li>
     <li><span style="color:yellow">Yellow</span></li>
     <li><span style="color:green">Green</span></li>
     <li><span style="color:blue">Blue</span></li>
     <li><span style="color:indigo">Indigo</span></li>
     <li><span style="color:violet">Violet</span></li>
   </ol>
</div>
</body>
</html>

Save the file in the C:\_HTMLIntermediate folder as lesson_2_webpage.html and close the Notepad.

save more structure

Viewing Our Changed File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

more structure

Reviewing Our Changes

As you can see from the screenprint the italic font style was applied to everything between the opening and closing <div> tags. We applied some colours to each list item using the <span> tag. Although both these tags do nothing on their own, when combined with CSS they are pretty powerful. We will investigate these tags further in the CSS tutorials.

Lesson 2 Complete

That's about it as far as HTML structure goes, play around with the HTML until you're comfortable with these tags.

Related Tutorials

HTML4 Basic Tutorials - Lesson 2 - Basic HTML Structure

CSS Advanced Tutorials - Lesson 6 - Layout

What's Next?

In the next lesson we look at some formatting tags that change the appearance of our text.

HTML4 Reference

The <div> division tag

The <span> span tag

go to home page Homepage go to top of page Top