Someone wanted to learn this too, so Grasp built them a personal learning path.

Create your own
Lesson illustration

HTML Attributes: Metadata and Functionality

Hello! Welcome back to your front-end programming course.

In our last lesson, we learned how to give our webpage structure using text elements like headings, paragraphs, and lists. We created a basic "skeleton" with content, but it was static. Today, we'll learn how to bring that skeleton to life by adding more information and functionality to our HTML elements.

This lesson addresses the learning outcome: Use HTML attributes to add metadata and functionality to elements. We'll explore how to turn text into a clickable link, display an image, and provide important information for browsers and search engines—all using HTML attributes.

1. What are HTML Attributes?

In the last lesson, we focused on the tags themselves, like <p> and <h1>. Now, we'll look at what goes inside the opening tag.

HTML attributes are special words that provide additional information about an element. They are the primary way we configure an element's behavior, appearance, or functionality.

The basic syntax is always a name/value pair, placed within the opening tag:
name="value"

For example:
<p name="value">This is a paragraph.</p>

Let's start by reading a clear definition and seeing some core examples.

HTML Attributes

This article from W3Schools, 'HTML Attributes', provides a great introduction to the concept. It covers the basic syntax and introduces several of the most common attributes we'll be discussing today.

Please read the sections 'HTML Attributes', 'We Suggest: Always Use Lowercase Attributes', and 'We Suggest: Always Quote Attribute Values'. These sections will give you the foundational rules for how to write attributes correctly.

As you read, note the two key best practices:

  1. Always use lowercase for attribute names.
  2. Always enclose attribute values in quotes. Double quotes (") are the standard, but single quotes (') are also valid.

2. Attributes for Functionality and Content

Many attributes add direct functionality or define the content of an element. As a designer, you can think of these as defining the interactive properties and sources for the visual elements in your mockups.

Let's explore some of the most important ones.

HTML Attributes

Now, let's go back to the same W3Schools article to learn about specific attributes that add functionality. This reading covers how to create links, embed images, and add helpful information for users.

Read the sections on 'The href Attribute', 'The src Attribute', 'The width and height Attributes', 'The alt Attribute', 'The style Attribute', and 'The title Attribute'. Pay close attention to which tag each attribute is used with.

Key Attributes from the Reading:

  • href (Hypertext Reference): Used with the <a> (anchor) tag to specify the URL a link should point to. This is what makes a link clickable.
  • src (Source): Used with the <img> tag to specify the path (the URL) to the image you want to display.
  • width and height: Used with <img> to specify the dimensions of the image in pixels. Setting these helps the browser allocate space for the image before it loads, preventing the page layout from jumping around.
  • alt (Alternative Text): Used with <img> to provide a text description of the image. This is critical for accessibility, as it's what screen readers announce to visually impaired users. It's also displayed if the image fails to load. Your experience in user-centric design makes the importance of alt text immediately apparent.
  • style: A global attribute (meaning it can be used on almost any element) that allows you to apply CSS styles directly to an element. We will dedicate entire future modules to CSS, but this attribute gives you a first glimpse of how to change an element's appearance.
  • title: A global attribute that provides extra information about an element, which browsers typically display as a tooltip on hover.

3. Attributes for Metadata

Some attributes don't change the visual appearance or functionality for the user directly. Instead, they provide metadata—data about the HTML document itself. This information is used by browsers, search engines, and other web services. Most of this metadata lives inside the <head> element.

This video gives an excellent tour of the most important metadata elements and attributes.

HTML tutorial for complete beginners: Metadata

This video from Julio Codes, 'HTML tutorial for complete beginners: Metadata', focuses entirely on the content of the <head> element. It clearly explains why metadata is important and how to write it.

Please watch the following sections: 'Character Encoding with the Meta Element' (00:56 - 02:01) 'Adding Author and Description Metadata' (02:01 - 03:55) 'Viewport Meta Tag for Responsive Design' (03:55 - 07:57) Pay special attention to the 'viewport' section, as it's fundamental to ensuring your designs adapt correctly to different screen sizes.

Key Metadata Attributes:

  • lang: Placed on the <html> tag (e.g., <html lang="en">) to declare the primary language of the page. This helps search engines and screen readers.
  • <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is the universal standard that can handle almost any character from any language. This line should be in every HTML document you create.
  • <meta name="description" content="...">: Provides a brief summary of the page's content. Search engines often use this for the snippet in search results.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This is one of the most important meta tags for a designer. It tells the browser how to control the page's dimensions and scaling on mobile devices. Without it, your site would appear as a tiny, zoomed-out version of the desktop view on a phone.

4. Practice: Enhancing Your Project Page

Let's apply these new attributes to the project page we created in the last lesson. Open your index.html file and make the following additions.

  1. Add the lang attribute to your <html> tag.
  2. Add the essential <meta> tags to your <head>.
  3. Add an image of your project. For the src, you can use a placeholder image from a service like Unsplash.
  4. Add a link that could, in a real portfolio, lead to a full case study.
  5. Add a title attribute to one of the list items for extra context.

Here is the updated code. Compare it to your previous version and notice where the attributes have been added:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A project page detailing the redesign of a mobile banking app.">
    <title>Project: Mobile Banking App</title>
</head>
<body>
    <h1>Project: Mobile Banking App Redesign</h1>

    <img 
        src="https://source.unsplash.com/random/800x600?technology" 
        width="400" 
        alt="A mockup of the redesigned mobile banking app interface on a smartphone."
    >

    <p>This project focused on redesigning the user interface and experience for a mobile banking application to improve usability and user engagement.</p>

    <h2>Project Goals</h2>
    <ul>
        <li>Create a modern and intuitive user interface.</li>
        <li title="This was a key stakeholder requirement.">Streamline the process for checking balances and transferring funds.</li>
        <li>Ensure the design is accessible for all users.</li>
    </ul>

    <h2>Design Process</h2>
    <ol>
        <li>User Research & Persona Creation</li>
        <li>Wireframing & Information Architecture</li>
        <li>High-Fidelity Prototyping in Figma</li>
        <li>User Testing & Feedback Iteration</li>
    </ol>

    <p>
        <a href="#">Read the full case study</a>
    </p>

</body>
</html>

(Note: href="#" is a common placeholder for a link that doesn't go anywhere yet.)

Save your file and view it in the browser. You should see the image, and if you hover over the second item in the "Project Goals" list, a tooltip will appear. The link will be clickable, even if it doesn't lead anywhere. The metadata you added won't be visible on the page, but it's there, doing its job for the browser and search engines.

Conclusion

Great job! You've taken a huge step from creating static content to building pages with functionality and rich metadata. Understanding attributes is key to unlocking the full power of HTML.

Key Takeaways:

  • Attributes provide additional information to HTML elements and are written as name="value" pairs in the opening tag.
  • Attributes like href and src add functionality by linking to other resources (pages, images).
  • The alt attribute on images is essential for accessibility.
  • Metadata attributes, mostly in the <head>, provide crucial information for browsers and search engines (e.g., charset, description, viewport).
  • Best practices include using lowercase attribute names and always quoting values.

In our next lesson, we will focus specifically on one of the most fundamental interactions on the web: creating links using the anchor element with href attributes to navigate between pages. We'll build on what you learned today to start linking multiple pages together.

Previous lesson
Text Structure with HTML
Next lesson
Creating Links with Anchor Elements

Can't find a good explanation? Sign up and we'll make it for you

Sign up