Block and Inline: Enhance explanation of div and span elements #30638
Conversation
clarified the roles of div and span elements in HTML, what they "actually" do as generic containers for styling and layout. highlighting the main differences in design behavior between block-level and inline elements
github-actions
bot
added
the
Content: Foundations
mao-sz
requested review from
a team and
ManonLef
and removed request for
a team
ManonLef
left a comment
ManonLef
left a comment
There was a problem hiding this comment.
Thanks @dayview ! Overall I think this is worded more beginner friendly, and it definitely reads much nicer. Seems like a good improvement to me.
I did leave some comments with suggestions.
Overall I dialed down the bold and italic styling. It doesn't fit well with how we generally use those in the lessons or even in this lesson. Block and inline for example have been covered and don't need emphasis.
| Span is an inline-level element by default. It can be used to group text content and inline HTML elements for styling and should only be used when no other semantic HTML element is appropriate. | ||
| A `span` is a generic **inline** container. It sits inside a line of text and only takes up as much space as its content. Unlike `div`, it does **not** start on a new line. You use `span` when you want to style or target just part of a sentence. | ||
|
|
||
| For example, highlighting a single word or attaching a tooltip to a phrase. Again, you add a `class` or `id` so CSS can find and manipulate it. |
There was a problem hiding this comment.
| For example, highlighting a single word or attaching a tooltip to a phrase. Again, you add a `class` or `id` so CSS can find and manipulate it. | |
| For example, when you want to highlight a single word or attaching a tooltip to a phrase you can add a `class` or `id` so CSS can find and manipulate it. |
I also don't know why this "for example" starts in a new paragraph. Did you intend to remove the line above it perhaps?
There was a problem hiding this comment.
Yes! I intended to adjust the paragraph structure here. I thought combining/separating these sections would improve readability so that the flow of the sentence would be more proper and linked. However, if you feel the original structure works better, I'm happy to revert it!
Co-authored-by: Manon <[email protected]>
|
Hi @ManonLef! Thank you so much for the feedback! I understand I went overboard with the formatting, and I wanted to try using the convention usually for wordings to the past modules/lessons. Since block and inline were already covered earlier, they don't need additional emphasis here. I'll update the PR to keep the formatting cleaner and more consistent with the rest of the curriculum. |
Co-authored-by: Manon <[email protected]>
Co-authored-by: Manon <[email protected]>
Co-authored-by: Manon <[email protected]>
Co-authored-by: Manon <[email protected]>
2 participants
Because
The original lesson text is technically accurate but doesn't give readers concrete examples of what
divandspanare or when to use them. It also jumps between concepts (generic containers, hooks, grouping, block-level) without clearly explaining the problem they solve or how they differ in practical use.This PR
divandspanwith clear behavior descriptions (block vs inline)divandspanare used (e.g., cards, styling a single word)divandspanrelate to the block vs inline conceptdivandspanin their projectsIssue
No related PR
Additional Information
Pull Request Requirements
location of change: brief description of changeformat, e.g.Intro to HTML and CSS lesson: Fix link textBecausesection summarizes the reason for this PRThis PRsection has a bullet point list describing the changes in this PRIssuesection