Sample Video Frame

Created by Zed A. Shaw Updated 2024-02-17 04:54:36

01: Elements

This module will teach you the simplest basics of HTML so you can get started making web pages, and later use JavaScript to control them. We'll quickly go through the part of the standard that talks about "elements" which are created using "tags". If you complete this module before learning JavaScript you will help yourself in three ways:

  1. You will have a first look at how you use text--aka code--to make a computer program do what you want...usually.
  2. You will create your first working thing you can show people on the internet.
  3. You will have a better understanding of the most common place you use JavaScript: the web browser.

You should learn this material even if you're learning JavaScript to be a "backend" programmer. So much of JavaScript's weirdness on the backend comes from its original birth place on the frontend. Learn the frontend history even just a little bit and you will have a much better time using JavaScript for other purposes.


To get started I'm giving you a small "warm-up exercise." Consider this a small puzzle to attempt so you get into the mindset of programming:

  1. Start up your text editor of choice.
  2. Start a new file and name it ex01-warmup.html.
  3. Save this file anywhere.
  4. Type this text into the file: <h1>I Did It!</h1>.
  5. Save it again.
  6. Find the file and then double click it with your mouse. It should open in your browser.

How does it look? If it's not large text saying "I Did It!" then you are missing a character. Triple check your text compared to mine.

The Warm-up section of each lesson is a small little task to complete before doing the rest of the lesson. It will usually be a quick snippet of code to type in, a review of some previous concept you need, or some other small task to get you in the mindset of programming. These sections are optional.

What Is HTML?

The web is built on a combination of technologies, but at the core is the HyperText Markup Language. If you take that acronym apart you can get a first idea of what it actually does:

What Does HTML Code Look Like?

HTML can get very complicated, but to start we can write a single paragraph with an emphasized word:

<p>This word right <em>here</em> is emphasized.</p>

This is actual text you would find in any web page, but what do I mean by "in a web page". You could put this into a file named index.html, and then drag it to your browser to see it actually work. On OSX you can also type open index.html and it will open the index.html file in your favorite browser. On Linux you're on your own since I'm sure you probably have some crazy secure way you run IceWeasel so you're way smarter than me. No matter how you load the web page, when you're done, it will probably look like this:

This word right here is emphasized.

Breaking It Down

You write HTML by surrounding text with <tags> and </tags>. A tag is structured like this:

That starts your tag command to the browser (which I'm just calling the computer because it is really a computer inside your computer), you then write text that fits inside this tag. In the example above, I wrote:

This word right

Then I repeated my process above for the <em> tag to start an emphasized word. After this <em> tag I wrote "here", and then I did the other thing you need to make HTML work: I closed the <em> tag with </em>. Here's what that means:

This finishes our one line up to the emphasis, so we now have written:

<p>This word right <em>here</em>

If you think a little bit ahead, you now realize you have to close that <p> tag at the beginning, and since you already did that for the <em>here</em> part then you should be able to figure out how you end it with </p>.

  1. Write out the remaining text of is emphasized.
  2. Write the < (less-than) to start the ending tag.
  3. Write the / (slash) to tell the browser this is an closing tag.
  4. Write the p (which means paragraph) to tell the browser exactly what tag you're closing.
  5. Write the > (greater-than) to finally end the closing tag.

This basic concept of opening tags, text, and closing tags makes up a large part of HTML. There are a few more components but this is a good start. The one thing you'll need to start grasping is the concept of nesting, or recursive structures.

Programmers Love Nesting

I think if most programmers had to do other jobs they would choose from the following:

  1. Professional string and cable detangler.
  2. Phrenologist, since it's about as exact a science as computer science.
  3. Matryoshka doll designer.

Programmers love nesting things inside things inside other things inside recursive self-similar structures probably more than eating food and breathing air. Meanwhile, normal people like you and me just want to write text like Markdown and get on with our lives, but programmers want you to structure your words into trees.

What this means is when you read that code we've been laboring over:

<p>This word right <em>here</em> is emphasized.</p>

You--a normal human--sees a straight line that looks like This word right here is emphasized with some random trash thrown in to confuse you. I--a programmer--see this as a beautifully clean tree structure that makes me weep with joy at its treeness.

You see, the above code is actually structured like this internally:

   This word right
   is emphasized.

If I break this down completely I would see this structured as:

  1. <p> is the root of the structure. Like the .... trunk of a tree, but we call it a root, even though roots look like branches...just go with it, it's the root not the trunk. Stop being so normal.
  2. This word right here is the first child, or "branch" of the tree.
  3. <em> is the second child. Remember when I say "child" I mean "child of <p>".
  4. here is now the child of <em>, so we're now two levels deep on this tree. The <p> is the grandparent of this word.
  5. </em> actually closing tags are mostly ignored and only serve to tell the browser when to end a tag's contents. This now closes the <em> tag so that we can start more children of <p>.
  6. is emphasized. is the final child of the root <p> tag and we're done.
  7. </p> actually now we're done. Remember, the ending tags aren't counted as children, they're purely just to tell the browser how to end things.

An (Almost) Complete HTML Page

That is a lot of information to start, but you should be able to take the following code and make some educated guesses as to what it does:

    <title>My First Web Page</title>
   <p>This word right <em>here</em></p>

Type this code into your index.html file and load it in the browser again. You can usually just refresh the page and your new content will show up. If you typed it correctly then it should look the exact same as before, but now you should see a title in the browser window bar.

In the next exercise I'll break down this whole page, then get into all of the main tags you'll use, and in the 3rd exercise we'll get into attributes.


Be sure you can answer the following questions:

  1. What is meant by "nesting" in HTML?
  2. What is a tag?
  3. How do would you create a tag named pizza?
  4. How do you load a .html file in your browser?
  5. Do you know how to open a file in your browser from the command line (PowerShell or Terminal)?
  6. What is the <head> and what is the <body> of an .html file?
The Cooldown section of each lesson will give you something to do that sets you up for the next exercise, or presents a test to complete that confirms you've learned the topic.

About The Video

The video is a retelling of the above story, but with demos on how to actually write these files and load them into the browser on different platforms. Actually, I only cover Windows and OSX because Linux people probably can't play the video anyway.

Back to Module Next Lesson

Register for Learn JavaScript the Hard Way

Register today for the course and get the all currently available videos and lessons, plus all future modules for no extra charge.