Project 03: HTML Management

This project focuses on implementing a class to manage and validate HTML tags using stacks and queues. You’ll write code to detect and fix invalid HTML tag nesting, similar to how web browsers handle malformed HTML.

What is HTML?

HTML (Hypertext Markup Language) uses tags to format text. A tag consists of a named element between less-than (<) and greater-than (>) symbols. For example:

1
2
3

<b>bold text</b>
<i>italic text</i>
<b><i>bold and italic</i></b>

There are four types of tags you’ll need to handle:

1. Opening tags like <b> that start formatting
2. Closing tags like </b> that end formatting
3. Self-closing tags like <br/> or <img /> that don’t enclose text
4. Comment tags like <!-- any text -->

Additionally, tags can have attributes like <img src="cat.jpg" width="100">.

The HTMLTag Class

You’ll be working with HTMLTag objects that have these key methods:

• HTMLTag(String element, HTMLTagType type) - Constructor that takes the tag’s contents and type
• isOpening() - Returns true if this is an opening tag like <p>
• isClosing() - Returns true if this is a closing tag like </p>
• isSelfClosing() - Returns true if this is a self-closing tag like <br/>
• matches(other) - Returns true if the other tag matches this one (e.g. <p> matches </p>)
• getMatching() - Returns a new matching tag of opposite type (e.g. <p> returns </p>)
• equals(other) - Returns true if the tags are equal (same type, contents, attributes etc)
• toString() - Returns string representation like "</p>"
• getElement() - Returns the element name of the tag (e.g. “p” for <p>)

Note: The element parameter in the constructor refers to the contents inside the tag, excluding:

• The angular braces <>
• Any starting / (for closing tags)
• Any ending / (for self-closing tags)
• The <!-- and --> delimiters for comments
• Any whitespace before or after these special characters

For example:

1
2
3
4
5

"<p>" → element is "p"
"</p>" → element is "p"
"<br />" → element is "br"
"<!-- comment -->" → element is "comment"
"<  p  >" → element is "p"

Part 1: HTML Manager Implementation

In this part you’ll create a class called HTMLManager that stores HTML tags and can fix invalid nesting. The class must use a Queue to store the tags internally.

HTML Tag Validation

Tags must follow certain rules to be valid:

• Every opening tag must have a matching closing tag
• Inner tags must be closed before outer tags are closed
• Self-closing tags don’t need to be closed

Examples of invalid HTML:

1
2
3

<b><i>this is invalid</b></i> <!-- Wrong: i tag should close first -->
<b>unclosed tag <!-- Wrong: missing </b> -->
</p>no opening tag</p> <!-- Wrong: closing tag with no opener -->

Valid HTML:

1
2
3
4
5

<p>
This <b>word</b> is bold.
<br/> <!-- Self-closing tag is fine -->
<b><i>Both</i></b> formats. <!-- Proper nesting -->
</p>

Constructor and Basic Methods

public HTMLManager(Queue<HTMLTag> page)

public void add(HTMLTag tag)

public List<HTMLTag> getTags()

public String toString()

1
2
3
4
5
6
7
8
9
10

<div>
  <p>
    Hello
    <br/>
    <!-- comment -->
    <b>
      World
    </b>
  </p>
</div>

The fixHTML Method

public void fixHTML()

Part 2: HTML Parser Implementation

The HTMLParser Class

You’ll work with the HTMLParser class that parses raw HTML content into HTMLTag objects. The class maintains an invariant that the current page content always starts with a potential HTML tag or text content - any already processed content has been removed. This means that any time your findCommentTag, findNormalTag or findContent functions are called, they should try to match the start of the current page with whatever type of HTMLTag you are constructing.

In the HTMLParser class, you will find that you are given a Regex Pattern callded TAG_PATTERN which is ^<\\s*(?<closing>/)?\\s*(?<tagData>[^>]*[^/> ])\\s*(?<selfclosing>/)?\\s*>. How this Regex works will be discussed in lecture, and you can go to Prof. Blank’s OH for a deeper understanding if you’re curious! Below, we will show some of the syntax necessary for effectively using this Pattern:

• Matcher m = TAG_PATTERN.matcher(text); will create a Matcher which can be used to apply your Pattern to text, which is a String here.
• m.find() will “search” for the pattern in the text (this must be done before the proceeding operations). Additionally, it will return false if no match is found.
• m.start() will return the index of location where the match was found.
• m.group(groupName) will return the contents of the named group groupName in the match that was found. If it was an optional group and was not matched, this will return null. The named groups in the given regex are closing, tagData, and selfclosing.
• m.group(0) will return the entire string that was matched.

public HTMLTag findNormalTag()

1
2
3

// If page content is "<p class="main">Hello</p>"
findNormalTag() // Returns HTMLTag for element `p class="main"` and updates prevTag using getElement()
                // Page content becomes "Hello</p>"

public HTMLTag findCommentTag()

1
2
3

// If page content is "<!-- header -->content"
findCommentTag() // Returns comment tag with " header " content
                 // Page content becomes "content"

public HTMLTag findContent()

1
2
3

// If page content is "Hello<br>"
findContent() // Returns content tag with "Hello"
              // Page content becomes "<br>"