Why should not be id repeated?

Question

<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="full-width"><!--contents with full width:: 100%--></div>

Key Question

This works fine, but many coders or say css rule directs that we should not use same id more than one times. So how could I place my markup? And could anyone describe about that we should use only 1 id not more than this which doesn't work?

Answer 1

Like others before me have said, you are using the id tag which is a unique identifier. Whereas you should use a class to apply styles across multiple elements.

See what the W3C defines an id as: (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)

Element identifiers: the id and class attributes

Attribute definitions

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS] This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

What's more interesting is that you stated that your example works, and it does in most browsers. This doesn't make it valid or even good HTML/CSS it is just that some browsers pick up on developer's shortcomings and will render non-standards compliant code as if it were standards compliant.

Here is an example that can never work. As you may know id tags can be used for named anchors. E.g.

<a href="#content">Jump to content</a>
<div id="content">
  some content
</div>
<div id="content">
  some other content
</div>

In this example, which element should the named anchor link to? In most cases I would assume it would go to the first element. However this may not be what the developer wanted.

The id element has more uses than just applying styles to elements, the W3C goes on to state:

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).
• The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances.

The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

You should write standards compliant code so you know it functions in standards compliant browsers. The results are far more predictable and stable across a wider range of browsers and more likely to work in future versions.

Edit: In response to OP's comments:

CSS:

.content {
    width: 950px;
    margin: auto; // Assuming you want to centre this
}

Whatever you apply the class .content to will have a width of 950px. You don't need to set 100% width on the #top element as it is a block level div and naturally expands to 100% width.

HTML:

<div id="top">
    <div id="navigation" class="content">
    </div>
</div>

<div id="main" class="content">
</div>

<div id="footer" class="content">
</div>

Answer 2

ID's are unique identifiers, and therefore there should only be 1 per document (otherwise its not unique).

Replace id with class and change your CSS to use class selectors instead of ID selectors.

Therefore instead of:

#full-width { ... }
#wrap { ... }

Use:

.full-width { ... }
.wrap { ... }

---

For clarity, your markup should then be:

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>

Answer 3

Ya coders say it right you can not define same ID more than once because ID must be unique.

You can use class instead of ID

try this

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>

Answer 4

An id uniquely identifies an element in a page. Browsers perform a certain amount of error recovery, but things will certainly break when you start using <label for...> and JavaScript to get elements out of the DOM based on IDs.

Classes are provided to markup elements which are part of a group. Use them instead.

<someElement class="one_class another_class">

.one_class {
    /* ... */
}

Answer 5

IDs are unique identifiers, uniquely identifying individual elements on a page.

For this situation where you want to have multiple elements all related to eachother you'd use classes: http://www.w3.org/TR/html5/dom.html#classes

You'd then style using . rather than #:

<div class="full-width">
   <div class="wrap">...</div>
</div>

div.full-width {
    width:100%;
    ...
}

div.wrap {
    width:950px;
    ...
}

Thank you very much! But I would like to use in one container for ease of use how to use?

Depending on what you're wanting to achieve, you could simply wrap all your .wrap elements within one .full-width container:

<div class="full-width">
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
</div>

Or you could just use one .wrap element:

<div class="full-width">
    <div class="wrap">
        ...
    </div>
</div>

I assume you'd also want to horizontally centre your .wrap divider:

div.wrap {
    width:950px;
    margin:0 auto;
}

JSFiddle example.

Answer 6

You are repeating in ID for DOM <div id="full-width"><div id="wrap> that is wrong.

Use class <div class="full-width"><div class="wrap>

Apply css to class as below.

.full-width { /** css code **/ }
.full-width .wrap { /** css code **/ }
.wrap { /** css code **/ }

Answer 7

If you want to apply the same style on multiple objects you should use the class attribute. When you use the same id attribute on multiple objects you cannot access a specific object by its id (as it is supposed to by accessed by e.g. getElementById())