HTMLmarkup~15 mins

ID attribute in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using the ID Attribute in HTML

📖 Scenario: You are creating a simple webpage for a local bakery. The page will have a header, a main section with a welcome message, and a footer. To style and link these sections easily later, you need to assign unique IDs to each main part of the page.

🎯 Goal: Build a basic HTML page with a <header>, <main>, and <footer> element. Assign the exact ID attributes page-header, main-content, and page-footer to these elements respectively.

📋 What You'll Learn

Use semantic HTML5 elements: <header>, <main>, and <footer>.

Assign the ID page-header to the <header> element.

Assign the ID main-content to the <main> element.

Assign the ID page-footer to the <footer> element.

Include a <title> in the <head> with the text 'Bakery Home'.

Use proper HTML5 document structure with lang, charset, and viewport meta tags.

💡 Why This Matters

🌍 Real World

Assigning IDs to HTML elements helps web developers target specific parts of a webpage for styling with CSS or interaction with JavaScript.

💼 Career

Understanding and using the ID attribute is fundamental for front-end web development, enabling you to build accessible, maintainable, and interactive websites.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en" in the <html> tag, and include <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, and a <title> with the text Bakery Home. Then add empty <header>, <main>, and <footer> elements inside the <body>.

HTML

Need a hint?

Start by typing the standard HTML5 document structure. Don't forget the lang attribute in the <html> tag and the meta tags inside <head>.

Add ID to the header element

Add the ID attribute page-header to the existing <header> element in the HTML code.

HTML




    
    
    Bakery Home

Need a hint?

Inside the <header> tag, add id="page-header".

Add ID to the main element

Add the ID attribute main-content to the existing <main> element in the HTML code.

HTML




    
    
    Bakery Home

Need a hint?

Inside the <main> tag, add id="main-content".

Add ID to the footer element

Add the ID attribute page-footer to the existing <footer> element in the HTML code.

HTML




    
    
    Bakery Home

Need a hint?

Inside the <footer> tag, add id="page-footer".