This week's book giveaway is in the OO, Patterns, UML and Refactoring forum.
We're giving away four copies of Five Lines of Code and have Christian Clausen on-line!
See this thread for details.
Win a copy of Five Lines of Code this week in the OO, Patterns, UML and Refactoring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Why do we sometimes write divs before and after classes and ids and sometimes we don't?

 
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


I will give some examples to describe my question: Here the instructor wrote divs before and after the the id:

<div id="sidebar">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   </p>
</div>

But here he didn't write divs before and after the class my-form. Why?

   <form class="my-form">
       <div class="form-group">
           <label>Name: </label>
           <Input type="text" name="name">
       </div>
       <div class="form-group">
           <label> Email </label>
           <input type="text" name="email">
       </div>
       <div class="form-group">
           <label>Message</label>
           <textarea name="message"></textarea>
       </div>
       <input class="button" type="submit" value="Submit" name="">
   </form>

So when do we use a div before and after classes and when we don't? Thank you..
 
Marshal
Posts: 67418
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
"classes" are just attributes that are applied to the various types of HTML element, of which <div> and <form> are just a few examples. A class name or set of class names can be placed on any HTML element.

Which HTML elements you use has little bearing on whether it will possess a class attribute or not. You use the HTML element appropriate to the structure that you are creating. For example, you use a <div> when you want a semantic-less container, you use a <form> when you want to create a form, and so on...
 
Bear Bibeault
Marshal
Posts: 67418
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
By the way, if you are thinking that "class' is something similar to Java or even JavaScript classes... they are not. In HTML, a "class" is just a name that is associated with an HTML element; maybe think of them as "tags". They are primarily used to apply CSS styling to the elements, but can also be used for DOM retrieval. But they in no way have any similarity to the concept of a "class" in programming languages.

I just brought that up because your post seems to indicate that you are thinking about "classes" as something primary, when they are just attributes of elements.
 
Saloon Keeper
Posts: 22259
151
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A "div" is an HTML element tag. So is a "form". For that matter, so are "label" and "textarea".

Each HTML element tag defines a particular aspect of an HTML document. A div, for example, defines a discrete block of the rendered page. A span is like a div except that it doesn't set itself geometrically off from other page elements.

A form is a container for data which can be submitted via HTTP GET or POST. So you need to learn 2 things to start with:

1. The syntax of HTML and the meanings/uses of HTML components
2. The names and uses of HTML tags.

Within a tag, you can have attributes and/or an optional body. "id" is an attribute, and a very special one, since every id value in a well-formed HTML/XML document should be unique. "class" is also an element, and references a user-defined CSS rendering class name. Which, as has been said, is not even remotely related to Java classes. CSS classes are declarative, not procedural.

So you have some studying to do.
 
hiba hammami
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for the replays but I'm actually asking:

Why is div written before an id in the first example? (please look below) and not written before class="my-form"> in the second example (please look below)? sometimes we use div and sometimes not. Can you give me the reason?

First example:

<div id="sidebar">
 <p>Lorem ipsum dolor sit amet </p>

</div>

Second example:

 <form class="my-form">
     <div class="form-group">
         <label>Name: </label>
         <Input type="text" name="name">
     </div>
     <div class="form-group">
         <label> Email </label>
         <input type="text" name="email">
     </div>
 </form>

I hope that my question is clear now.
 
Rancher
Posts: 4614
47
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Because the first one is a <div> tag and the second is a <form> tag?

Which says to me that I don't actually understand your question.

The person that wrote that html could have given the <form> tag an id, or the <div> tag a class.

Assuming that the page these examples came from was a good example of HTML (always a risky assumption) then I would hazard a guess that they wanted an id on that div so they could target it directly in some Javascript.
For the form they were likely using the class to manipulate the layout of the form fields in CSS.

Of course, these are just examples so likely bear no relationship to real world pages.
 
hiba hammami
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a lot. You did answer my question.
 
Gravity is a harsh mistress. But this tiny ad is pretty easy to deal with:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic