HTML attributes are one of the most powerful features of HTML which allow you to modify the behavior and appearance of HTML elements such as adding links, images, styles and scripts.
What are HTML Attributes?
HTML attributes are additional information that you can add to HTML elements using the following syntax:
<element attribute="value">
The attribute name is followed by an equal sign (=)
and a value enclosed in quotation marks (“ ”)
. The value can be a text, a number, a URL or a script. The attribute name and value are case-insensitive, but it is a good practice to use lowercase letters for both.
HTML attributes can be divided into two categories:
- Global attributes
- Local attributes
Global attributes can be used on any HTML element, while local attributes can only be used on specific elements. For example,
- The id attribute is a global attribute that can be used to assign a unique identifier to any element.
- The href attribute is a local attribute that can only be used on <a> elements to specify the destination of a link.
Some HTML elements can have multiple attributes, separated by spaces. For example,
The <img> element can have the:
src, alt, width, height
attributes to specify the source, alternative text, width and height of an image.
Note: The order of the attributes does not matter, as long as they are within the same opening tag of the element.
How to Use HTML Attributes?
To use HTML attributes, you need to know which attributes are available for each element and what values they can accept. You can use online tools such as HTML Validator to check if your HTML code is valid and follows the standards.
To demonstrate how to use HTML attributes, let’s look at some common examples of HTML attributes that you can use to enhance your web pages.
Adding Links with the href
Attribute
One of the most basic and useful HTML attributes is the href
attribute which stands for hypertext reference. It is used on <a>
elements to create links to other web pages or resources. The value of the href
attribute can be.
- Absolute URL (starting with http:// or https://)
- Relative URL (starting with / or …/)
Example
<a href="https://mixiknow.com/">Visit Mixiknow</a>
<a href="/about.html">About Us</a>
<a href="../images/logo.png">Logo Image</a>
- The first link will take the user to the mixiknow homepage
- The second link will take the user to the about page of the current website
- The third link will take the user to the logo image in the parent folder of the current page.
You can also use the target
attribute on <a>
elements to specify where to open the link. The value of the target
attribute can be one of the following:
_self
: opens the link in the same tab or window (default)_blank
: opens the link in a new tab or window_parent
: opens the link in the parent frame_top
: opens the link in the top-level frameframename
: opens the link in a named frame
Example
<a href="https://mixiknow.com/" target="_blank">Visit Mixiknow in a new tab</a>
<a href="/about.html" target="_self">About Us in the same tab</a>
<a href="../images/logo.png" target="logo">Logo Image in a named frame</a>
- The first link will open mixiknow in a new tab or window
- The second link will open the about page in the same tab or window
- The third link will open the logo image in a frame named “logo”
Adding Images with the src
Attribute
Another common and useful HTML attribute is the src
attribute which stands for source. It is used on <img>
elements to display images on web pages. The value of the src
attribute can be an absolute URL or a relative URL.
Example
<img src="https://www.Mixiknow.com/images/logo.png" alt="Mixiknow Logo">
<img src="/images/logo.png" alt="Logo">
<img src="../images/logo.png" alt="Logo">
The alternative text will be displayed if the image cannot be loaded or displayed or if the user is using a screen reader or a text-only browser.
The width
and height
Attributes
You can also use the width
and height
attributes on <img>
elements to specify the width and height of the image in pixels.
Example
<img src="https://www.Mixiknow.com/images/logo.png" alt="Mixiknow Logo" width="200" height="100">
<img src="/images/logo.png" alt="Logo" width="100" height="50">
<img src="../images/logo.png" alt="Logo" width="50" height="25">
- The first image will display the mixiknow logo with a width of 200 pixels and a height of 100 pixels
- The second image will display the logo with a width of 100 pixels and a height of 50 pixels
- The third image will display the logo with a width of 50 pixels and a height of 25 pixels
Adding Styles with the style
Attribute
Another powerful HTML attribute is the style
attribute which allows you to add inline CSS styles to HTML elements. CSS stands for Cascading Style Sheets, and it is a language that is used to define how HTML elements should look and behave on web pages. The value of the style
attribute should be a list of CSS property-value pairs, separated by semicolons (;).
Example
<p style="color: blue; font-size: 20px; font-weight: bold;">This is a blue paragraph with large and bold text.</p>
<div style="background-color: yellow; border: 2px solid black; padding: 10px; margin: 20px;">This is a yellow box with a black border and some space around it.</div>
<span style="text-decoration: underline; font-style: italic;">This is an underlined and italicized text.</span>
- The first paragraph will have blue color, 20px font size and bold font weight
- The second
<div>
element will have yellow background color, 2px solid black border, 10px padding and 20px margin - The third
<span>
element will have underline text decoration and italic font style
Using the style
attribute can be useful for adding quick and simple styles to HTML elements but it is not recommended for large and complex web pages. A better practice is to use external or internal CSS files to define styles for HTML elements which can make your code more organized, reusable and maintainable.
Adding Scripts with the src
Attribute
Another useful HTML attribute is the src
attribute which can also be used on <script>
elements to add JavaScript scripts to web pages. JavaScript is a programming language that can add interactivity, functionality and dynamic features to web pages. The value of the src
attribute can be an absolute URL or a relative URL pointing to a JavaScript file.
Example
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/scripts/script.js"></script>
<script src="../scripts/script.js"></script>
- The first script will load jQuery, a popular JavaScript library that simplifies JavaScript coding, from the jQuery website.
- The second script will load script.js from the scripts folder of the current website.
- The third script will load script.js from the scripts folder of the parent folder of the current page.
You can also use the <script>
element without the src
attribute to write JavaScript code directly within HTML. For example:
<script>
alert("Hello world");
</script>
- This script will display an alert box with the message “Hello world” when the web page is loaded.
- Using the
<script>
element can be useful for adding simple and small JavaScript code to web pages, but it is not recommended for large and complex web pages. A better practice is to use external JavaScript files.
The title
Attribute
The title
attribute can be used on any HTML element to provide additional information or a tooltip when the user hovers over the element.
Example
<p title="This is a tooltip">Hover over this paragraph to see a tooltip.</p>
The class
and id
Attributes
The class
and id
attributes can be used on any HTML element to assign a class name or an identifier to the element, which can be used for styling or scripting purposes.
Example
<p class="red">This paragraph has a class name of red.</p>
<p id="green">This paragraph has an identifier of green.</p>
The lang
Attribute
The lang
attribute can be used on any HTML element to specify the language of the content, which can help with accessibility, translation and search engine optimization.
Example
<p lang="en">This paragraph is in English.</p>
<p lang="fr">Ce paragraphe est en français.</p>
The hidden
Attribute
The hidden
attribute can be used on any HTML element to hide the element from the web page.
Example
<p hidden>This paragraph is hidden.</p>
The disabled
Attribute
The disabled
attribute can be used on form elements such as <input>
, <button>
, <select>
, and <textarea>
to disable the element and prevent user interaction.
Example
<input type="text" disabled value="This input is disabled">
<button disabled>This button is disabled</button>
The placeholder
Attribute
The placeholder
attribute can be used on form elements such as <input>
and <textarea>
to provide a hint or an example of what the user should enter in the element.
Example
<input type="text" placeholder="Enter your name">
<textarea placeholder="Enter your message"></textarea>
The required
Attribute
The required
attribute can be used on form elements such as <input>
, <select>
, and <textarea>
to indicate that the element must be filled in before submitting the form.
Example
<input type="text" required placeholder="Enter your name">
<select required>
<option value="">Select your country</option>
<option value="Pakistan">US</option>
<option value="India">UK</option>
<option value="China">Canada</option>
</select>
The checked
Attribute
The checked
attribute can be used on form elements such as <input type=“checkbox”> and <input type=“radio”> to indicate that the element is selected by default.
Example
<input type="checkbox" checked name="hobbies" value="reading">Reading
<input type="checkbox" name="hobbies" value="writing">Writing
<input type="checkbox" name="hobbies" value="coding">Coding
<br>
<input type="radio" checked name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="other">Other
Conclusion
HTML attributes are a great way to add more functionality and style to your web pages. They can help you create links, images, styles and scripts. You can use global attributes on any HTML element or use local attributes on specific elements.
In this article, you learned what HTML attributes are, how to use them and some common examples of HTML attributes that you can apply to your web pages. You also understand the concept of external or internal CSS files and JavaScript files to define styles and scripts for your web pages.