HTML <div> and <span> Tags

The default HTML tags are very useful, and can be used to produce a very wide range of layouts and text styles. However, there are times when we just can't get the effect we want by using these tags. Luckily there is a way we can create our very own HTML tags - by using the <span> and <div> tags.

<span> and <div> (short for division) work in exactly the same way as other HTML tags - we use the opening and closing tags to define a section of text, and we can later change the styling of this section.

The great thing about <span> and <div> tags is that we can use them as many times as we want to define different styles for our HTML, effectively giving us infinite control over the appearance of our web page. We can do this by assigning each of our tags an "id". For example, say we wanted to create two different tags that would display the defined text in either red or blue. There are no default tags to do this, so we could use two span tags instead - <span id="red"> and <span id="blue">. Using our CSS style sheet we could then define the properties of these tags, in this case telling the web browser to display all text within the "red" tag in red, and everything inside a "blue" tag in blue (We will cover how to set styles later on in the CSS Guide).

Span and div HTML tags work in almost exactly the same way, but they have one key difference. Span tags are what is known as "inline" tags. This means they can be used to define small chunks of text, such as individual words in a paragraph, in much the same way as we would use the strong tag to make individual words bold. Div tags on the other hand are "block-level" tags. This means that they define entire sections of code, in exactly the same way as <p> tags define a paragraph. This means we cannot use a <div> tag in the middle of a paragraph. <div> tags also force a line break, just like paragraph tags, whereas <span> tags don't.

We can also use the "id" selector with default HTML tags. This gives us the ability to use the standard tags, but modify their appearance. For example, we might want some paragraphs to be displayed in italic font. For this we might set up a new paragraph tag, <p id="italic">. We could then use CSS to set the properties for this type of paragraph, and have it appear differently from the normal <p> paragraph.

We will cover <span> and <div> tags in more detail later on, in the CSS guide, so don't worry if you haven't grasped them fully; for now you just have to be aware that they exist to give us more options when it comes to styling our web page text.