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>).
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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
headerelement to contain the main branding elements and navigation.Step 2: Utilize the
navelement for the navigation menu.Step 3: Wrap each distinct section of content in a
sectionelement.Step 4: The
footerelement should contain copyright information, policy links, and contact details.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 3
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
