I don’t understand the purpose of adding any sort of attribute to a tag. I see that in this lesson it does nothing at all.
For example, in the below image, adding an attribute with the value of “id” does nothing that I can see. I hope my terminology is correct. Also, it just seems as if saying “into” before the “Introduction” element must serve some purpose, but I just can’t figure out what it could be. Why not say “habitat” before the “introduction” element?
I hope my question makes sense. Thank you for reading!
lets make it a bit more global this time, sometimes you are taught concepts which at first doesn’t seem to do much, its because codecademy decides to first teach the concept.
do you want me to explain what value id has, or can it wait for later?
means that -span- isolates elements that are inline with other elements so that you can differentiate one small portion from the rest. In this answer, you gave me the example of using -span> to isolate an element, and then you used the ATTRIBUTE “style” with the VALUE of “color” (Do I have that right, or is it the “style” the VALUE?) and after your explanation, that example makes sense to me.
I’d love to know what value “id” has. I am generally feeling reluctant to move past this lesson because I am afraid that unless I fully understand the purpose/benefit/and functions of attributes, I will just be further building on a poor foundation.
Does “id” specifically explain this: “Also, it just seems as if saying “into” before the “Introduction” element must serve some purpose, but I just can’t figure out what it could be. Why not say “habitat” before the “introduction” element?”
Sorry if I’m bombarding you and thank you very much for your patience. It’s important to me to make sure I understand each step in full detail so I appreciate you taking time to reply to me!
yes, but i was reflecting on this example, because it shows an important point. You learn a concept (span before, now id) and you struggle to see how it can be useful. Which makes perfect sense, this is a thing with programming, you first need to learn concepts before you can implement them in a project to see how valuable they are.
With span, it was easier to come up with an example then its for id.
naming should be logic, this way the code “explains itself” if another developer (or yourself after taking a break from a project) comes back to it.
as for id, what if you have multiple of the same elements? and you want to give these same elements very different styling. Sure, you could use style, but if each element has 5+ style properties (color, position, font, and so forth), the code becomes difficult to read, to change and to maintain.
have you had inheritance yet? That an element inherits style from its parent(s)?
So, i was trying to say: its okay if you don’t fully see yet how useful things like id are going to be in the future. I know this can be difficult to except.
Here is a different look on this. i might be overdoing things but stay with me.
Html has a standard amount of elements you can use. These elements are documented here (This might not be the whole list but it will give you a general idea that these elements can’t just be taught up.)
Now each of these elements has different attributes. For example <div> elements can’t have an href attribute while an <a> element cant go without one.
each attribute is being read by the browser in the following way:
id=“value”
Where id is the name of the attribute. and “value” is what id will be set to. (the name of the attribute can not be thought up. These are predefined in html)
Most attributes are not visible in your browser. This is because each attribute has a different reason to exist. The attribute “id” for example exists to name elements. (The reason you might want to name an element is because you want to alter it with javascript or change the visual with css.).
Here an example of using the id attribute.
<head>
<style>
#intro{ // this is "id="intro"". we use an # to let css know we want this to apply to the element that uses the id attribute with the value intro
background:red;
}
</style>
</head>
<body>
<div id="intro">
<h1>Introduction</h1>
</div>
<div>
<h1>Introduction2</h1>
</div>
<div>
<h1>Introduction3</h1>
</div>
</body>
as you can see this will make the background of the div with the attribute id red. while the other divs remain untouched.
I hope this clarifies why you would want to use attributes and why they exist at all.
