From 8f3406b9416da195c88c656f333ab4c8cd204df9 Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 7 Jan 2026 22:08:32 +0800 Subject: [PATCH 1/7] enhance explanation of div and span elements 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 --- .../html_css/css_foundations/block_and_inline.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index 2a4c895e525..8d4ee3d5b26 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -23,11 +23,11 @@ Inline-block elements behave like inline elements, but with block-style padding ### Divs and spans -We can't talk about block and inline elements without discussing divs and spans. All the other HTML elements we have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, divs and spans give no particular meaning to their content. They are just generic boxes that can contain anything. +When building a web page, not every piece of content has a specific semantic tag. Sometimes, you just need a container you can style or position! That's where `div` and `span` come in. -Having elements like this available to us is a lot more useful than it may first appear. We will often need elements that serve no other purpose than to be "hook" elements. We can give an id or class to target them for styling with CSS. Another use case we will face regularly is grouping related elements under one parent element to correctly position them on the page. Divs and spans provide us with the ability to do this. +A `div` is a generic **block-level** container. It behaves like a rectangular section that stretches across the full width of its parent and starts on a new line. Typically, developers use `div` to group related elements into larger chunks of the page, things like *cards*, *sections*, *sidebars*, or *navigation bars*. -Div is a block-level element by default. It is commonly used as a container element to group other elements. Divs allow us to *divide* the page into different blocks and apply styling to those blocks. +In this case, wrapping content in a `div` and giving it a `class` or `id`, you create a convenient hook for CSS layout and styling!

@@ -39,7 +39,9 @@ Div is a block-level element by default. It is commonly used as a container elem -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.

@@ -51,6 +53,10 @@ Span is an inline-level element by default. It can be used to group text content +Neither `div` nor `span` adds meaning to the content the way semantic tags do, as they exist to give you flexible **building blocks**. The key difference is **how they behave in the layout**: `div` participates in the flow as a **block-level** element, while `span` behaves as an **inline** element. + +Once you understand that, choosing between them becomes simple! You can use `div` when you're grouping and positioning **bigger blocks of content**, and use `span` when **you're styling or scripting small pieces** inside a line. + ### Assignment

From bc5e650aef736cc6cc034dca633e2e715a3a369d Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:21:44 +0800 Subject: [PATCH 2/7] update suggested change Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index 8d4ee3d5b26..c34f940d7bd 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -39,7 +39,7 @@ In this case, wrapping content in a `div` and giving it a `class` or `id`, you c -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. +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. From a2acef0c7f3db2be0d245dae80c6d1ac779ce2c5 Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:22:58 +0800 Subject: [PATCH 3/7] update suggested change Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index c34f940d7bd..01fb1ee999a 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -27,7 +27,7 @@ When building a web page, not every piece of content has a specific semantic tag A `div` is a generic **block-level** container. It behaves like a rectangular section that stretches across the full width of its parent and starts on a new line. Typically, developers use `div` to group related elements into larger chunks of the page, things like *cards*, *sections*, *sidebars*, or *navigation bars*. -In this case, wrapping content in a `div` and giving it a `class` or `id`, you create a convenient hook for CSS layout and styling! +In this case, when you wrap content in a `div` and give it a `class` or `id`, you create a convenient hook for CSS layout and styling!

From 7c1cfad6e597e6739313e4c818560b84ccfe7eca Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:23:18 +0800 Subject: [PATCH 4/7] update suggested change Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index 01fb1ee999a..23187e99471 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -55,7 +55,7 @@ For example, highlighting a single word or attaching a tooltip to a phrase. Agai Neither `div` nor `span` adds meaning to the content the way semantic tags do, as they exist to give you flexible **building blocks**. The key difference is **how they behave in the layout**: `div` participates in the flow as a **block-level** element, while `span` behaves as an **inline** element. -Once you understand that, choosing between them becomes simple! You can use `div` when you're grouping and positioning **bigger blocks of content**, and use `span` when **you're styling or scripting small pieces** inside a line. +Once you understand that, choosing between them becomes simple! You can use `div` when you're grouping and positioning bigger blocks of content, and `span` when you're styling or scripting small pieces inside a line. ### Assignment From 137d555bc41ff33de632bb395d3fc1fa7adaf7a4 Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:23:27 +0800 Subject: [PATCH 5/7] update suggested change Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index 23187e99471..e297bc1deb7 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -53,7 +53,7 @@ For example, highlighting a single word or attaching a tooltip to a phrase. Agai -Neither `div` nor `span` adds meaning to the content the way semantic tags do, as they exist to give you flexible **building blocks**. The key difference is **how they behave in the layout**: `div` participates in the flow as a **block-level** element, while `span` behaves as an **inline** element. +Neither `div` nor `span` adds meaning to the content the way semantic tags do, as they exist to give you flexible "building blocks". The key difference is how they behave in the layout: `div` participates in the flow as a block-level element, while `span` behaves as an inline element. Once you understand that, choosing between them becomes simple! You can use `div` when you're grouping and positioning bigger blocks of content, and `span` when you're styling or scripting small pieces inside a line. From 3a39ec3dd70ab3e04fbde35c6f2719f274401ebe Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:23:34 +0800 Subject: [PATCH 6/7] update suggested change Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index e297bc1deb7..4074e6aa84a 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -25,7 +25,7 @@ Inline-block elements behave like inline elements, but with block-style padding When building a web page, not every piece of content has a specific semantic tag. Sometimes, you just need a container you can style or position! That's where `div` and `span` come in. -A `div` is a generic **block-level** container. It behaves like a rectangular section that stretches across the full width of its parent and starts on a new line. Typically, developers use `div` to group related elements into larger chunks of the page, things like *cards*, *sections*, *sidebars*, or *navigation bars*. +A `div` is a generic block-level container. It behaves like a rectangular section that stretches across the full width of its parent and starts on a new line. Typically, you would use a `div` to group related elements inside page components like for example cards, sections, sidebars, or navigation bars. In this case, when you wrap content in a `div` and give it a `class` or `id`, you create a convenient hook for CSS layout and styling! From 9e076b3d46fc367ab53c59202cf04c3154423c47 Mon Sep 17 00:00:00 2001 From: leo <131971014+dayview@users.noreply.github.com> Date: Mon, 20 Apr 2026 14:04:42 +0800 Subject: [PATCH 7/7] Update foundations/html_css/css_foundations/block_and_inline.md Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- foundations/html_css/css_foundations/block_and_inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/html_css/css_foundations/block_and_inline.md b/foundations/html_css/css_foundations/block_and_inline.md index 4074e6aa84a..b7676953239 100644 --- a/foundations/html_css/css_foundations/block_and_inline.md +++ b/foundations/html_css/css_foundations/block_and_inline.md @@ -41,7 +41,7 @@ In this case, when you wrap content in a `div` and give it a `class` or `id`, yo 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. +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.