This file is not for html viewing. Open it in the atom editor (default view) for it to make sense.

If viewing this fine in a browser source code view, or a different editor, the colors will be different than indicated.

Java developers: spacing is going to be different for you!

<h1>text......</h1>
<h2>text......</h2>
<p>text......</p>
<p class="intro">text......</p>
<p id="myHeader">text......</p>
<a href="about-me.html">Click Me</a>
<img src="myphoto.jpg">                   <!-- not valid -->
<img src="myphoto.jpg" alt="my photo">    <!-- alt required for valid html -->


Expanded view so you can see the structure:

Atom colors:

RED =    |  ORANGE &   | GREEN =     | WHITE =  | RED = | GRAY =
start    |  BLUE = id  | value       | inner    | end   | comment
tag      |  attribute  |             | html     | tag   |
________ | __________  | ___________ | ________ | _____ | ______________________
<h1                            >       text...... </h1>
<h2                            >       text...... </h2>
<p                             >       text...... </p>
<p          class=      "value">       text...... </p>
<p             id=      "value">       text...... </p>
<a           href=      "value">       Click Me   </a>
<img          src=      "value.jpg"                  >    <!-- No inner html -->
<img          src=      "value"  alt="value"         >    <!-- No inner html -->
________ | __________  | ___________ | ________ | _____ | ______________________
         |             |             |          |       |