From the course: HTML for Programmers
Unlock the full course today
Join today to access over 24,500 courses taught by industry experts.
Non-semantic elements
From the course: HTML for Programmers
Non-semantic elements
- [Instructor] You may have heard of <div> and <span> before, but what are these elements and when should they be used? <div> and <span> are generic containers that allow you to logically group content. <div> is used for block-level grouping, while <span> is used for inline-level grouping. Let's revisit our social media card example. In our code editor, we have the code for our three social cards, each containing an image, a header, a paragraph, and a button. Notice that the country name in the mock-up is colored blue. How can we style just the country name? We can use a <span> for this. We can then set a class or an inline style on the <span> element to change the country's color to blue. If we look in our browser, we can see that the country for each social card is being colored blue. But since we have three social cards, all of the elements are starting to blend together. It would be nice to group each card's code…