Basics of HTML Attributes

All HTML elements have attributes — modifiers that either specify how the element works or add additional functionality. They go inside the start tag.

The <img> tag is one of the examples of HTML tags that can be modified with attributes. The <img> tag is used for embedding pictures and requires an src attribute that specifies the picture's path. It's a required attribute because, without it, the browser won't be able to display the image.

On the other hand, style is an optional attribute. For example, by default, the body text is black. But if you add a style="color:red;" to the paragraph tag <p>, the text color changes to red.

An attribute consists of two parts: a name and a value, separated by the equals sign (=).

The name is the first part that tells us what kind of modifier it is. For example, the link tag <a> has an attribute href that indicates the URL of a page it leads to href stands for hypertext reference, and it tells the browser that there is a hypertext link coming.

The attribute value is the second part of the attribute that comes after the equals symbol and is enclosed within quotation marks. The value tells you what exactly the attribute is going to do — in the example href="design.html", the value of the attribute href is "design.html", and this is also the URL of the link that the browser will redirect users to when clicked.

You might notice that the link in this example doesn't begin with https://www — that's because the page it leads to is hosted within the website.

The title attribute adds tooltips.^[1] You can add this attribute to many different elements: text, headings, images, links, etc. Such attributes are called global attributes.

When you hover a mouse over an element with a title attribute, you'll see the text pop up as a tooltip. Although not necessary, this allows adding some extra information if needed.

As you probably know, links are what make up the bulk of the Internet. The tag <a> defines a link, and it requires the href (hypertext reference) attribute to specify where it leads.

There are two types of links you can use: local and external. Local links lead to pages that are within your website. They are specified with relative URLs that don't have the https://www part. The best part about local links is that they don't break if you change the domain.

External links lead to external websites like google.com, and they require what we call absolute URLs — full web addresses with https://www.

Can the Internet exist without cat pictures? That's how it was in its early dark textual days, but now it's challenging to imagine a webpage without images.

The tag <img> that allows us to insert — usually referred to as "embed" — images within a page has a required attribute src (an abbreviation for "source"). It specifies the path to the image displayed. Like links, you can either link local images stored on your website or external ones from the web. In most cases, it's better to use local images as you can't control when external images change URL or disappear.

The height and width attributes tell the browser the exact size of the image in pixels (px) and speed up the downloading process.

The browser first loads the text and then the image files. If the browser knows the dimensions of the image, it can set the space size aside while laying out the page. If you don't indicate the image's dimensions, the page's layout will shift as it loads. As you can probably guess, this is extremely disruptive to users — especially when they have already started reading the article! Another downside to not indicating the image height and width is that browsers might stretch or reduce them as they will.

The alt attribute is not a required attribute for the <img> tag, but it's very important. It provides an alternative text for the picture if the picture doesn't load for some reason.

The alt attribute is crucial for several reasons. First, it's essential for

SEO and missing it makes you fail the W3C validation test.^[2] Second, it's the only way people using screen readers can know what's in that picture that they can't see.

Use this attribute every time!

The style attribute helps — you guessed it — style HTML elements. It's also a global attribute, meaning that it can be applied to most HTML elements.

The style attribute introduces elements in a different type of language called CSS. While HTML gives content its structure, CSS's job is to describe your web pages' style, design, layout, etc. The value of a style attribute — the part that follows the equals sign and is enclosed with quotation marks — has its own structure.

For example, the attribute style="color:red;" will make the text of that paragraph red. Color here is a CSS property, while red is its value. You must use a colon to separate the two parts and a semicolon after the CSS value.

While not using it won't break your page, the lang attribute inside the <html> tag lets search engines and browsers know your page's language to return language-specific results.

Here, you can also specify the country of the language if the language in question has more than one variation. For American English, the attribute will look like this — lang="en-US", where the first two letters stand for the language and the two letters after the hyphen for the country.

You can find the complete list of languages and countries codes on W3Schools website.^[3]

The title is a global attribute with a downright misleading name. Instead of adding a title, it provides extra information about an element. It takes the form of a tooltip that appears when the mouse hovers over an element. Tooltips are highly contextual and specific. Add them to elements like icons, text links, buttons, etc., to provide extra information about the element.

All links must have an href attribute — otherwise, they can't fulfill their function. Having an <a> element without a href attribute is like building a house without doors or windows — it can be done, but there's no reason to.

The <img> tag usually hosts several attributes — usually alt for alternative text and width & height to specify the image dimensions. Without them, the browser will still be able to display your image. However, the src attribute is an absolute must — without it, the browser won't have the path to your picture, and the image will not be shown.

To set the page's default language, use the lang attribute inside the <html> tag. If you use the lang attribute in the <body> tag, it won't cover the head element's content of the document.

It is also possible to set languages for different parts of the content. For example, if you have a paragraph in Japanese, use the attribute lang in that paragraph's tag, so the browser displays it correctly.

The alt attribute provides an alternative text in case the browser can't load the image. It also allows search engines to index your content, which means that your images will show up on the search page results when users mention keywords from their alt text.

Keep your alt text less than 125 characters as many screen readers stop reading after that.^[4]There's no need to say "picture of..." or "image of..." as assistive technologies will announce it anyway — jump right into the description and try to be specific.

If you want to downsize or change your picture's dimensions, using height and width attributes is not the way to do it. In this case, the browser will still load the original picture and either display its smaller version, or stretch and distort it. Instead, rescale and cut images in an image editor before uploading them.

You can change the font color, size, and typeface of headings and body text alike. In this example, the style attribute is inside the <h1> tag, which means that it modifies the heading, not the body text.

When embedding a picture, make sure that your link leads to a file of the right format. The most common image formats that HTML supports are APNG, AVIF, GIF, JPEG, PNG, and SVG. If the link leads to a format that is not supported or a totally different format like MP4 for video, browsers won't be able to show it.

The title attribute adds tooltips on hover. Usually, they contain additional information about the element. Keep in mind that such tooltips will most likely be unavailable for people using touch-only devices, assistive technology users, and people with cognitive concerns. Use tooltips only when necessary and for non-essential information so that even if users miss it, they will still understand the content.

By default, browsers underline links and display unvisited links in blue and visited links in purple. Remember that if the href attribute isn't present in the <a> tag, the element will not be a hyperlink.

Plus, you can use links to redirect users to email addresses instead of web page URLs. For example, writing <a href=”mailto:[email protected]”> Send email </a> will send users to an email.