Nesting Elements
Suppose you are packing your suitcase for a trip. You have to figure out the best way to put items in so your suitcase stays relatively organized while you travel. One approach would be to put all your items in the main part of the suitcase. Your socks, shampoo, and shoes all occupy the same space as the main part of the suitcase.
This might work fine when you pack, but your
suitcase will quickly become disorganized as you travel and need to pull things
out.
Another
approach is to use smaller bags for each category of items you pack. You have a
small bag for your socks, another for your shampoo, and a third for your shoes.
Each of these bags goes into your suitcase, and you can pull out each bag
individually as needed.
Developers
can nest HTML elements as you would nest the small bags and the
suitcase. Nesting occurs when developers include some HTML elements in between
other HTML elements. An HTML element that contains another is that element’s parent. The HTML elements inside the parent are the child elements.
Here is an
example of child paragraph (p) elements nested in a parent division (div)
element.
<div>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
This nesting approach helps give the HTML document structure. It also tells parsers like web browsers how to handle the properties of those elements. For example, child elements can inherit style properties that apply to the parent element. Inheritance occurs when all the child elements take on a property set on a parent element. A parent element with a bold style might pass down that style to all the child elements.
Anatomy
of HTML pages
Web pages that most people experience
are the interesting text, cool graphics, and engaging videos that make up the
content of the page. Each of those content pieces is enclosed in HTML tags.
However, there are parts of an HTML page that users don’t see that make up the
page’s structure.
The standards body WHATWG defines the basic structural elements each HTML page should include. These elements are sections of a web page that parsers use to define how they should handle the elements in those sections. HTML documents should include all the following section elements.
The DOCTYPE declaration is <!DOCTYPE html> .
This declaration describes the version of HTML that is being used.
The HTML element is <html> </html>.
This element wraps all other elements on a page. It defines the type of document—an HTML document—that the parser is reading.
The header element is <head></head>.
This element defines other resources, such as metadata, scripts, and styles that the HTML page uses. Typically, the items in the head element are not experienced directly by the user.
The body element is <body></body>.
This element is where most of the page‘s content will be placed. The elements in this section might use resources like scripts and styles defined in the head section.
In HTML,
these elements are related as follows:
<!DOCTYPE
html>
<html>
<head>
</head>
<body>
</body>
</html>
Every HTML
document should start with this basic framework. Notice that the head and body
elements are nested in the HTML element.
Labels: Internet Programming
posted by Hybrid Education @ March 19, 2025
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home