1,105,334 Community Members

What is DIV & SPAN

Member Avatar
ashishjha54
Light Poster
28 posts since May 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

hello coders,
nowa days i see everybody is using DIV and SPAN in there webpage .i have a little idea about this but i wanna know everything about this.can you tell me where can i get complete information about DIV and SPAN.you can also use this forum to clear my doubt.i wanna know everything about DIV and SPAN.
i also see that people are using

<tr>
		<th class="thLeft" width="150" height="26" nowrap="nowrap">something</th>
		<th class="thRight" nowrap="nowrap">something</th>
	</tr>

what is this <th> </th> tags for?
please satisfy my hunger for knowledge.
thank you.

Member Avatar
tgreer
Made Her Cry
1,885 posts since Dec 2004
Reputation Points: 189 [?]
Q&As Helped to Solve: 45 [?]
Skill Endorsements: 2 [?]
Team Colleague
 
0
 

DIV is "division", and is a block-level container object. It's used to divide a page into discrete, high-level "sections". For example, if you had a navigational section and content section, each would go into its own "div".

SPAN is an inline container object. It is used to set off elements that appear "within" content. It is mainly used to replace the formatting tags such as <b>, <i>, <em>, and <strong>. Since those are presentational tags, they have been superceded by CSS.

The <th> is "Table Header", and is meant for just that... to specify the column headers of a table.

Complete information on all things HTML, XHTML, etc:

http://www.w3.org/TR/REC-html40/struct/global.html

Member Avatar
abhikaul
Newbie Poster
1 post since Jun 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hey Guys :)Check this link http://www.lissaexplains.com/html7.shtml

Member Avatar
rajarajan07
Nearly a Posting Virtuoso
1,448 posts since May 2008
Reputation Points: 123 [?]
Q&As Helped to Solve: 242 [?]
Skill Endorsements: 3 [?]
 
0
 
Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

DIV and SPANS are fine when required, but don't overdo them. Divitis and Spanitis are currently polluting websites.

Member Avatar
jaikanth123
Light Poster
34 posts since Jan 2010
Reputation Points: -5 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

Most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all, which might sound about as useful as a foam hammer, but they are actually used quite extensively in conjunction with CSS.

Member Avatar
MJ Pieterse
Junior Poster
144 posts since Mar 2009
Reputation Points: 2 [?]
Q&As Helped to Solve: 18 [?]
Skill Endorsements: 0 [?]
 
0
 

what you are asking is for us to basically explain the whole way that tables, divs and spans work?? think that you can read up on it with the web standards etc on:
http://www.w3schools.com/

see... problem solved

Member Avatar
craiggles
Newbie Poster
5 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Firstly the HTML div element represents a division, as HTML is just structure
you can think of div as defining a logical division of the structure.

The div element is block level, meaning that it can only be contained by block level elements and not by inline level elements, though note the p (paragraph) element cannot
contain any block level elements; only inline.

Then we have the HTML span element, which represents an inline division, it spans around it's given content. As mentioned the span is inline level, not block. What this means is that it can be contained by both block and inline level elements, and that it can contain other inline elements, but not block level elements.

Meaning that this would be valid:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>My day at the park</title>
  </head>

  <body>
    <p>
      It was a jolly <span>good <em>day</em></span>.
    </p>
  </body>
</html>

because the em (emphasis) element is inline, but this would not:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>How often do you go to the park?</title>
  </head>

  <body>
    <span>
      <form action="park.php" method="post">
        <!-- ... -->
      </form>
    </span>
  </body>
</html>

because as explained span is inline and thus can only contain fellow inline elements, as and form is block level this is invalid.

However there is a problem with div and span, they bare hardly any semantics on a document, meaning that if you just have an HTML document with no styling nor behaviour chances are you won't need them, they are mainly used for specific styling, e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>I can make specific letters blue!</title>
  </head>

  <body>
    <p>
      <span>c</span>raiggles.
    </p>
  </body>
</html>

because now I can select that span and specifically make it blue with CSS, like:

span {
  color: #00F;
}

the same problem bares with div, it is used for divising the page and thus you can then style or manipulate elements as a whole making markup bloated with divs.

this issue also leads on to people thinking you have to use div and span to style your document, which is of course incorrect, thus they may create unnescesary markup such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>I write silly markup!</title>
  </head>

  <body>
    <div>
      <p>this paragraph contains red text!</p>
    </div>
  </body>
</html>

and styling such as:

div {
  color: #F00;
}

whereas the div could just be removed and the p (paragraph) styled such as:

p {
  color: #F00;
}

I hope that clears up your understanding a little, if you have any questions feel free to post here or send me a personal message.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article