HTML5 Attributes

This Page's Contents

What is an Element Attribute?

class

id

What is an Element Attribute?

• Attributes provide additional information, such as width, height, relationship and many more, about the HTML element that they are nested within.
• Attributes are always specified in the element start tag.
• All HTML elements can have attributes.
• The set of available attributes varies depending on the element.

class attribute

• You can style elements using CSS by adding the class attribute to an element.
• Elements can have multiple classes.
  • If using more than 1 class for an element, then seperate the class names with a space, see Example class attribute.
  • The following using class twice is wrong
    <p class="example-colour" class="large">Your text ect. here</p>
• A class can be applied to multiple elements.
• In the CSS markup class names always start with a full stop . symbol.
  In the 2 following examples the class names are: example-colour & large

Example class attribute using multiple classes

 <p class="example-colour large">Your text ect. here</p>

.example-colour { color: red;}
.large { font-size: large;}

id attribute

• Elements can be styled with an id, but it is better to do this using class

• An id must be unique on a page

• Only 1 id per element allowed

• When styling a id in CSS remember to start with the hash sign #
  Example:
  #mainheader { font-size: xx-large; }
• The main use of an id should be:
  • To identify an element to be a target by JavaScript
  • To identify a location that you want a hyperlink to go to. In HTML 4 this was called a named anchor.
    Example:
    <h2><a id="id-attribute"></a>id attribute</h2>
  • When using form labels
    <p><label for="first-name">First Name:</label><input type="text" name="first-name" 1d="first-name"></p>