- 3 years ago
- Shahzad Gujjar
- 2067 Views
-
3
This tutorial will teach you how to use attributes to give HTML tags more meaning.
What are Attributes
Additional characteristics or properties of an element, such as the width and height of an image, are defined by attributes. Attributes are often specified in the start tag (or opening tag) and are typically name/value pairs such as name=”value”. Quote, marks should always be used around attribute values.
Some attributes are also required for some elements. A <img> tag, for example, must have src and alt characteristics. Let’s look at some examples of how attributes can be used:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://bit.ly/learncodeweb" title="Learn Code Web">Learn Code Web YT</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
In the example above, src is an attribute within the <img> tag, and the image path is its value. Similarly, the attribute href inside the <a> tag is an attribute, and the value is the link given, and so on.
Attribute values may be quoted with single or double-quotes. Double quotes, on the other hand, are the most common. When the attribute value contains double quotes, the value must be wrapped in single quotes, for example, value=’John “Williams” Jr.
There are a few attributes in HTML5 that don’t have name/value pairs and only have the name. Boolean attributes are the name for these types of attributes. Checked, disabled, readonly, and required are some examples of common Boolean attributes.
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>
All of these elements will be covered in-depth in the following chapters.
Except for the id and class attributes, which are case-sensitive, attribute values are usually case-insensitive. In their specification, the World Wide Web Consortium (W3C) recommends using lowercase for attribute values.
General Purpose Attributes
You can use certain attributes on the majority of HTML elements, such as id, title, class, and style. The following section explains how to use them.
The id Attribute
The id attribute is used to give an element in a document a unique name or identifier. This makes the CSS or JavaScript selection of the element much easier.
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>
Within a single document, an element’s id must be unique. There can’t be two elements with the same id in the same document, and each element can only have one id.
The class Attribute
The class attribute, like the id attribute, is used to identify elements. The class attribute, unlike the id attribute, does not need to be unique within the document. As shown in the following example, you can apply the same class to multiple elements in a document.
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>
Because a class can be applied to different elements, any style rules written for it will be applied to all of the elements with that class.
The title Attribute
The title attribute is used to provide descriptive text about an element or its contents. Try the following example to see how this works in practice.
<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>
NOTE: When the mouse cursor is over the element, the value of the title attribute (i.e. title text) is displayed as a tooltip by web browsers.
The style Attribute
The style attribute allows you to define CSS styling rules directly within the element, such as color, font, border, and so on. To see how it works, consider the following example:
<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’ll learn more about styling HTML elements.
The above-mentioned attributes are also known as global attributes. Please see the HTML5 global attributes reference for more information.
The HTML5 tag reference contains a comprehensive list of attributes for each HTML element.
- 3 years ago
- Shahzad Gujjar
- 2067 Views
-
3