Block-level elements typically create a "block" that occupies the entire width of their parent container, causing a line break before and after the element. They are used to structure the content of a page, and examples include div, h1-h6, p, and ul. In my last role, I used block-level elements to create sections and containers for different parts of the website.
Inline elements, on the other hand, do not create line breaks and only take up the width necessary to display their content. They are often used for styling text within a block-level element, such as span, a, em, and strong. I usually use inline elements when I need to apply specific styles to a portion of the text without changing the overall layout of the page.