Attributes and Values

It is possible to add information into a HTML element in order to convey additional information. We can use this for various reasons, such as:

• Giving the tag a unique identity (id) so we can locate it at a later point (for example to add some styling to it)
• Giving the tag a shared identity (class) so we can apply styling to all elements that share that class
• Provide additional information such as placeholder text for a text inpur field, or the location that a link should go to

Attributes are added to the opening tag of a pair of tags, or to a self closing tag

Format of an Attribute

The example below shows the format that we use to specify an attribute and its corresponding value.

<p attributeName="Attribute value goes in quotes">Paragraph Text</p>

The next example shows how it works in practice, firstly specifying an id, then a class, and then an element with both a class and an id.

<p id="firstPara">Opening paragraph</p>
<p class="redPara">Some paragraph text</p>
<p id="lastPara" class="redPara">Text for the last paragraph</p>

The id attribute

When you set a value for id on an element, ensure it is not used by any other tag on the page, as it is designed to be a unique reference

It is possible to create a link to an id on a page (so the browser scrolls to that section) simply create a link that references the id prefixed by a hash (#), e.g.

<a href="#laterSection">Later section</a>

Alternatively you can link to a section on a seperate page by appending a hash and the div's id to the URL, e.g.

<a href="index.html#education">Education section on my webpage</a>

Multiple Classes

It is possible for an HTML element to have multiple classes, simply seperate them with spacing, e.g.:

<p class="redPara boldPara someOtherClass">Some paragraph text</p>

---