HTML Attributes

HTML attributes provide additional information about an HTML element. They are used to modify the behavior and appearance of an element. Lets see some basic HTML attribute syntax, and HTML attribute examples.

Syntax

The basic syntax of attribute must follow the following standards. where “value” either be string value, or key-value pair property. 

<div attribute-name="value"></div>

<!-- or in self-closing element-->

<img attribute-name="value">

Examples

There are numerous attributes available in HTML, each serving a specific purpose. I've compiled a list of some commonly used attributes that you'll encounter frequently during your HTML journey. Here are some commonly used HTML attributes with examples.

“id” Attribute: 

The "id" attribute is a fundamental HTML attribute used to uniquely identify an element within an HTML document. It allows you to assign a specific identifier to an element, making it easier to target and manipulate that element using CSS or JavaScript.

The "id" attribute should be unique within the HTML document, meaning no two elements should have the same id value. It is typically used to select and style individual elements or to provide a target for links and JavaScript functions.

To assign an id to an element, you include the "id" attribute within the opening tag of the element and provide a unique identifier as the attribute's value. 

Here's an example: 

<div id="my-element">
	<!-- Content of the element goes here -->
</div>

In the example above, a <div> element is given the id "my-element". This id can then be used in CSS to style the element:

#my-element {
 color: red;
 font-size: 16px;
}

You can also use the id attribute to create links that navigate to specific sections within the same page. For example:

<a href="#my-element">Go to My Element</a>

When clicked, the link above will scroll the page to the element with the id "my-element".

Please note: Technically, the value for an “id” attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

“class” Attributes: 

The "class" attribute is an essential attribute in HTML that allows you to assign one or more class names to an element. It is used to group and classify elements on a web page, providing a way to style and target them with CSS or JavaScript.

By assigning a class name to an HTML element using the "class" attribute, you can create a relationship between that element and CSS styles defined for that class. This means you can apply the same styles to multiple elements by assigning them the same class name.

Syntax:

<p class="myClass">This is some example text.</p>

For Example: 

let's say you have a CSS rule that styles all elements with the class name "highlight" to have a yellow background color:

.highlight {
 background-color: yellow;
}

In your HTML document, you can assign the "highlight" class to any element using the "class" attribute like this:

<p class="highlight">This paragraph has a yellow background.</p>

Now, the paragraph element will have a yellow background color because it has the "highlight" class assigned to it. You can apply the same class to multiple elements throughout your HTML document, and they will all inherit the specified styles.

Please note: Technically, the value for an “class” attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

“style” Attributes: 

The "style" attribute in HTML is used to apply inline styles to an individual HTML element. It allows you to define specific CSS (Cascading Style Sheets) properties directly within the HTML tag itself, overriding any external or internal stylesheets.

The "style" attribute is added as an attribute to an HTML tag, and its value is a set of CSS property-value pairs enclosed within double quotation marks. Each property-value pair is separated by a semicolon (;). 

Here's an example:

<p style="color: red; font-size: 20px;">This is a styled paragraph.</p>

In the above example, the "style" attribute is applied to the <p> (paragraph) tag. The specified styles within the attribute value modify the appearance of the paragraph. In this case, the text color is set to red, and the font size is set to 20 pixels.

“src” Attributes: 

The "src" attribute is an important attribute used in HTML to specify the source (URL or file path) of external resources, primarily associated with the "img" (image) and "script" (JavaScript) elements.

When used with the "img" element, the "src" attribute specifies the location of the image file that should be displayed on the web page. The value of the "src" attribute is typically a URL pointing to the image file on the web or a relative file path within the website's directory structure.

For Example:

<img src="https://example.com/images/myimage.jpg" alt="My Image">

In the above example, the "src" attribute is set to the URL "https://example.com/images/myimage.jpg", indicating that the image file "myimage.jpg" should be fetched from that location and displayed on the web page.

When used with the "script" element, the "src" attribute specifies the source file (usually a JavaScript file) that should be loaded and executed by the browser. This attribute is commonly used to include external JavaScript files into an HTML document.

For Example:

<script src="script.js"></script>

In the above example, the "src" attribute is set to "script.js", indicating that the JavaScript file "script.js" located in the same directory as the HTML file should be loaded and executed.

It's important to note that the "src" attribute is not limited to just "img" and "script" elements. It can also be used with other elements like "audio", "video", "iframe", and more, depending on the specific purpose and requirements of the element.

“href” Attributes: 

The "href" attribute is one of the most commonly used attributes in HTML, specifically within anchor tags (<a>). It stands for "hypertext reference" and is used to define the destination or target of a hyperlink.

When you include the "href" attribute within an anchor tag, you provide the URL (Uniform Resource Locator) of the page, file, or resource you want to link to. This URL can be an absolute URL, starting with "http://" or "https://", which links to an external website, or it can be a relative URL, which points to a file or page within your own website.

For Example:

<a href="https://www.example.com">Visit Example.com</a>

In this example, the anchor tag creates a hyperlink with the text "Click here". The "href" attribute is set to "https://www.example.com", indicating that clicking on the link will take the user to the website specified by that URL. 

“alt” Attributes: 

The "alt" attribute is an essential attribute used in HTML, specifically for the <img> tag. It stands for "alternative text" and provides a textual description of an image when it cannot be displayed. It also important for SEO and accessibility purpose. When image can not be display to user in the browser, user will see that “alt” text instead of image.

For Example:

<img src="image.jpg" alt="A beautiful sunset over the ocean">

In this example, the "alt" attribute contains the alternative text "A beautiful sunset over the ocean." If the image fails to load, the text will be displayed in its place, allowing users to understand the image's content.

“title” Attributes: 

The "title" attribute can also be used with other HTML elements to provide tooltips or additional information when the user hovers over the element. When the user hovers over an element with a "title" attribute, a small tooltip or popup will appear displaying the text specified in the attribute.

For Example:

<a href="https://www.example.com" title="Visit Example Website">Click here</a>

In this example, when the user hovers over the anchor tag, a tooltip will appear with the text "Visit Example Website".

These are just a few examples of the many HTML attributes available for modifying the behavior and appearance of HTML elements. You will learn about more attributes during this entire HTML course.

Watch this Chapter Video on YouTube: