The content on the previous page is a simple webpage using Hypertext Markup Language (HTML). Let's breakdown what it means.
The elements inside the less-than and greater-than symbols are HTML tags. In this example, we have DOCTYPE, html, head, meta, title, body, h1, and p tags. Let's address these individually.
An important and sometimes tricky concept to consider in HTML and other programming languages is nesting of elements. It is helpful to think of our html as a sandwich made up of smaller sandwiches, a branching tree structure, or a complex nested list. In the example we have just walked through, our html opening and closing tags have all of our other elements nested inside. The more complex HTML we add, the more likely we are to have more branches on our tree, deeper nesting of our list, and more sandwiches inside of sandwiches in our larger sandwich. The <html> element (html opening <html> and closing </html> tags) is the parent to the head and body elements, and they are its children. The head and body are siblngs. All of the elements in our head and body tags are children of those elements, and descendants of our HTML. These parent-child-sibling-descendant relationships are important to understand inheretance and can be used when troubleshooting bugs in our code, applying style and interaction.
The example that we have just walked through uses line breaks and tab indentation to communicate nested relationships in HTML. The convention is that each new nested element is added one tab indentation from its parent element. The <html> tags are all the way to the left, head and body tags are one tab indentation in, their child elements are one more tab indentation in, and so forth. Although your HTML will still run if you place all elements on one line using this formatting convention helps to stay organized and collaborate with sighted programmers.
This how the page is actually rendered Next: Additional Elements