HTML LEARNING PATH
2.8 Parent and Child Elements
WHY
You may have noticed that the list elements we added had elements nested inside each other. For example, in unordered lists, the <li> elements are nested inside the ul. Nested tags are also called parent / child elements. A <div> element (Document Division Element) is the generic container used for nesting content, which does not inherently represent anything. Nested child elements within one another have a parent block-level order that is relatively positioned to the parent in the document.
HOW
A <div> element (Document Division Element) is the generic container used for nesting content, which does not inherently represent anything. It can be used to group elements for styling purposes using the class or id attributes, or because they share attribute values. Divs should only be used when no other semantic element, such as <article> or <nav>, is appropriate. It’s important to consider the position of a child div element within a parent div container, relative to the parent.
Code sample:
<div class="parent">
<div class="child"></div>
</div>
GLOSSARY
Nested tags
<div> element
TIPS AND RESOURCES
PRACTICE
Add nested parent\/child div elements to your web page.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="Describe the content of your web page here">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Your Name">
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
<div class="parent">
<div class="child"></div>
</div>
<section>
<h1>This is the heading</h1>
<p><img src="url" alt="some_text"></p>
<p>This is the paragraph content. <a href="http://www.google.com">Search Google.com</a></p>
</section>
<section>
<div class="parent">
<div class="child"></div>
</div>
</section>
</body>
</html>
Save your file.