[!]
[=title "Rolling Tags List"]
[=content-]
<p>
	This is a rolling list of the HTML tags we've covered in class.
</p>
<p>
	For more detail, check out W3Schools - they have pretty complete writeups on <b>all</b> of the basic tags.
</p>
<ul>
<li><code>&lt;b&gt; ... text ... &lt;/b&gt;</code>: The b tag makes the contained text <b>look like this</b>.</li>
<li><code>&lt;i&gt; ... text ... &lt;/i&gt;</code>: The i tag makes the contained text <i>look like this</i>.</li>
<li><code>&lt;sup&gt; ... text ... &lt;/sup&gt;</code>: The sup tag makes the contained text <sup>look like this</sup>.</li>
<li><code>&lt;h1&gt; ... text ... &lt;/h1&gt;</code>: This is a heading, like:</li>
</ul>
<h1>H1 Heading</h1>
<ul>
<li><code>&lt;h2&gt; ... text ... &lt;/h2&gt;</code>: A subheading, like:</li>
</ul>
<h2>H2 Subheading</h2>
<ul>
<li><code>&lt;q&gt; ... text ... &lt;/q&gt;</code>: Quoted text, <q>like this</q></li>
<li><code>&lt;span&gt; ... text ... &lt;/span&gt;</code>: A simple inline container that doesn't apply any styles by default.</li>
<li><code>&lt;h3&gt;&lt;/h3&gt;, &lt;h4&gt;&lt;/h4&gt;, &lt;h5&gt;&lt;/h5&gt;, &lt;h6&gt;&lt;/h6&gt;</code>: Smaller and smaller headings. Using these is pretty goofy.</li>
<li><code>&lt;br /&gt;</code>: A line break! Used to make<br>
newlines like<br>
these. (Remember HTML mostly ignores newlines unless you add a &lt;br /&gt;)</li>
<li><code>&lt;a href="https://example.com/"&gt; Clickable Text &lt;/a&gt;</code>: A clickable link! Any URL works. The result looks like <a href="https://example.com/">Clickable Text</a>.</li>
<li><code>&lt;img src="image.png" /&gt;</code> An image.</li>
<li><code>&lt;p&gt; ... content ... &lt;/p&gt;</code>: A <i>block-level</i> paragraph, used to organize text.</li>
<li><code>&lt;link /&gt;</code>: This tag is used to link in resources from elsewhere - for instance, <code>&lt;link rel="stylesheet" href="style.css" /&gt;</code> links in
the CSS from <code>style.css</code>.</li>
</ul>
<h2>Don't Forget...</h2>
<ol>
<li>HTML tags start with <b>a less than sign (&lt;)</b>.</li>
<li>The name of an html tag immediately follows: <code>&lt;tag_name</code></li>
<li><b>Optional</b> properties follow (like <code>href</code>, <code>src</code>, etc): <code>&lt;tag_name thingy="something" otherthingy="something else"</code></li>
<li>HTML tags that <i>cannot accept content</i> - like line breaks or images - end with <code>/&gt;</code>, signifying that they end immediately.</li>
<li>HTML tags that <i>can have content</i> - like italics, bolds, headers, links, etc - end with just a greater than sign, <code>&gt;</code></li>
<li>If the tag has content, that follows, like <code>&lt;tag_name thingy="something" otherthingy="something else"&gt; Content "inside" the tag</code></li>
<li>Finally, if the tag has content, the <i>closing pattern</i> follows - something like <code>&lt;/tag_name&gt;</code></li>
</ol>
<p>
So the two ways an HTML tag can look are:<br>
(without content) <code>&lt;tag_name thingy="something" otherthingy="something else" /&gt;</code><br>
(with content) <code>&lt;tag_name thingy="something" otherthingy="something else"&gt; ... content ... &lt;/tag_name&gt;</code><br>
<b>Memorize these patterns! They are pretty important!</b>
</p>
[/]
[#template.html]