Avoiding deprecated tags in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a semantic header section.

HTML

<[1]>
  <h1>Welcome to my website</h1>
</[2]>

Drag options to blanks, or click blank then click option'

Aheader

Bcenter

Cfont

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using or tags which are deprecated.

Using

without semantic meaning.

The header tag is the correct semantic element for page headers. Tags like

and are deprecated and should be avoided.

2fill in blank

medium

Complete the code to emphasize text semantically.

HTML

<p>This is an <[1]>important</[2]> message.</p>

Drag options to blanks, or click blank then click option'

Ab

Bstrong

Cfont

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is only for styling.

Using which is deprecated.

The tag is used to give strong importance to text semantically. The tag only styles text bold without semantic meaning. Tags like are deprecated.

3fill in blank

hard

Fix the error in the code by replacing the deprecated tag with an appropriate alternative.

HTML

<[1] align="center">This text is centered.</[2]>

Drag options to blanks, or click blank then click option'

Adiv

Bcenter

Csection

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping the tag which is deprecated.

Using semantic tags that don't fit the content purpose.

The

tag is deprecated. Use a

with CSS for centering instead. Here, replacing with

is the first step to fix the error.

4fill in blank

hard

Fill both blanks to replace deprecated tags with semantic HTML5 tags.

HTML

<[1]>
  <[2]>This is the main navigation menu.</[2]>
</[1]>

Drag options to blanks, or click blank then click option'

Anav

Bmenu

Cul

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is deprecated.

Using

alone without semantic navigation.

The outer

tag defines the header section. The

tag is the semantic element for navigation menus. Deprecated tags like should be avoided.

5fill in blank

hard

Fill all three blanks to replace deprecated tags with semantic alternatives and proper structure.

HTML

<[1]>
  <[2]>Contact us at <a href="mailto:[e-mail]">[e-mail]</a></[2]>
  <[3]>© 2024 Company Name</[3]>
</[1]>

Drag options to blanks, or click blank then click option'

Afooter

Baddress

Csmall

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

.

Using

instead of

for contact info.

Using or tags.

The

tag defines the footer section. The

tag is used for contact information. The tag is used for fine print or copyright text. Deprecated tags like or should not be used.