Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
HTML attributes are additional pieces of information that can be added to HTML elements to provide more context and functionality to those elements. Attributes are defined within the opening tag of an HTML element and are used to modify or enhance the behavior and appearance of the element.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our previous video, we learned the art
of crafting well-structured, meaningful
0:00
web content with the help of semantic
HTML and the versatile div element.
0:05
These tools provide the foundation for
a clear and organized web page.
0:11
But what truly breeds life into your
web content are HTML attributes.
0:16
These are additions that we add to
our HTML tags that add interactivity,
0:21
accessibility, and sets up the path for
styling with CSS later.
0:26
Think of semantic HTML and
div element as laying the groundwork for
0:31
your web content.
0:36
Now we're adding the fine
details with HTML attributes.
0:37
HTML attributes are additional pieces
of information that can be added to
0:42
HTML elements to provide more context and
functionality to those elements.
0:47
Attributes are defined within
the opening tag of an HTML element.
0:52
And are used to modify or enhance the
behavior and appearance of the element.
0:57
Attributes are typically composed
of two parts, the attribute name,
1:02
and the attribute value.
1:07
The attribute name specifies what aspect
of the element is being modified.
1:09
And the attribute value provides
specific information or
1:14
settings related to that aspect.
1:17
The most commonly used attributes across
all HTML elements are class and id.
1:20
The class attribute is used in HTML to
group elements that have a common purpose
1:27
or function.
1:32
It allows you to assign the same
class to multiple elements,
1:33
indicating that they share
a similar role on your webpage.
1:37
For instance, you can use a class
attribute to group elements that represent
1:41
navigation items, making it clear
that they serve the same function.
1:46
The id attribute is used to give a unique
identifier to a specific HTML element.
1:50
Each element with an id attribute must
have a distinct value within your webpage,
1:57
ensuring that no two elements
share the same identifier.
2:03
It's helpful when you need to reference or
point to a particular element,
2:08
making it stand out as
an individual entity.
2:12
Both attributes are great ways to
give your HTML elements more meaning.
2:16
Let's give it a go and
add some ids and classes to our HTML.
2:21
We'll start with our ids.
2:26
Have a look at our mockup and
2:28
see what kind of sections
we can expect only one of.
2:30
After all,
ids are the perfect attribute to add for
2:33
elements that should only
appear on the page once.
2:37
The first div that contains our image and
paragraph is a pretty good introduction.
2:41
So let's give it an id of intro.
2:46
Next we have the div that
contains our ingredients.
2:55
I think an id of ingredients
would be logical here.
2:59
Finally, we have the div
containing our steps.
3:04
What do you think would be a good id?
3:08
Pause this video and add an id attribute,
giving this div a logical id name.
3:10
All right, I'll give this an id of steps.
3:17
Now let's try and add some classes.
3:21
Have a look at the mockup and
3:24
see if there are any elements that seem to
share a style or represent similar things.
3:25
It's very subtle, but it looks like
these two lines of ingredients and
3:31
steps are brown and have thicker text.
3:35
It looks like they're the only parts
of the recipe that mentioned meat.
3:38
Perhaps the designer wanted
to highlight the sections so
3:42
that meat can be easily omitted
from the recipe if desired.
3:45
We'll learn more about how to style
these special lines later, but for now,
3:49
they seem to be a good candidate for
classes.
3:53
After all, they share a common purpose and
have similar roles on this page.
3:56
Essentially, bookmarking
elements that mention meat.
4:01
So let's add a class of meat to this
bacon listing in the ingredients.
4:05
Now give it a go yourself.
4:10
Pause the video and
4:12
give the li element that mentions bacon
in the steps a class attribute of meat.
4:13
All right, all you had to do was add
the class meat to the second li list.
4:20
Nice work,
now let's make sure we save this file.
4:28
If we reload the page,
you won't see any difference.
4:31
That's because the id and
4:35
class attributes don't make a visual
change to our HTML, not yet, anyways.
4:36
We'll learn more about using these to
style our HTML later in the CSS stage.
4:42
For now, we're going to learn more about
our next HTML element in the next video.
4:48
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up