HTML is easy!

Really, I mean it. HTML is easy. It was designed to be easy. It wasn't made for computer programmers, it was made for people who write papers for a living (specifically scientific papers, but that is another story). It was meant to allow regular people to publish their content in a universal and interconnected way.

Sadly, many people think HTML is the stuff of wizards, uber-nerds, and other such mythical creatures, and their eyes roll to the back of their heads when they see the gobbledygook for the first time. If that describes you, this article will help. I would like to introduce HTML (or perhaps re-introduce it) from the inside out, assuming all you want to do is write something, perhaps a school paper, perhaps an article, perhaps a note to a friend, or perhaps the next groundbreaking scientific achievement. Whatever you want to write, HTML is for you.

HTML is just text

If you are reading this you already know what text is. I am willing to bet you read and write some form of text hundreds of times per day. Well, that's all HTML is: it's just text. Computers can process text, and they have built-in software to allow you to create and edit text. To write HTML you need to use this software, a text editor. On Windows, the built-in text editor is Notepad. For simplicity's sake I will assume you are using Notepad (and Windows) for the rest of this article.

Creating your first HTML page

Open Notepad, and then write something. Anything. Now save the file, but rather than using the default .txt filename extention, use .html instead. Congratulations, you have just created your first HTML page.

Minimize Notepad, then navigate to the folder where you saved your HTML file and double-click the file. Your operating system will open your default web browser and display your text. Now switch back to Notepad and write some more text, save it, and refresh your browser. This is the process for writing HTML: write text in your text editor, and then view your text in your web browser. Rinse and repeat.

Paragraphs

Now write a few paragraphs in your text editor. Switch over to your web browser and refresh... you will notice that your text doesn't look quite like you might expect it to look in the browser. This is because web browsers ignore whitespace characters. Whitespace is for humans, not computers!

In HTML we use tags to identify each paragraph. Tags often come in pairs, with a start tag and an end tag, and this is the case for your first tags: <p> and </p>. With pairs of tags, the start tag is always the one without a slash, and the end tag is the one with the slash (/).

Apply this to the text in your text editor: before the first word in each paragraph, type <p>, and after the last word in each paragraph, type </p>. This tells the web browser that everything betwen the start <p> tag and the end </p> tag is a paragraph. Save the file, then refresh your web browser to view your paragraphs.

<h2>Markup Language</h2>

Headings also use pairs of tags. In the heading for this section of my page I used h2 tags. Just like the p tags, everything between the start <h2> tag and the end </h2> tag is the text to be used as the heading. There are six levels of headers: h1, h2, h3, h4, h5, and h6.

Two common ways to emphasize certain text in your writing are to either use <b>bold</b> or <i>italic</i> text. Once again we use pairs of tags, surrounding text we want to identify as different from the other text. The tags mark up the text contained between them. Are you starting to see a pattern? This is why it is called a "markup language" (the ML in HTML).

Of course, there are exceptions to this pattern; not all tags are used in pairs. Sometimes we need to add an element to our document that is not text. For example, after this paragraph is a horozontal rule (<hr>).

---

You might also want to have a line break in your text, like this:<br>
A line break tells the browser to start the text that follows on the next line, but that it is not a new paragraph. It just starts a new line.

Try these tags out in your HTML file. Make the changes in your text editor, then save, switch to your web browser, and refresh. You'll do this a lot. To save time, try these keyboard commands: Ctrl+S (Save), Alt+Tab (Switch Applications), F5 (Refresh).

Hypertext

Using the markup language above will allow you to write content, but a defining characteristic of the web is hypertext (the HT in HTML), or text that links to other pages. Hypertext, also called a link, is created using a special pair of tags, called anchor tags: <a> and </a>.

In one respect anchor tags work just like the other tag pairs, you put text between them and that text becomes an anchor. But there is a key difference: by themselves the anchor tags don't do anything. To make the anchor into hypertext, you must add a hypertext reference (href) to the start tag and specify a web address for the link.

Here is an example of how you would create a link to this page:

Your web browser reads the start tag like this: display an anchor with the hyperlink reference equal to the web address between these quotes. The href defines where the link should go. There is nothing different about the end </a> tag—it works just like all the other end tags. Replace the web address in the example to define your own links.

Finishing touches

Now let's put in a few details that will make your HTML page complete. All the tags we have seen so far belong to the body of the page, the part of the page that is visible in the browser window. Let's make that official by adding a <body> tag at the very beginning, and a </body> tag at the very end.

If you have guessed that there is another part of the page that is used for tags that are not visible in the browser window, you have guessed correctly. We define this part of the page by adding a pair of <head> and </head> tags before the body; and inside this head section, add another pair to give your page a title: <title> and </title>. The web browser will display the text between the title tags in its title bar.

To show that the head and body go together, wrap them both in a pair of <html> and </html> tags. Your finished structure should look something like this:

Next...

HTML, HyperText Markup Language, allows you to write and describe content as a document, but what about changing the way it looks? Well, that's not actually what HTML is for. That is the job of a related language, Cascading Style Sheets (CSS). Using style sheets is optional—the HTML you created today has no CSS—but most pages you find on the web use them. There are many excelllent CSS templates and frameworks available through your favorite internet search, but for now you might just want to keep it Simple.

There is more to HTML than what I described here, of course, but often the best way to learn is to look at other people's pages and try things out yourself. One final tip: most browsers allow you to view the source HTML for any page you see on the internet by using the Crtl+U keyboard command.