Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Challenge: Implementing Semantic Elements | Advanced HTML
HTML Essentials

book
Challenge: Implementing Semantic Elements

Task

Create an HTML document for a Flutter development company's website using semantic HTML elements to improve accessibility and search engine optimization.

Ensure that each section of the website is wrapped in the appropriate semantic HTML elements (<header>, <nav>, <section>, <footer>).

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Flutter Main Company</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- Step 1: Provide the correct tag for the header section -->
<_____>
<h1>Flutter Main Company</h1>
<!-- Step 2: Provide the correct tag for navigation menu -->
<_____>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</_____>
</_____>

<!-- Step 3: Provide the correct tag for the 'about us' section -->
<_____>
<h2>About Us</h2>
<p>
Welcome to Flutter Main Company, your premier destination for
professional Flutter app development services.
</p>
</_____>

<!-- Step 3: Provide the correct tag for the 'services' section -->
<_____>
<h2>Our Services</h2>
<ul>
<li>Flutter App Development</li>
<li>Cross-Platform Development</li>
<li>UI/UX Design</li>
<li>Testing and Quality Assurance</li>

Hint

  • Step 1: Use the header element to contain the main branding elements and navigation.

  • Step 2: Utilize the nav element for the navigation menu.

  • Step 3: Wrap each distinct section of content in a section element.

  • Step 4: The footer element should contain copyright information, policy links, and contact details.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Flutter Main Company</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- Step 1: Provide the correct tag for the header section -->
<header>
<h1>Flutter Main Company</h1>
<!-- Step 2: Provide the correct tag for navigation menu -->
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</header>

<!-- Step 3: Provide the correct tag for the 'about us' section -->
<section>
<h2>About Us</h2>
<p>
Welcome to Flutter Main Company, your premier destination for
professional Flutter app development services.
</p>
</section>

<!-- Step 3: Provide the correct tag for the 'services' section -->
<section>
<h2>Our Services</h2>
<ul>
<li>Flutter App Development</li>
<li>Cross-Platform Development</li>
<li>UI/UX Design</li>
<li>Testing and Quality Assurance</li>

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 3

Vraag AI

expand
ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

some-alt