02: Tags in Detail

I'll cover the different types of tags in the html5 specification and then explain which ones you do or don't normally use.

Warm-up

1. Take the file you created in Exercise 01 and view it in your browser.
2. Remember that you can open the directory that holds the file and double-click the index.html.
3. If you run Windows you can do this inside PowerShell with the start command, as in: start index.html. The start command is similar to double-clicking the file with your mouse, and it works on any file, not just .html.
4. If you run OSX you can do this inside Terminal with the open command, as in open index.html.
5. Remember, nothing works in the Terminal if you don't know how to cd to the directory with the file. If you're confused about where your files are then find them graphically, type cd, and then drag the file onto your terminal with the mouse. This will "paste" the file's full path into your terminal so you know where it is.
6. Always remember to add spaces after your commands. If you type cdC:\Users then that's wrong. It'skindoflikeyoutypedasentencelikethis.
7. Finally, how many different ways can you open this file? Can you open it in your editor from the command line? Can you open it in the browser from your editor?

Void Elements

You might run into an inconsistency between some tags that are formed as <tag>...</tag> but others that seem to use <tag/> as if combining the beginning and ending tags into one tag, and others are just a single tag as in <tag>. What's going on?

First, void elements (tags) don't have any "child elements", which means they have no contents. That means this isn't valid HTML:

<img src="zed.png">Hi I'm Zed</img>

The <img> tag is "void", which means the text "Hi I'm Zed" is invalid since nothing can go inside an <img> tag. For comparison, here's how an <a> tag would do this, which is allowed since <a> can have contents (children):

<a href="/home">Hi I'm Zed</a>

The next issue with void elements (tags) is you have two valid ways to write them:

• <img src=""> -- Write only the starting tag and the closing tag is assumed.
• <img src=""/> -- Write a / (slash) right before closing the tag to indicate that it's a void tag and has no children.

You might see me mix and match them in the HTML you read, but that's mostly because a tool I use might require one form or another. In theory you should be able to always use one or the other syntax and it'll be fine, but sometimes you may need to use the more formal <tag/> syntax if something complains.

The void elements (tags) that I commonly use are:

• br
• hr
• img
• input
• link
• meta

Escape Codes

One small thing you need to know to use HTML is the concept of "escape codes". Imagine you want to write out a small document that displays some HTML to someone so they can see the HTML. That's what I'm doing in all of these exercises so you can see the HTML you need to type. You might attempt something like this:

<pre>
<code>
<h1>I've seen things you people wouldn't believe.</h1>
<p>Attack ships on <b>fire</b></p>
<h2>off the shoulder of Orion.</h2>
<small>I watched C-beams</small> <em>glitter</em> in the<br/>
<h4>dark</h4> near the <kbd>Tannhauser Gate</kbd>.
<h2>All those <b>moments</b> will be lost in <em>time</em>,</h2>
<h3>like <em>tears</em> in rain.</h3>
<p>Time to die.</p>
</code>
</pre>

This seems very complex, but you should take the time to type it in and get it working in the browser. The key to getting something like this entered in correctly is to do it in small pieces and "run" it as you go.

Don't type this whole thing in and expect it to work. I couldn't even type all of that in and make it work reliably, and I've been writing HTML longer than many of you have been alive. The better approach is to this:

1. Write 1 or 2 lines. You might need to add the bounding lines too. For example, you can't just type <pre>, but would want to add the </pre> line to close it so it works.
2. Refresh the browser so you see your changes.
3. Fix those lines, or the previous ones, until it works.
4. Move on to the next line.

Nobody, and I mean nobody, codes by writing out huge amounts of code and then trying to fix it. Every programmer who's competent writes small pieces of code, runs what they just wrote, confirms it works, then continues. We build code in pieces.

Once you do you'll realize the browser seems to not realize you meant to show the HTML code and renders it. Why doesn't this work? You put it inside a <pre> tag and it still renders?

The problem is HTML has to process every tag it sees, even if it's inside a <pre>, and you have to help it realize that this is not meant to be processed. This comes up in every programming language and the solution is always use an escape code to protect the special characters that HTML thinks belong to a tag.

The escape codes to use are < for < (less-than) and > for > (greater-than) characters. When the browser sees those 4 characters it processes them not as an HTML tag but as just the less-than and greater-than characters. Let's take a single line from the above challenge and escape it:

<h4>dark</h4> near the <kbd>Tannhauser Gate</kbd>

Now it looks almost entirely unreadable to you as a human, but the the browser it sees that you mean to print this literally and it doesn't try to render it. It should look like this:

<h4>dark</h4> near the <kbd>Tannhauser Gate</kbd>

Raw Text Elements

The two main raw text elements are <script> and <style>. You place JavaScript code into the <script> tag, and you put CSS into the <style> tag. These are called "raw text" because HTML is supposed to ignore the contents and allow another system to process them. The contents of these tags are usually code so you can have ampersands that normally cause HTML to escape the character such as < for <.

There is also the <textarea> and the <title> which are "escapable raw text" elements. Escapable means that the contents can have text and character references, but the text must not contain an ambiguous ampersand. That means if you have an & in the text then it needs to be &.

Finally there's <pre> which is an odd duck. It's for showing "pre formatted" content, like text, so it usually is used to display code, but the contents have to be escaped since it's still processed as HTML. That means <b> would need to be <b> for it to display as <b>.

Cooldown

1. Get all of the HTML in the escape codes example and translate every tag to have the correct escape codes. I recommend you slowly get it working as plain HTML, then fix all of the tags between <code>...</code> to have the correct escape codes.
2. Search Mozilla Developer Network (MDN) for each of these tags: br, hr, img, input, link, meta. Easiest way to do this is use Google and search for "MDN" followed by the tag name.
3. Change your index.html to use each of these tags. It doesn't have to make sense, just use them and see how they look.
4. Do the same thing for all of the other tags in this exercise: textarea, title, pre, b, h1 through h4, a.
5. If you find that you can't remember what these tags do then start a notes.html file and write examples of every tag for later reference.