Taking your first look at HTML

X-Ray Goggles lets beginners peek behind the curtain of the Web

What’s the best way to introduce HTML to a complete beginner — a student, a child, a friend?

There are plenty of choices. You can watch a snappy video on Khan Academy. You can play with an HTML “fiddle” (a site that lets you write and preview bits of markup). Or you can take the classic approach — put some markup in an ordinary text file and load it up in a browser.

You’ll probably use all these approaches at some point. But if you’re giving a new learner their very first glimpse of HTML, my hands-down favorite teaching tool is Mozilla’s X-Ray Goggles.

The idea behind X-Ray Goggles is simple. X-Ray Goggles lets you see the HTML elements behind the curtain — much like the View Source feature in a browser. The difference is that X-Ray Goggles keeps it clean and simple. It lets you study a single element at a time, so you’re never forced to scroll through pages of markup.

And here’s the magic part: not only can you see the markup, you can change it.

Ever had the secret urge to rewrite the front page of the New York times? X-Ray Goggles can make it happen. Do your students want to replace the picture on the school website with Hogwarts or the Death Star? X-Ray Goggles can do that too. (The changes are temporary, of course. You’ll see them on your computer, thanks to X-Ray Goggles, but no one else will be the wiser.)

Let’s see how it works.

Setting up X-Ray Goggles

X-Ray Goggles is just a tiny bit of JavaScript that works in your browser. That means there’s no installation, no security issues, no troubleshooting headaches, and certainly no cost. It’s developed and maintained by the Mozilla Foundation.¹

To get started with X-Ray Goggles, you need to add a special bookmark to your browser toolbar. Here’s how:

  1. Go to https://goggles.mozilla.org.
  2. Make sure you can see your browser’s bookmark bar. If it’s not visible in Google Chrome, for example, pop open the browser menu, choose Bookmarks, and check Show bookmarks menu
  3. Look for the pink button that says Drag and drop me in your bookmark bar. Click the button, and drag it up onto the bookmark bar.

Now you’ll see a new shortcut appear, named X-Ray Goggles.

Once you’ve added the X-Ray Goggles bookmark, you’re ready to learn some HTML (and vandalize some websites). All you’ll see, it’s easy.

Examining a page

The first step is to go to a page that interests you. Then, click the X-Ray Goggles bookmark in the toolbar. This activates X-Ray Goggles. Now you can explore the page just by moving your mouse around.

Wherever you go, X-Ray Goggles finds the HTML element under your mouse and highlights it with a pink box. Check out this example:

Here, the mouse is moving over three different elements on the TIME magazine website: an image at the top, an article title underneath, and a description below that. The top-left corner of the pink box shows the element name for each section: <img>, <a>, and <div>.

You can turn X-Ray Goggles off at any point by pressing the Esc key.

How to rewrite TIME magazine

X-Ray Goggles is a fun way to explore pages. If you’re teaching a quick-and-dirty HTML lesson, you could describe a common type of element (like an anchor or heading) and then ask students to hunt for it in the wild.

But the real fun happens when you change the content of an element. To do that, hover over the element so it’s highlighted in a pink box. Then, click the element. A panel will pop open with the simplified HTML for just that element.

For example, if you click on a title on the TIME magazine site, you’ll see the corresponding <a> element appear underneath:

And you can edit what you see. If you’re using X-Ray Goggles to show someone HTML for the first time, all they really need to understand is that an element is a container, with a funny looking start tag at the beginning (like <a>), an end tag at the end (</a>) and some content in between. Then they can start experimenting.

For example, if you try changing the article title that appears in the <a> element, you’ll get a result like this:

You can use X-Ray Goggles to make more dramatic changes. For example, you can add new elements, point links to different addresses, and replace one image with another.

Consider an <img> element that inserts a picture. If you change the src attribute, you can point it to a different picture. For example, why not replace the Dalai Lama’s portrait with a succulent grilled cheese sandwich you’ve just discovered in a Google image search:

Don’t be afraid to hand X-Ray Goggles to someone who knows nothing about HTML. It’s a great way to learn through playful hacking. After all, sometimes the best learning happens when you get to tweak, change, and outright break things you don’t completely understand. You can break out the HTML editors later.

¹ Mozilla is an not-for-profit foundation that maintains the Firefox browser and promotes open web standards.

² If you’re using a different browser, don’t worry — the X-Ray Goggles page explains exactly what menu options you need to show the bookmarks bar.