JavaScript and HTML

JavaScript and the web go together like cheese and pizza: You could have one without the other, but why?

JavaScript gives web pages the ability to change dynamically in response to user input. To get the most out of the integration between JavaScript and the web, you need to know a little bit about how web pages are built.

In this chapter, we explore the language of the web, HTML, and we show you how to use JavaScript to work with and change the HTML inside of web pages.

We love javscript

Writing HTML

HTML stands for Hypertext Markup Language. That’s a fancy way of saying that HTML is a language that’s used to create links (hypertext). HTML is so much more than simply a language for creating links, though.

HTML forms the skeleton that the text, pictures, and JavaScript in web pages attaches to.

Seeing what text looks like without HTML

Markup languages, such as HTML, were invented in order to give documents (such as letters, books, or essays) structure that a computer can understand and do things with.

Listing 5-1 shows a simple list that a person can understand with no problem.

A List
Things I Need
carrots
celery
spinach
Listing 5-1: A List

As a person, you see this list and immediately understand it. But to a computer, this list has some issues. For example, a computer has no way of knowing that Things I Need is a title rather than an item on the list. Figure 5-1 is what it looks like when you view Listing 5-1 with a web browser.

To make this text document understandable to a web browser, we need to use HTML to “mark it up.”

Using HTML: It’s all about the tags

HTML is made up of tags. The tags on clothes give you information about what the clothes are made of and how to wash them. Similarly, tags in HTML give you information about the content of a web page.

Listing 5-1 rendered as HTML in JSFiddle
Figure 5-1: Listing 5-1 rendered as HTML in JSFiddle.

Tags are made up of keywords inside of angle brackets (< and >) and then come in two basic types: the beginning tag and the ending tag. Here’s an example of a beginning tag:

<p>

The p tag, is how you mark up text in a document as a paragraph.

Most beginning tags also have matching ending tags. The only difference between a beginning tag and an ending tag is that an ending tag has a / before the name of the tag. For example, here’s the ending p tag:

</p>

To use tags, just put the thing that you want to mark up (such as text, images, or even other tags) between the beginning and ending tags. For example, here’s how you would mark up a paragraph of text in HTML.

<p>This is a paragraph of text. A paragraph has space before and after it in order to separate it from the other paragraphs of text in a document.</p>

When you have a beginning tag, an ending tag, and content between them, we call the whole thing an HTML element.

HTML has a bunch of tags that you can use to label different parts of a document. Examples of tags include <p> for paragraph, <img> for image, <audio> for audio clips, <video> for video clips, <header> for the top of a web page, and <footer> for the bottom of a web page.

Listing 5-2 shows the list from Listing 5-1 marked up as an HTML document, made up of tags and text.


<html>
   <head>
       <title>My Grocery List</title>
   </head>
   <body>
       <h1>Things I Need</h1>
       <ol>
          <li>carrots</li>
          <li>celery</li>
          <li>spinach</li>
       </ol>
   </body>
</html>
Listing 5-2: A Simple HTML Document.

Figure 5-2 shows what the web page in Listing 5-2 looks like when you view it with a web browser. That’s much better, right?

Listing 5-1 rendered as HTML in JSFiddle
Figure 5-2: Listing 5-2 rendered as HTML in JSFiddle.

Notice that HTML tags don’t actually appear in the web browser. Instead, they modify how the web browser displays text, images, and more.

Looking at the basic structure of a web page

Creating web pages is pretty easy once you know a few things about how they’re built. The first thing to know is that most web pages share a very similar basic structure, and they all must abide by just a few basic rules.

The first rule of creating HTML documents is that tags need to be opened and closed in the right order. One way to remember the order in which tags are opened and closed is FILO, which stands for First In, Last Out.

Notice that the web page in Listing 5-2 starts with the <html> tag and ends with the </html> tag. This is how every web page should start and end. All the other tags in a web page are “inside” the html tags, and they’re closed according to FILO.

For example, the <head> element is inside of <html>. Therefore, the closing head tag must come before the closing html tag. The <ol> tag (which stands for ordered list) comes after the <body> tag, so <ol> is inside of <body> and the </ol> tag must come before the </body> tag.

Another rule of creating HTML documents is that web pages always have a head element and a body element.

  • The head element: The head element is like the brain of your web pages. JavaScript code often goes into the head element, but it doesn’t display in the web browser window.

    In Listing 5-2, we have only a title element in the head. The title is what displays at the top of the browser window or in your browser’s tab when you’re on a web page. The contents of the title element are also typically what shows up as a link in search results.

  • The body element: The body element is where everything that you want to display in the web browser goes.

    In Listing 5-2, we have several elements in the body. Let’s take a look at each of these:

    • The h1 element: The h1 element can be used to identify the most important header on your web pages. Headers typically identify sections of documents or web pages. For example, if this chapter were a web page, the first h1 element would come right after the chapter introduction and would read “Writing HTML.”
    • The ol element: Following the h1 element, we have an ol element. ol stands for ordered list. An ordered list is a list of items that are numbered or lettered in a particular order. HTML also lets you make unordered lists, by using the ul (for unordered list) tag.
    • The li element: Following the ol element, we have an li element. Inside of either an ol or ul element, you can use any number of li elements (li stands for list item) to create the individual list items in your list.

Creating your first web page

Follow these steps to make your own list in JSFiddle.

  • Open your web browser and browse to http://jsfiddle.net.
  • Drag and drop the pane borders to make the HTML pane in JSFiddle as large as you like.
  • We’re only going to be working with the HTML pane for now, so make sure you’re comfortable and have plenty of space.
  • Type the following basic HTML template into the HTML pane.