HTMLmarkup~30 mins

Attribute best practices in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Attribute Best Practices in HTML

📖 Scenario: You are creating a simple webpage for a local bakery. The page will have a header, a navigation menu, a main section with a welcome message, and a footer. You want to make sure the HTML uses attributes correctly for accessibility and clarity.

🎯 Goal: Build a basic HTML5 page structure with semantic elements and add appropriate attributes such as lang, charset, viewport, aria-label, and alt to improve accessibility and proper rendering.

📋 What You'll Learn

Use the lang attribute on the <html> tag with value en

Add a <meta> tag with charset set to UTF-8

Add a <meta> tag with name set to viewport and content set to width=device-width, initial-scale=1.0

Add an aria-label attribute to the <nav> element describing it as 'Primary navigation'

Add an alt attribute to the bakery logo image describing it as 'Bakery logo'

💡 Why This Matters

🌍 Real World

Webpages need proper attributes to be accessible to all users, including those using screen readers or mobile devices.

💼 Career

Knowing how to use HTML attributes correctly is essential for front-end developers to build inclusive and well-functioning websites.

Progress0 / 4 steps

Create the basic HTML skeleton with lang attribute

Write the opening <!DOCTYPE html> declaration and create the <html> element with the lang attribute set to en. Inside it, add the <head> and <body> elements.

HTML

Need a hint?

The lang attribute helps browsers and screen readers know the language of the page.

Add charset and viewport meta tags in the <head>

Inside the <head> element, add a <meta> tag with charset="UTF-8". Then add another <meta> tag with name="viewport" and content="width=device-width, initial-scale=1.0".

HTML

Need a hint?

The charset meta tag sets the character encoding. The viewport meta tag helps with responsive design on mobile devices.

Add a <nav> element with an aria-label

Inside the <body>, add a <nav> element. Give it an aria-label attribute with the value Primary navigation. Inside the <nav>, add an unordered list with three links: Home, Menu, Contact.

HTML

Need a hint?

The aria-label attribute describes the navigation region for screen readers.

Add a bakery logo image with an alt attribute

Below the <nav>, add an <img> element with src="logo.png" and an alt attribute set to Bakery logo.

HTML




  
  


  
    
      Home
      Menu
      Contact

Need a hint?

The alt attribute describes the image for screen readers and shows if the image cannot load.