Nested HTML Tags And Attributes

Learning Goals

Assess HTML document structure
Identify HTML tag attributes and their purposes

Introduction

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.

Assess HTML Document Structure

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Web development course</title>
  </head>
  <body>
    <header>
    <!-- header element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header -->

      <nav id="main-navigation">
      <!-- nav element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav -->

        <ul>
        <!-- ul element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul -->

          <li><a href="/web">Introduction to the web</a></li>
          <!-- li element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li -->

          <li><a href="/html">Learn HTML</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Keeping your HTML well indented so that every tag and "level" of nesting is aligned will make your code easier to read and maintain.

Identify HTML Tag Attributes and Their Purposes

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.

<element attribute_name="attribute_value" another_attribute_name="another_attribute_value"></element>

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.

<p id='main_paragraph'>This element can be uniquely identified  using the 'main_paragraph' id HTML attribute</p>
  
<p class='other_paragraphs'>This element belongs to a group of elements who share the 'other_paragraphs' HTML class attribute</p>
<p class='other_paragraphs'>This element also belongs to a group of elements who share the 'other_paragraphs' HTML class attribute</p>

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.

<a href="https://flatironschool.com/">Flatiron School</a>

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.

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.