HTMLmarkup~20 mins

What are attributes in HTML - Hands-On Activity

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding HTML Attributes

📖 Scenario: You are creating a simple webpage to introduce yourself. You want to add extra information to your HTML tags to make your page more meaningful and accessible.

🎯 Goal: Build a basic HTML page that uses attributes to add details to elements like links and images.

📋 What You'll Learn

Create an HTML skeleton with html, head, and body tags

Add a title inside the head

Add an img tag with src and alt attributes

Add an a (link) tag with href and target attributes

Use attributes correctly inside the opening tags

💡 Why This Matters

🌍 Real World

Webpages use attributes to provide important details about elements, like where images come from or where links go.

💼 Career

Understanding attributes is essential for creating accessible, well-structured websites and for working with web developers and designers.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML skeleton with html, head, and body tags. Inside head, add a title tag with the text My First Page.

HTML

Need a hint?

Remember the basic HTML page starts with <!DOCTYPE html> and has <html>, <head>, and <body> tags.

Add an image with attributes

Inside the body, add an img tag with the src attribute set to "profile.jpg" and the alt attribute set to "My profile picture".

HTML




    My First Page

Need a hint?

The img tag needs src to show the image and alt to describe it for screen readers.

Add a link with attributes

Below the image, add an a tag with the href attribute set to "https://example.com" and the target attribute set to "_blank". The link text should be Visit Example.

HTML




    My First Page

Need a hint?

The a tag creates a link. Use href for the URL and target="_blank" to open it in a new tab.

Add a heading with a class attribute

Above the image, add an h1 heading with the text Welcome to My Page and add a class attribute with the value main-title.

HTML




    My First Page


    
    
    Visit Example

Need a hint?

The class attribute helps identify elements for styling or scripting. Add it inside the opening h1 tag.