Did you know that HTML files are just text?
Here’s some HTML:
<!doctype html>
<html>
<head>
<title>A few phrases in Esperanto</title>
</head>
<body>
<p><strong>Mi amas vin.</strong> <em>I love you.</em></p>
</body>
</html>
(Hey, might as well say something nice!)
That really is just text in the same way that the text of the words of this sentence are text: it’s a series of characters. But it’s a series of characters that obey a particular syntax: that of HTML. We’ll talk about how HTML works in upcoming A Little Web posts (which amounts to learning what different HTML “tags” like <p> and <strong> and so forth do), but for now let’s just think of it as “some HTML”.
Where is the HTML?
One thing that you might not have realized is that you can open up an HTML file that isn’t “on” the internet. You can open it in a browser in the same way that you open a .docx file in Word, or a .jpg in an image editor, etc. The HTML file can just be sitting on your computer, in other words — not on a server on the internet. That is cool, because it means that you can mess around with learning HTML without bothering to learn about how to deal with servers. You can do that later, it doesn’t have to be that hard. (Ask @meaganvigus, she learned one way to do it.)
Okay so, if you save that file (I called it i-love-you-in-esperanto.html) to your computer, you should be able to go to File > Open in your web browser’s menu, select the file you just downloaded, and it will appear as “rendered” content in your browser.
If you do that, you should see something like the following:
Here’s the file you can download:
i-love-you-in-esperanto.html (176 Bytes)
Now, before you open it in your browser, try opening it in a text editor. Every operating system has one, if you’ve never used one before:
By default Windows includes Notepad and macOS comes with TextEdit. Linux distros vary; Ubuntu comes with gedit by default. — MDN
You can do File > Open in your text editor, and you should see that the HTML file you downloaded looks like the HTML above.
Okay, now that you’re sure I haven’t had you download anything other than a simple HTML file, you can go ahead and open it in your browser — the one you’re using right now should work. Try File > Open in your browser, and you should see the page.
The image below summarizes the main idea: in a text editor, you will see the content of an HTML page as text — that is, with the tags visible, and in a web browser, you will see the “rendered” version of the HTML page. If you edit the file in the text editor, and reload it in the browser, you’ll see the changes.
This is a little different from the way a “WYSIWYG” program like Microsoft Word or Libre Office works. There, the editing and the rendering all happens together.
Try making a change somewhere in i-love-you-in-esperanto.html — maybe change the period to an exclamation mark after Mi amas vin. Save it in the text editor, and then open it again in your browser. You should see your change reflected in content of the page.
Congrats, you’re a web developer.
Some things to notice:
- The contents of the
<title>tag do not show up in the contents of the page, they show up in the tab. - The Address Bar doesn’t contain a website’s domain name, it contains a (the way the page you’re reading starts with
https://www.langdoc.net), rather, it begins withfile://and then the path of your own computer. (The screenshot has a path on my computer! At least, the beginning of one because I have a million folders…) - Only the content which is “under” the
<body>tag actually shows up in the browser’s window.
That’s it for today’s 
A Little Web.
Check out our list of
Learning resources for HTML, CSS, and Javascript for more links.