Skip to main content
Version: WIP

✏️ 1.1.3.4 Practice: Divs and Spans

Goal: Practice using the the tags we learned in the lesson:

  • <div> tags — places to add classes to large parts of our page and separate out content
  • <span> tags — places to add classes to content within block elements

Warm Up​

  • What is the difference between a div and a span?
  • When would you use a span but not a div?
  • When would you use a div but not a span?

AI Support: Unsure when to use a div vs a span? After trying the warm-up questions, you can ask AI for a plain-language explanation or analogy. Do not ask AI to complete the exercise projects for you.

Example prompts:

  • Weak: "Fix my HTML layout."
  • Strong: "I'm grouping a whole section of my page. Can you explain when a <div> is a better choice than a <span>—without writing the HTML for me?"

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "I need to style a whole section of my page at once. Can you explain why a <div> with a class is easier to change than adding the same class to every element inside it?"

After reading AI's response, explain the concept back in your own words before moving on.

Code​

Meet the goal by completing one of these projects. Make sure to make commits regularly and push to the project's remote repository on GitHub.

Boring Lecture​

  • Rewrite the boring-lecture page and remove the intro class from the elements themselves, and create a <div> with the intro class to hold the elements.

Blogging Site​

  • Create a new blogging website about whatever you want and use <div>s to group together and style each blog post.
  • On the blogging website, create an "about me" section that's styled differently from the rest of the page.

Resume Site​

  • Start a new webpage to house your resume. Use <div>s and <span>s to style sections for your education, work experience, skills, etc.

Checkpoint​

Before moving on, you should be able to:

  • Explain the difference between a <div> and a <span>
  • Use a <div> to group and style a whole section of a page
  • Use a <span> to style inline content within a block element
  • Commit and push your practice project to GitHub

If you're unsure, re-read the Divs and Spans lesson or ask AI: "I'm grouping a whole section of my page. Can you explain when a <div> is a better choice than a <span>—without writing the HTML for me?"