HTML div and span tags
Tags are great for displaying whatever content you need -- like the <p> tag for paragraphs, or the <img> tag for images. But what if you need to group a tag or a set of tags inside one container to create some kind of relationship on a webpage? Like a set of links and an image for a menu, or all the text on the page for the content.
This lesson focuses on:
- Grouping content
- The <div> tag
- The <span> tag
- Div vs. Span
- div, span, and CSS
Grouping content
Grouping of content is one of those things that happens behind the scenes at a website. You see a webpage, but you do not know how the author of that webpage set up relationships between the various items on the page. Doing so is important for styling as well as for a logical organization.
On this webpage, we have five containers that group together a set of elements:
-
Header
The top part of this page. It contains the site name, slogan, search box, and top menu. -
Left side navigation
The left side of this page. It contains the menu for this sites content. -
Content
The center of this page. It contains the actual content of the page. -
Right side navigation
The right side of this page. It contains some more of the menu for this sites content, the things we could not fit on the left side. -
Footer
The footer of this page. It contains links that are generally reserved for the footer of a webpage such as 'copyright information', 'terms of use', and a copyright statement and a few images related to the validation of the construction of this webpage.
The <div> tag
The <div> tag is a container for a group of elements. It is not seen on a webpage, but works behind the scenes to organize the layout of a webpage a certain way.
Div is a block-level element which means that it will automatically begin on a new line in the browser. This is opposed to inline elements which continue on the same line.
Example to illustrate the difference between block level and inline elements:
Output:
NOTE: Most browsers will automatically place a line break before and after a div element.
NOTE: You cannot include the <div> tag inside the <p> tag.
Example:
Output:
In the above example, we placed a set of related links in a <div> called 'menu'
We can now give our menu it's own unique background color to differentiate it from the rest of the page. We'll use the style attribute for this.
Output:
In the above example, the background color differentiates the menu from the rest of the page in some way. This makes it clear that this is not just some links on the page, but a set of elements that have some kind of relationship within that container. It is this grouping of content that makes it easier for the user to navigate a webpage, and understand what is what.
The <span> tag
The <span> tag is similar to but different from the <div> tag. Unlike the <div> tag for which the browser will place a line break before and after a div element, there is no such formatting for the <span> tag.
While the <div> tag should be used for grouping a set of related elements to create a relationship between them on a webpage, the <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
NOTE: Div is a block-level element, while span is an inline element.
Example:
Output:
HTML stands for Hyper Text Markup Language
Notice how only the word 'HTML' is blue and bold in the above example. This is because we set it that way using the <span> tag. The <span> tag is effective this way because it can be used to change just part of an element instead of that entire element.
div vs. span
The <div> tag should be used to separate the contents of a webpage into several parts based on the relationships between the elements on the webpage. The <div> tag should be used for grouping content. Use the <div> tag for things such as columns in a layout, and the location of a menu on a page. The <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
div, span, and CSS
Not just for grouping sets of related tags or setting apart individual elements on a webpage, the <div> and <span> tags are actually an integral part of styling the layout of webpages.
The <div> tag is used much more than the <span> tag, but the <span> tag still plays an important role in building webpages.
Example:
Output:
In the above example, we create a layout with two columns with various styling. We divide the page into two columns (leftMenu and rightMenu) using the <div> tag, and we use the <span> tag to change the color of two words.
The <div> tags divide the page into two columns (one column is a menu for the page and the other column is the page's content). The styling we used is in CSS commands. CSS is a separate language, to learn more about it check out our CSS section. To learn more about using tags to apply a set of styles to a webpage check out HTML stylesheets page.
