# 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 1. Assess HTML document structure 2. Identify nested HTML tags 3. 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. ``` Web development course
``` 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 `` and `` 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. ```

This element can be uniquely identified using the 'main_paragraph' id HTML attribute

This element belongs to a group of elements who share the 'other_paragraphs' HTML class attribute

This element also belongs to a group of elements who share the 'other_paragraphs' HTML class attribute

``` 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. ``` Flatiron School ``` 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](http://www.bu.edu/tech/services/cccs/websites/www/non-wordpress/start/html-introduction/syntax/nesting-tags/) More on Nested * [Tags](https://www.thoughtco.com/nesting-html-tags-3466475) More on Nesting... * [Best Practices Web Design](http://www.iraqtimeline.com/maxdesign/basicdesign/principles/prinnest.html) * [HTML Attributes](https://www.w3schools.com/html/html_attributes.asp) More on * [Attributes](https://www.tutorialspoint.com/html/html_attributes.htm) ## 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://certil-remy.gitbook.io/learn/html/untitled-5.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.