Smal SEO Tool
« HTML ElementsHTML Headings »

HTML Attributes

HTML attributes provide additional information about HTML elements.

Understanding Attributes

  • All HTML elements can have attributes.
  • Attributes provide additional information about an element's behavior or properties.
  • Attributes are always specified in the start tag.
  • They usually come in name/value pairs like: name="value".

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.

Example

html
<a href="https://www.smalseotool.com">Visit Smal SEO Tool</a>
Try it Yourself »

The src Attribute

The <img> tag embeds an image. The src attribute specifies the path to the image.

Example

html
<img src="https://picsum.photos/seed/girl/200/300" alt="A sample image">
Try it Yourself »

There are two ways to specify a URL in the src attribute:

  1. Absolute URL: A link to an image hosted on another website (e.g., `https://www.example.com/image.jpg`).
  2. Relative URL: A link to an image hosted within your own website. This is generally the best practice as it won't break if you change your domain name.

The width and height Attributes

The <img> tag should also include width and height attributes. These specify the size of the image in pixels, helping the browser reserve space for the image before it loads.

Example

html
<img src="https://picsum.photos/seed/girl/250/300" alt="Girl with a jacket" width="250" height="300">

The alt Attribute

The required alt attribute for <img> provides alternative text for an image if it cannot be displayed. This is crucial for accessibility (for screen readers) and for SEO.

Example of Alt Text

html
<img src="img_girl.jpg" alt="Girl with a jacket">

If the image path is broken, the alt text will be displayed instead:

Example of Broken Image

html
<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add inline CSS styles to an element, such as color, font size, etc.

Example

html
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside the <html> tag to declare the language of the web page. This assists search engines and browsers.

html
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

You can also add a country code to be more specific:

html
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute

The title attribute defines extra information that appears as a tooltip when you hover over the element.

Example

html
<p title="I'm a tooltip">Mouse over this paragraph to see the title.</p>

Best Practices: Lowercase and Quotes

While HTML is not strict about it, the best practice recommended by the W3C is to always use lowercase for attribute names and to always wrap attribute values in quotes (double quotes are most common).

Good:

html
<a href="https://www.smalseotool.com/html/">Visit our HTML tutorial</a>

Bad (Avoid):

html
<a href=https://www.smalseotool.com/html/>Visit our HTML tutorial</a>

Chapter Summary

  • All HTML elements can have attributes.
  • The href attribute of <a> specifies the link's URL.
  • The src attribute of <img> specifies the image's path.
  • The width and height attributes define image size.
  • The alt attribute provides text for screen readers and when images don't load.
  • The style attribute adds inline CSS.
  • The lang attribute declares the page language.
  • The title attribute provides extra info as a tooltip.

Test Yourself with an Exercise

Which of the following is a correct syntax for using an HTML attribute?

« HTML ElementsHTML Headings »