TL;DR – HTML attributes are additional values used to customize HTML elements.
What is an Attribute in HTML
In HTML, attributes can be applied to basically any element. They modify the default behavior of the element or specify certain characteristics (e.g., dimensions):
<img src="image.png" alt="HTML Image height" height="100px">
HTML attributes come in four basic types:
|Required||Required for an element to work as intended||One or multiple specific elements|
|Optional||Changes the element's default functionality||One or multiple specific elements|
|Global||Changes the element's default functionality||All elements|
|Event||Specifies conditions for a script to run||All elements|
How to Write HTML Attributes
HTML attributes are always included in the opening tag. The syntax is rather simple:
As you can see, attributes are specified in name-value pairs:
namedefines the name for the HTML attribute
valuespecifies the value you wish to set for it
HTML attributes are case-insensitive. However, World Wide Web Consortium recommends to write them in lowercase for a neater look.
Note: don't forget to encase the value in quotes.
Theory is great, but we recommend digging deeper!
Most Common HTML Attributes: a List
id attribute helps you to add a unique ID for an element to be used for identification:
<nav id="faq"> <a href="https://www.bitdegree.org/faq">Your questions answered</a> </nav>
class attribute creates a relation between the element and a stylesheet:
<p class="paragraph1">This is paragraph text.</p>
style attribute allows you to provide inline styling for an element:
<div style="background-color: black; color: white;"> This text was styled using the style attribute </div>
title attribute adds information related to the element. Hovering on it will cause a tooltip with the title you created to appear:
<h1 title="This will show up after hovering the mouse over this element">Some random text</h1>
Note: id, class, style and title attributes are suported globally.
alt attribute sets up some alternative text to be displayed in case an element (e.g., an image) cannot be loaded:
<img src="image.png" alt="Space Doggo">
href attribute adds an URL destination for a link, creating a hyperlink which can take you to any other webpage:
<a href="https://www.bitdegree.org/">Click this link to start learning.</a>
height attributes, you can change the element's dimensions:
<img src="image.png" width="100" height="100">
Note: size is usually defined in pixels (px).
src is an abbreviation for source. By using this HTML attribute, you can define an external source for an element:
<img src="image.png" alt="Space Doggo" width="50" height="50">
HTML Attributes: Useful Tips
- When using multiple HTML attributes, you can list them in any order - just make sure to separate them with spaces.
althelps to make your website accessible for disabled users who use screen readers. When assistive technologies have an alternative text to read, people with disabilities can understand the content better.
- The HTML
titleattribute can help to optimize your website for search engines, as this supplementary information can also contain keywords.