0
0
HTMLmarkup~15 mins

Head and body sections in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Understanding Head and Body Sections in HTML
📖 Scenario: You are creating a simple webpage for a local bakery. The page needs a title and a visible heading.
🎯 Goal: Build a basic HTML page with a <head> section containing a title, and a <body> section containing a heading.
📋 What You'll Learn
Create an HTML skeleton with <html>, <head>, and <body> tags
Add a <title> inside the <head> with the text 'Bakery Delight'
Add a <h1> inside the <body> with the text 'Welcome to Bakery Delight!'
Use proper indentation and closing tags
💡 Why This Matters
🌍 Real World
Every webpage needs a proper structure with head and body sections to work well in browsers and be accessible.
💼 Career
Understanding HTML structure is essential for web developers, designers, and content creators to build and maintain websites.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the opening and closing <html> tags to start your HTML document.
HTML
Need a hint?

Every HTML page starts with <html> and ends with </html>.

2
Add the head section with a title
Inside the <html> tags, add a <head> section. Inside <head>, add a <title> tag with the text Bakery Delight.
HTML
Need a hint?

The <title> tag goes inside <head> and sets the page's name shown in the browser tab.

3
Add the body section with a heading
After the <head> section, add a <body> section. Inside <body>, add an <h1> tag with the text Welcome to Bakery Delight!.
HTML
Need a hint?

The <body> section holds the visible content of the page, like headings and paragraphs.

4
Add the document type and language attribute
At the very top of your document, add the HTML5 doctype declaration <!DOCTYPE html>. Also, add the attribute lang="en" to the opening <html> tag.
HTML
Need a hint?

The doctype tells browsers this is an HTML5 page. The lang attribute helps screen readers know the language.