What is HTML attributes? So far we’ve just been looking at the basics of an HTML element. The simple version. Like the paragraph element, but HTML does have a bit more complexity than this.
More power that can be added to any element through what’s called an attribute.
Some attributes work on several of the elements, but not all of them. We’ll get into some examples of those when we learn about images and video.
- HTML attributes provide additional information about HTML elements.
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name=”value”
Lets look at a few HTML attributes.
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The title attribute defines some extra information about an element
Global Attributes are attributes in HTML that will work on any element. I’m going to cover four of the most useful global attributes.
The most commonly used attribute is the class attribute. It gives us a way to attach a reusable name to any element. So, we can address that name in our CSS and apply styling to all the elements that have that class.
Whatever the use case, class and ID attributes give us a way to name certain HTML elements and refer to them in other parts of the stack up code.
The Lang Attribute gives us a way to tell the browser what language the content is in. L-A-N-G= and the short code for the language. We’ll get deeper into how to support languages on the web and where to find these short codes in chapter seven.
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.