What are HTML attributes?

What are HTML attributes?

HTML attributes

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

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.

Id is another popular one, it’s similar to class but we’re only allowed to use unique names once in an entire HTML page. You can use an ID for targeting CSS, but it’s much more specific and that can be a problem. So most of the times CSS developers tend to stick to classes. Ids are particularly helpful for addressing particular elements with JavaScript or, with a targeted link. The fact that there will only ever be one element with any particular ID name, becomes useful when interacting with JavaScript or links.

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.

Leave a Reply