Nested-tags-and-attributes
Problem Statement
When you take a look at an entire HTML document, it's sometimes challenging to keep track of where tags begin and end. But understanding more about HTML tag nesting and attributes can help everything fall into place.
Objectives
Assess HTML document structure
Identify nested HTML tags
Recognize HTML tag attributes and their purposes
Nested Tags
Whenever we nest an HTML tag inside of another tag, we indent the inner tag so that the overall tag hierarchy is clear. Take a look at the following example of a well-structured HTML document.
Keeping your HTML well indented so that every tag and "level" of nesting is aligned will make your code easier to read and maintain.
HTML Attributes
An HTML attribute is extra information we can add to a tag to identify, classify, style or modify the default behavior of the element the tag contains.
A common use case for HTML attributes is element identification (id
attribute) and/or classification (class
attribute). The id
attribute is used to uniquely identify an element within the whole document. The class
attribute is used to group together similar elements.
Both <id>
and <class>
attributes are often used for styling purposes since they allow us to find a specific element or style similar elements with a single style declaration.
Attributes that identify or classify are not necessary for the HTML tag to work as intended, but other attributes areβfor example, an a
tag, which links a piece of text to another location on our own web page or another web page.
Here we use the href
attribute to tell the HTML tag where the destination of the linked text should be. Without this information, our link won't work and we won't be able to send more people to the Flatiron School website. Certain attributes go hand in hand with certain HTML tags, and as you learn the tags, you'll learn their attributes.
Resources
Nested Tags More on Nested
Tags More on Nesting...
HTML Attributes More on
Conclusion
We use nesting to keep the elements of our HTML document organized, and we use attributes to give our elements more power. With these strategies, we can construct a solid HTML structure that serves as a foundation for anything else we want to build.
Last updated