Member Avatar for ashishjha54

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.

  • 8 Contributors
  • 7 Replies
  • 688 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by craiggles

Dani AI

Generated

A short, modern primer that builds on the replies from , and while addressing 's "divitis" warning.

Div and span remain generic, non-semantic containers: div is for block-level grouping and span is for inline grouping. Since the HTML5 era, many layout and structural roles are better expressed with semantic elements (header, nav, main, section, article, aside, footer, figure). Semantic tags improve accessibility, search indexing, and long-term maintainability; div/span should be used when no semantic element fits or when a styling hook is needed.

Practical rules of thumb:

  • Prefer semantic HTML for structure and meaning; use div/span for presentational hooks only.
  • Use native controls for interaction (a, button, input). Avoid making clickable div/span substitutes for controls unless ARIA and keyboard behavior are implemented correctly.
  • Do layout with CSS (Flexbox, Grid) instead of tables; use tables only for true tabular data.
  • For inline intent, prefer semantic inline tags (strong, em, code, time, mark) instead of styling text with spans.

Accessibility and table tips:

  • For tables of data include caption, thead/tbody, and mark header cells with scope="col" or scope="row" so assistive tech can map headers to cells.
  • Verify semantics via keyboard-only navigation and the browser accessibility tree; ARIA should supplement, not replace, native semantics.

Example patterns (HTML5):

<header> <nav>...</nav> </header>
<main>
  <article><h1>Title</h1><p>Some inline <span class="hl">highlight</span>.</p></article>
</main>
<footer>...</footer>
<table>
  <caption>Sales</caption>
  <thead><tr><th scope="col">Item</th><th scope="col">Qty</th></tr></thead>
  <tbody>...</tbody>
</table>

The existing replies cover basics well; the next step is to replace decorative divs with semantic elements where they add meaning, and to test pages with real assistive tools to avoid divitis.

Recommended Answers

All 7 Replies

Member Avatar for tgreer

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 for Member #120589

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

Member Avatar for jaikanth123

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 for MJ Pieterse

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 for craiggles

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.