HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

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 tutorial focuses on:

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:

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:
<p>The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other</p> <a href="#">This is a link</a> <a href="#">This is another link</a> <p>The p tag is a block-level element. Notice how it begins on a new line, apart from the link</p>
Output:
The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other This is a link This is another link The p tag is a block-level element. Notice how it automatically begins on a new line, apart from the link

NOTE: Browsers will automatically place a line break before and after a div element.

NOTE: You cannot include the <div> tag inside the <p> tag.

Attributes of the <div> tag
Example:
<div id="menu"> <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
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:

<div id="menu" style="background: #d3e7dd;"> <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
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.

Attributes of the <span> tag
Example:
<p> <span style="color: #0077b3; font-weight: bold;">HTML</span> stands for Hyper Text Markup Language</p>
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.

An entire page using div and span:
<html> <head> <title>div and span layout</title> </head> <body> <div id="leftMenu" style="float: left; height: 108px; background: #f4f4f4; color: #035A85; font-family: Verdana, Arial, Helvetica;"> <a href="/html/">HTML</a> <br /> <a href="/css/">CSS</a> <br /> <a href="/javascript/">Javascript</a> </div> <div id="rightMenu" style="float: left; background: #eee; color: #4f4f4f; font-family: Verdana, Arial, Helvetica;"> <span style="color: #777778; font-weight: bold;"> Web tutorials </span> for all! </div> </body> </html>
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 tutorials. To learn more about using tags to apply a set of styles to a webpage check out HTML stylesheets page.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information