Additional features or aspects of the element, such the height and width of an image, are defined via its attributes. The start tag, also known as the beginning tag, is where attributes are always supplied. Typically, attributes are name/value pairs, such as name="value". Quotation marks should always encapsulate attribute values.
Furthermore, certain elements require particular qualities. For example, the <img> tag needs to have the src and alt attributes present. Let's see a few instances of how the properties are used:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">In the example above, the image path provided is the value of the attribute src, which is located inside the <img> tag. Similar to this, the link given is the value of the attribute href inside the <a> tag, and so on.
Tip: Attribute values can be quoted using single or double quotes. Double quotes are most frequently used, though. It is required to surround the value in single quotes when the attribute value itself contains double quotes, as in the following example: value='John "Williams" Jr.'
In HTML5, there are a number of attributes that are only names rather than name/value pairs. We refer to these characteristics as Boolean attributes. Boolean attributes that are often used include checked, disabled, readonly, required, and so on.
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>You will learn in more details about these elements in upcoming lessons.
Note: All attribute values are case-insensitive, with the exception of a few, such as the id and class attributes. In contrast, the World Wide Web Consortium (W3C) specifies that attributes values should be entered in lowercase.
You can use certain attributes on most HTML elements, such id, title, class, style, etc. Their usage is explained in the following section.
Within a document, an element can be uniquely named or identified by using the id property. Selecting the element with CSS or JavaScript becomes simpler as a result.
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>Note: An element's id needs to be distinct within a single document. There can be only one id per element in a document, and no two elements can have the same name.
The class attribute is also used to identify items, just as the id attribute. However, the class attribute does not need to be unique within the document, in contrast to id. This implies that, as the following example illustrates, you can apply the same class to several components in a document:
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>Tip: Style rules created for a class will be applied to all elements that have that class because a class can be applied to many elements.
Text that offers advice on an element or its contents is shown using the title attribute. To see how this actually functions, take a look at the sample below.
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>Tip: When a user hovers their mouse pointer over an element, web browsers display the value of the title property, which is the title text.
You can directly provide CSS styling rules, including color, font, border, etc., within an element by using the style attribute. Let's look at an example to show how it functions:
<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>In the HTML styles chapter, you will find more information about styling HTML components.
Another name for the properties we've covered before is global attributes. See the HTML5 global attributes reference for other global attributes.
You may find a comprehensive list of characteristics for every HTML element in the HTML5 tag reference.