Section and article in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a section with a heading.

HTML

<section>
  <[1]>Welcome to my website</[1]>
</section>

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

Adiv

Bspan

Cp

Dh1

Attempts:

3 left

💡 Hint

Common Mistakes

Using div instead of a heading tag.

Using span which is inline and not for headings.

The h1 tag is used for the main heading inside a section.

2fill in blank

medium

Complete the code to create an article with a paragraph inside.

HTML

<article>
  <[1]>This is an article about nature.</[1]>
</article>

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

Ap

Bsection

Ch2

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using h2 instead of paragraph for normal text.

Using section inside article incorrectly.

The p tag is used for paragraphs inside articles.

3fill in blank

hard

Fix the error in the code by choosing the correct tag for the article heading.

HTML

<article>
  <[1]>My Travel Story</[1]>
  <p>I visited many countries.</p>
</article>

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

Ah3

Bdiv

Cfooter

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using div which is not a heading.

Using footer inside article heading.

The h3 tag is a proper heading inside an article, smaller than h1 or h2.

4fill in blank

hard

Fill both blanks to create a section with an article inside it.

HTML

<[1]>
  <[2]>
    <h2>News</h2>
    <p>Today is sunny.</p>
  </[2]>
</[1]>

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

Asection

Bfooter

Carticle

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping section and article tags.

Using footer or header incorrectly.

The section groups content, and article is for independent content inside it.

5fill in blank

hard

Fill all three blanks to create an article with a header and a paragraph.

HTML

<article>
  <[1]>
    <h1>Welcome</h1>
  </[1]>
  <[2]>This is the first paragraph.</[2]>
  <[3]>Footer info</[3]>
</article>

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

Aheader

Bp

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using section instead of header or footer.

Using div instead of semantic tags.

The header holds the heading, p is the paragraph, and footer is for footer info inside the article.