HTML attributes provide additional information about an element. They are always placed inside the opening tag and always follow the format name="value" (the attribute’s name followed by its associated value).

HTML Attributes
HTML Attributes

An HTML attribute consists of two parts:

  • attribute name: This is the attribute’s name, which specifies the type of additional information being provided for the element.
  • attribute value: This is the assigned information or setting for the attribute. It should be enclosed in double quotes (""). Each attribute has its own specific set of values.

The lang Attribute (Specifies Language)

The lang attribute defines the language of an HTML document or a specific element. This helps search engines and screen readers understand the language used on a webpage.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>The lang Attribute</title>
    </head>
    <body>
        <p lang="fr">Bonjour tout le monde!</p>
    </body>
</html>
  • You should always include the lang attribute inside the <html> tag to declare the language of the web page.
  • Country codes can also be added to the language code in the lang attribute. The first two characters specify the language of the HTML page, while the last two characters define the country.
<html lang="en-US">

In this case, en represents English, and US represents United States.

The title Attribute (Tooltip on Hover)

The title attribute provides extra information about an element. When the user hovers over the element, a small tooltip appears. It is a global attribute, meaning it can be used on any HTML element, but it is most commonly applied to links and images.

<p title="This is a tooltip">Hover over this text to see the tooltip.</p>

Run these code snippets in an online HTML playground to see how it works!

Final Thoughts

  • Global attributes: These attributes can be used on any HTML element.
  • lang: A global attribute that defines the language of the content.
  • title: Displays a tooltip with extra information when hovered over. However, it may not work on mobile devices.

These HTML attributes enhance accessibility, SEO, and user experience.

❮ Previous
Next ❯