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:
id) so we can locate it at a later point (for example to add some styling to it)
class) so we can apply styling to all elements that share that class
Attributes are added to the opening tag of a pair of tags, or to a self closing tag
<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>
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>
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>