Attributes of HTML Elements
Posted January 13th, 2014 at 8:00am by Dan Birlew in HTML. Comments Off on Attributes of HTML Elements
Common HTML elements can be assigned attributes. These attributes allow us to provide more information about elements, better control their appearance, or add additional functionality.
An attribute within a tag always has the following format:
Attributes are always assigned in the opening tag of any element. The attributes available for each HTML tag vary by tag. However, below are some global attributes that can be applied to any HTML element:
id: The id attribute specifies a unique name for an element. The id makes the element one of a kind, meaning each id value should only be used one time per HTML page.
For example, the following code contains two H1 elements:
<h1>First H1 Header</h1> <h1>Second H1 Header</h1>
By adding an id attribute each H1 element, we can make the browser treat each of them as unique elements:
<h1 id="title1">First H1 Header</h1> <h1 id="title2">Second H1 Header</h1>
Note the use of a number in the id value; you can also use hypens and underscores.
Now that each H1 element has a unique id attribute, not only will search engines see them as distinct entities but we can treat each of them individually by applying styles or scripts to only one element, based on id.
class: The class attribute specifies one or more class names for an element. Unlike id attributes, class names can be applied to multiple elements on a page. Class names allow us to connect HTML elements to sets of style rules in a stylesheet, using CSS (Cascading Style Sheets). Classes are also becoming used more often in scripts, such as the popular jQuery library.
HTML elements can have both a unique id and non-unique class attributes, allowing us to expand on the example above:
<h1 id="title1" class="header page-header1 align_right">First H1 Header</h1> <h1 id="title2" class="header page-header1 align_left">Second H1 Header</h1>
Note that I used hypens, underscores and numbers in my class values to illustrate that these can be used. The spaces between the values separate class names: for example, both elements have two classes applied: “header” and “page-header1”. These values refer to two separate style rule sets in our stylesheet. The first element has the “align_right” class and the second has the class “align_left”. In our stylesheet we could then style each element individually by aligning it to the right or left side of the page.
style: The style attribute specifies an inline style for an element, written in the style rule format for Cascading Style Sheets or CSS:
<p style="color:red">This is a paragraph. A good paragraph should be at least three sentences long. Therefore, this is a paragraph worth reading.</p>
CSS rules are formatted in property:value pairs such as color:red. This style rule applied to the element will display the font in a red color.
The above paragraph element could also be assigned an id (to use the element in scripts or delare unique styles) and class attributes (to apply general style rules). However, the inline style attribute will overwrite any rules applied by the id or class in a stylesheet.
title: The title attribute allows for the specification of extra information about an element. This information displays as a tooltip whenever the cursor hovers over it:
<p title="Paragraph">This is a paragraph with a title attribute.</p>
To view an example, hover over this text to see a tooltip pop up.
Now let’s put them all together in a valid HTML document:
<!DOCTYPE html> <html> <head> <title>Attributes of HTML Elements</title> </head> <body> <h1 id="title1" class="header page-header1 align_right">First H1 Header</h1> <p style="color:red">This is a paragraph. A good paragraph should be at least three sentences long. Therefore, this is a paragraph worth reading.</p> <h1 id="title2" class="header page-header1 align_left">Second H1 Header</h1> <p title="Paragraph">This is a paragraph with a title attribute.</p> </body> </html>
And of course, our output (click to view in another window):
Next time we’ll discuss HTML elements with required attributes: links!