6 Replies Latest reply on Feb 8, 2010 4:23 AM by mahendra rajeshirke

    DIV tags, and why use them?

    AnohterDWUser Level 1

      Please don't flame me, but is a <DIV> tag used to position CSS elements or am I way off?  Why do we use DIV tags anyway?

        • 1. Re: DIV tags, and why use them?
          Nancy OShea Adobe Community Professional & MVP

          Is a <DIV> tag used to position CSS elements?  M

          Mainly, a Div tag provides your HTML code with an "anchor" for CSS rules to grab onto.

           

          A common example might be a #LeftColumn div.

           

          <div id="LeftColumn">

          some content here

          </div>

           

          Using CSS rules in the stylesheet, we can align this division left of center, style content inside it with unique colors, backgrounds, font styles, borders, etc...

           

          EXAMPLE:

          2-column layout with floated Boxes (view source code in browser).

          http://alt-web.com/TEMPLATES/2-col-fixed-with-grid.shtml

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: DIV tags, and why use them?
            MichaelCo

            I found the website you  mentioned    http://alt-web.com/TEMPLATES/2-col-fixed-with-grid.shtml       very useful. I copied and pasted the code on to a test page andjust started playing about with spacings and margins etc.

             

            So for all you experts in there, keep up the good work and your answers not only help the questioner but lots of other people too.

            • 3. Re: DIV tags, and why use them?
              martcol Level 4

              This is what Ian Lloyd says about <div> in his Sitepoint book:

               

              "The div is a generic block-level element. It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1 (p. 46) or h2 (p. 50) element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.


              Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements. Use This For … The div is an “anything-goes” element—it can contain any inline or block-level elements you choose, so it has no typical content."

               

              The only other thing I would say is to still think about whether you need the <div> in the first place.  For instance, I might have a <div> for a side bar which contains an unordered list for navigation.  In the past I might have considered putting the <ul> inside a <div> primarily, to organise things in my head rather than in the browser!  I don't think I would do that now.

               

              Martin

              • 4. Re: DIV tags, and why use them?
                Nancy OShea Adobe Community Professional & MVP
                In the past I might have considered putting the <ul> inside a <div> primarily, to organise things in my head rather than in the browser!  I don't think I would do that now.

                 

                Good point, Martin.  For me, it depends on how the navbar is styled.  But I quite agree that having too many Divs or layers (often referred to as division-itis) is counterproductive.

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com

                • 5. Re: DIV tags, and why use them?
                  M.R.Biesheuvel Level 3

                  The DIV tag is just what it is. It divides your document into separate sections where you want it to get divided. So then you can manipulate it with css rules or javascript. Don't think of HTML as a text document but as a tree structure.

                  • 6. Re: DIV tags, and why use them?
                    mahendra rajeshirke Level 2

                    i think div is a tag , nothing without css values... or style tag. and thnx for helpful info.. and i have  a question, if i convert dis div, tag into inline level element like span,, does it matter to be displayed in all browser, in order to be safisfied by w3c stardard.