From the course: HTML for Programmers
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Nesting elements
- [Instructor] You can nest certain HTML elements inside one another to create more complex layouts but there are a few rules that need to be followed to create a properly nested HTML structure. For example, let's say we have a profile card on a social media site. It contains a profile picture, a name, a geographic location, and a button that will let you add them as a friend. The city name is a link that when clicked will navigate you to the Google Maps page for that city. Let's first code the profile picture, name, geographic location, and button. The markup would look something like this, and here's what the UI currently looks like. Remember, we're focused on the content, not the style. Now let's add the link to the city name. Remember that link elements are inline elements so we can nest them inside of a paragraph or other block text elements. Even though we're not styling the social card, it would be nice to wrap it…