IDs and Class

• id: Every HTML element can carry the ID attribute. IDs are used to uniquely identify an element from other elements on the page.

  As an example of how we can use ID's, they can be used to link to a section on the same page. In order to link to a part of the same page, you can add an ID attribute to the element you want to reference (for example, <h1 id="top">), and in your anchor element, the value of the href attribute will be "#top" (<a href="#top">skip to top</a>). More complete code is as follows:

  <h1 id="top"> Title of My Site </h1>

  <p> a long passage of text, or many elements </p>

  <a href="#top"> jump to beginning </a>

  Note: It is important that no two elements on the same page have the same id attribute value (otherwise the value is no longer unique). Also, the value of an element ID should start with a letter or an underscore (not a number or any other character).

• class: Every HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraphs of text that contain information that is more important than others and want to distinguish these elements, or you might want to differentiate between links that point to other pages on your own site and links that point to external sites. To do this you can use the class attribute. Its value should describe the class it belongs to.

  In the following example, key paragraphs have a class attribute whose value is important:

  <p class="important"> some important text, blah, blah, blah. </p>

  <p> some less important text text, blah, blah, blah. </p>

  <p class="important"> some more important text, blah, blah, blah. </p>

Next: HTML Part 3 Activity

Previous: Semantic HTML