0
0
HTMLmarkup~30 mins

Global attributes in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Using Global Attributes in HTML
📖 Scenario: You are creating a simple webpage with a header, a main section, and a footer. You want to make sure the page is accessible and easy to navigate by adding global attributes to the HTML elements.
🎯 Goal: Build a basic HTML page structure using semantic elements and add global attributes like id, class, and tabindex to improve accessibility and styling.
📋 What You'll Learn
Use semantic HTML5 elements: <header>, <main>, and <footer>
Add an id attribute to the <header> element with the value page-header
Add a class attribute to the <main> element with the value content-area
Add a tabindex attribute to the <footer> element with the value 0
Ensure the HTML document includes the lang attribute in the <html> tag and the charset meta tag
💡 Why This Matters
🌍 Real World
Web developers use global attributes to improve accessibility, styling, and scripting on all HTML elements.
💼 Career
Understanding global attributes is essential for creating accessible and maintainable websites, a key skill for front-end developers.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with html, head, and body tags. Include the lang attribute with value en in the <html> tag. Inside the head, add a meta tag with charset set to UTF-8. Do not add any content inside the body yet.
HTML
Need a hint?

Remember to add lang="en" inside the <html> tag and a meta tag with charset="UTF-8" inside the <head>.

2
Add semantic sections with global attributes
Inside the body, add a header element with an id attribute set to page-header. Then add a main element with a class attribute set to content-area. Leave the footer element for the next step.
HTML
Need a hint?

Use id="page-header" on the header and class="content-area" on the main element.

3
Add the footer with tabindex attribute
Add a footer element after the main element. Give the footer a tabindex attribute with the value 0. Inside the footer, add a paragraph with the text Contact us at info@example.com.
HTML
Need a hint?

Use tabindex="0" on the footer to make it focusable by keyboard.

4
Add a class to the footer for styling
Add a class attribute with the value site-footer to the existing footer element.
HTML
Need a hint?

Add class="site-footer" inside the footer tag.