If I have an element like this one for example:
<input type="text" class="someTextBox" id="someTextBoxID" />
... does it matter if class is placed before id? If I had to guess I'd say no, but then again I wonder if there are any rules regarding that.
There are no rules for the ordering of attributes in HTML.
You can put them in any order you like.
Related
Consider a component c with html
<form id="someID"[formGroup]="codeEditorForm" novalidate>
</form>
with css
#SomeID{
color:grey;
}
If C gets included in a parent component P two times then wouldn't the id get duplicated as well which should not happen in html
Question 1 - should I not use id in Angular?
Question 2 - how shall I then write css rules without using id?
You can use IDs but generally you don't need to do it.
Angular scopes the styles automatically, so a class defined in one component won't affect a class with the same name in another component.
<form id="someID" class="my-form" [formGroup]="codeEditorForm" novalidate>
</form>
.my-form {
color: green;
}
Also note that you should make sure that there is always a space after you define a property. In your posted example there was no space after someId" Maybe it doesn't matter in this case but I guess it's better to start looking out for small things like this right away.
As far as I know there are there are two differences between id and class.
First is that id is used for single specific element, while class can target multiple elements, this means that you normally would use id selector if you are sure that an element will not be repeated, something like navbar.
And the second one is that id selector is more specific than class selector, this means that if there are any conflicts of styles, rules written in id selector override rules written in class selector
Normally you would not use it to override rules as there is other way to do it, so in order to decide which one to use all you need to do is think about this >> is the element you are giving id to really gonna be unique?
Angular support id on html. But as you are loading multiple times the 'C' component on your 'P' component,so the Id will be duplicated. So better you use class instead of id on your html..
<form class="yourClass"[formGroup]="codeEditorForm" novalidate>
</form>
On your 'C' component's css,
.yourClass{
color:grey;
}
Usually when i create some HTML template, i tend to prefix and class (or id) everything, This is my way of keeping the markup more readable, and also it makes styling a lot easier.
For example if create a template called MyTemplate, then i prefix all elements like this
<form id="mt-form-blue" class="mt-form">
<input class="mt-input-large" type="text" />
<input class="mt-input-small" type="text" />
</form>`
I've seen lots of HTML templates, where the creators make very little use of classes and ids.
My question is why? Does using many classes and ids, have an impact on the browser performance? Does it have any dangerous side effects?
CSS selector do impact performance, but how much it impact will depend on its complexity and what operators were used. Usually you won't notice such tnings, but there are plenty of researches for this matter on the web.
Regarding the use of selectors, listing only the basic three, the use of them depends on what is your intention, for example:
tag name selector - When you want apply style to every element of this type
class selector - when you want to reuse your style in more than one element
ID selector - when you want to apply your style to only one element per document
Of course, their use is not limited for the list above but I believe it contains the most common use cases.
This question already has answers here:
Several elements with the same ID responding to one CSS ID selector
(3 answers)
Closed 9 years ago.
I know the differences between ID and Class. But why both IDs take effect in this html? ID should be used uniquely, right?
#text {
text-align:center;
color: red;
}
Then id="text" was used twice in my same html page, and both get same effect. Why do i have to use "class", if 'id' has same effect?
That IDs seem to behave like classes when you have duplicate IDs in a page is nothing more than a side effect of how browsers implement CSS.
Whether a document conforms to its own rule that IDs should be unique is not relevant to CSS. CSS simply says to match elements that have a specific value in its ID attribute, to an ID selector:
An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.
It does not say anything about what should happen if there is more than one element with such an ID, because it assumes that you are working with a conforming HTML document.
You should use classes to group your elements because that's what HTML says to do, and you are trying to conform to valid HTML. Having duplicate IDs is quite simply not allowed by the HTML spec, and can result in unexpected behavior, so it is not something to be relied on regardless of what effect it has in browsers.
Yes, 'id' have the same effect like 'class'. But there is some different between them.
1. The 'id' selector can't be repeat in the same page. That means when there is a id selector
named "header",there can't be another "header" in this page.This is for js dom command.
2. The 'id' selector have a higher priorty. That means when you have a markup like this:
<style>
#header{color:red;}
.header{color:blue;}
</style>
<div id="header" class="header">
test
</div>
the color in test is "red". http://www.impressivewebs.com/difference-class-id-css/
the DOM will not fail to load with duplicate IDs, but you will have negative effects with other aspects, like javascript. If you are only using ID to identify where CSS rules should apply then they will work just like Class.
In general, ID should always be unique on the page, but the DOM will not enforce this.
IDs may work for css in some browsers, but not in others. There may also be bugs and side effects, for example:
<div>
<input type="radio" id="id1" name="r1" />
<label for="id1">this is radio label for id1</label>
</div>
<div>
<input type="radio" id="id1" name="r1" />
<label for="id1">this is another label for id1</label>
</div>
<!--the second label will also trigger the first radio change -->
Sometimes the functions won't be bind to your radio. Just keep IDs unique on the page.
A simple question: why should we add the id into our HTML tags if they work perfectly well without them? I know that one of their uses is being able to navigate though the page via hashtags (#), but is there any other use for them?
Uses of id attributes in HTML
As a target for a fragment identifier on a URL.
As a target on form controls for the for attribute on <label> and <output> elements.
As a target on <form> elements for the form attribute on form associated elements.
As a target for element references via the microdata itemref attribute.
As a target for element references via some ARIA attributes including aria-describedby, aria-labelledby and 4 others.
As a target on <th> elements for the headers attribute on <td> and <th> elements.
As a target on <menu> elements for the contextmenu attribute.
As a target on <datalist> elements for the list attribute on <input> elements.
As part of a hash-name reference to <map> elements for the usemap attribute on the <img> and <object> elements.
As an identifier of an element in a CSS selector
As an identifier of an element for JavaScript processing
They're most often used to uniquely identify elements for styling (CSS) and scripting (JavaScript et al) purposes.
But if you're asking about HTML and only HTML, then one example where declarative IDs are useful is associating a <label> with its <input>, <button> or <textarea> control via its for attribute:
<label for="ex">Example field:</label>
<input type="text" name="ex" id="ex">
Without assigning this attribute, activating the label does nothing, but when you pair both elements together using for and id, activating the label causes its control to gain focus.
The other way to associate a form label with its control is to contain it within the label:
<label>
Example field:
<input type="text" name="ex">
</label>
But this doesn't always suit the structure of a form or a page, so an ID reference is offered as an alternative.
Other circumstances where an id attribute serves a function are covered extensively in Alohci's answer.
You can use IDs to acces your divs from javascript, CSS and jquery. If you don't use IDs it will be very difficult for you to interact with your HTML page from JS.
AFAIK, they are used to uniquely refer to a tag.And makes it easier for you to refer to the tag.
IDs are used for accessing your elements in CSS and JavaScript. Strictly speaking IDs should uniquely identify an element. You can also use class attributes to identify groups of elements.
The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.
This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id.
see http://reference.sitepoint.com/html/core-attributes/id
for more info on class see here: http://reference.sitepoint.com/html/core-attributes/class
it is there to help you identify your element in java-script code.the getElementByID function in java-script give the handle of an element with specific ID for you.like this.
var someElement = document.getelementById("someID");
// do whatever with someElement;
I myself also prefer class for styling through CSS but sometimes you need an element to be unique. For accessibility reasons you use id to input elements to "connect" its label to it by using for attribute. And for Javascript it's much simpler to select an element if it has got id attribute.
The main reason I use ids for my HTML elements is the fact that their selection is faster, in Javascript with getElementById and in CSS as well, using the #id class.
Of course, I'm not saying this is always a good idea, especially in CSS, where having classes based on ids can cause a lot of redundancy, it's just one of the reasons
First, only add ID when you will need to use them. In most cases id is used to do other things like:
A reference for scripts,Selecting elements to apply scripts to,
A style sheet selector, selecting elements for styling
Named anchors for linking to, which is what u called page navigation
So simply because in most cases you will want to do something to or with your content in any tag, its good to put an identifier, that is the id attribute.
Anything that you can do with IDs you can do with classes.
So why is there a ID attribute then?
Yeah the ID is unique but a class can be unique too...
The DOM doesn't exist just for the purpose of styling elements - elements can also be manipulated (typically via Javascript), and generally selecting elements by ID is much more efficient than selecting by class.
Firstly, from the HTML 4.01 Specification Section 7.5.2:
id = name
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list
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.
I understand that the spirit of your question is that by intentionally choosing unique class names, you can simulate the functionality given by id attributes, arguably making the id attribute redundant. Well, I can think of at least one thing that can be done only with ids; associating a <label> element with a form element using the for attribute. eg:
<label for="firstname">First Name:<label>
<input type="text" id="firstname" name="firstname" value="" />
This is a good practice for accessibility reasons. If you use <label for="id"> with checkbox or radio button elements, you get the added bonus of the labels being clickable. eg:
<label for="male">Male</label> <!-- the word "Male" is clickable -->
<input type="radio" id="male" name="sex" value="male" />
<label for="female">Female</label> <!-- the word "Female" is clickable -->
<input type="radio" id="female" name="sex" value="female" />
class is for a set of similar elements
id is unique to an element.
If you want to change all, say, checkboxes, you use class.
If you want to do something to a specific checkbox, you use id.
This tizag article might explain it better. In each standard in HTML, class and id have different functions. For instance, an id is (usually) only utilized once, to denotate a unique element. class is (again, usually) used to define a group of elements.
Anything that you can do with IDs you can do with classes.
Actually no. If you give an element an ID, it can be the target of a link (e.g., http://www.example.com/page#foo takes you to the element with id="foo" on page; this is now preferred over the old <a name="foo"> mechanism.)
So why is there a ID attribute then?
Because they serve entirely different purposes. The example above is just one of the myriad of uses to which a unique identifier for content on a page might be put. Having a unique identifier is important for relationships between things.
Yeah the ID is unique but a class can be unique too...
Can be being the operative phrase. If I tell the browser to look up the element with the "foo" id, once it has found that element it can stop looking. If I tell it I want elements with the class "bar", it has to search the entire DOM to find them.
From http://www.w3.org/TR/html401/struct/global.html#adef-class :
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.
I can't seem to find a reference for when the class attribute was added to the HTML spec, but I can say from personal experience that I remember the id attribute a lot farther back (particularly for form processing).