Working with HTML IDs
This guide examines how to set and work with an HTML ID, this is a key concept to learn because IDs will be one of the ways that you can select page elements to apply styles.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this video, we're going to talk about how we can establish differentiation to various elements on a page using IDs.

For a practical example, go to wikipedia.com, open the inspect tool, and hover over any element. You can see that each element has an ID associated with it. Each ID is unique on the page, so you can grab any ID to work with.

If you want to add an ID to an element on your site, go to that element, add the word "id" and give a unique name to it. This name should be inside double quotes, and remain without a space character, but rather underscores or dashes instead.

<body>
  <div id="paragraph_one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>

You can add ID to any element, even heading tags.

If you open that page on a browser, you can see the ID associated with it.

medium

These IDs give us a granular level of control, so we can make changes to specific elements.

So, this is how we can add IDs to HTML elements.