Identifying the pieces in HTML source code and Understanding the correspondence between source & rendered output

rendered output HTML source code

This is a great example.

Don't forget the missing link!

<p id="jo">
  This is a <u id="don" style="font-size: 24pt">great</u> example.
</p>
<p id="ed">
  Don't forget
  <b id="ann">the missing
    <a id="pat" href="http://www.usna.edu">link</a>!
  </b>
</p>


Use the forms below to highlight pieces of the HTML source code associated with an element specified by its 'id', and to highlight in the rendered output elements specified by 'id'.


In the source code: element
start tag
InnerHTML
end tag
 of element with id

In the rendered output: element with id