An Easy Introduction to HTML (HTML for Writers, Pt. 1)

14 min read

Writers like to think they’re independent workers, while they often rely on other people to edit and publish their texts. Or they use platforms to provide the technical foundation for their writings. With this HTML for Writers course, we’ll reduce some of these dependencies. Knowing your way around HTML means not being reliant on others to format your works for the web anymore, not even on platforms. In this first part of the series, you’ll learn the what, why, and how of HTML.

Writers rarely consider themselves very tech-savvy. Some might even prefer writing on paper or using a typewriter. That’s okay, you can keep doing that. HTML is not a programming language, even if it’s frequently mistaken for one. It’s a simple markup language with the sole purpose of helping you structure your web pages. If you know how to type < and > on your keyboard, you can learn HTML.

What do I need HTML for?

The web is made of HTML. You might not see it, but it’s always there, underneath in the code of the websites you visit, the newsletters you get, the e-books you read. HTML is the web’s fabric, and learning it is essential for having control over what you publish.

HTML allows you to format and structure your articles, newsletters, and e-books without relying on WYSIWYG (What You See Is What You Get) editors. Their handling of HTML is still error-prone, and, more often than not, they produce faulty HTML that leads to display errors or SEO problems. After this course, you’ll be able to edit the code of your documents yourself. So, even if you continue using a WYSIWYG editor, you’ll have the skills to correct any mistakes whenever something goes wrong.

Learning HTML is also the first step towards mastering CSS—the other essential language for the web. CSS isn’t a programming language, either, but it’s responsible for making web documents look good. If you want to alter the style of your website, newsletter, or e-book, you need to write CSS code. In order to learn how that works, there’s no way around HTML.

Where can I use HTML?

Technically, you can write HTML in any plain text file. Instead of using the file extension .txt, you use .html to create an HTML document. However, this course is not about writing entire HTML documents from scratch. It’s about applying the skills you’ll learn when formatting your texts.

Chances are you’re already using platforms like WordPress and Mailchimp or an e-book publishing software. They make HTML disappear because all you need to do is click buttons and your texts are formatted. However, these platforms often let you edit the underlying HTML code if you choose to. And that’s where you can use your new skills to either write your entire texts in HTML or to just correct mistakes and make little adjustments.

For example, I write all my blog posts in HTML and paste the code directly into WordPress; I detest WordPress’ block editor and want full control over what I publish. For newsletters, I usually use the provided templates because email HTML is a little different from modern HTML (we have to account for people using outdated email software that can’t render proper HTML). I only edit the HTML code of my newsletters when necessary, i.e., when the editor messes up the code, or when I want to use features the service doesn’t provide. When publishing e-books, I code the entire ePub file in HTML and XML before formatting the book in CSS. After all, I want my e-books to look professional—not like self-published romance novels.

What software do I need to write HTML?

You don’t need any special software to write HTML. As I mentioned earlier, you could just use a plain text file. So, whatever you edit plain text files with (TextEdit, for example) is enough to write HTML code.

And while I think that learning to write HTML this way can be invaluable,1 for the majority of people and especially for writers, a real code editor provides much more comfort. Its most important feature is called syntax highlighting: The editor will display code in different colors, which makes it easily distinguishable from text. It also helps to quickly identify certain parts of your code.

Since there are more editors than coding languages, it might be difficult to find the one that suits you best right from the beginning. I encourage you to test a few to find what works best with the way you write. Try some of these:

  • Atom: Free but very versatile and extendable. Available on macOS, Windows, and Linux.
  • Sublime Text: Paid (with a generous trial). Professional editor, available on macOS, Windows, and Linux.
  • Nova: Paid. Very modern approach to code editing. Available on macOS only.
  • BBEdit: Paid. Comparably basic code editor with unique text editing capabilities. My favorite because it’s lightning fast and incredibly stable (crashes once in a decade). Available on macOS only.

To follow along with this course, try the examples (and your own experiments) in any code editor. Save the file with the extension .html and open it in a browser of your choice to view the result. You can keep editing the file; just save it and refresh the browser tab with CMD ⌘ + SHIFT ⇧ + R (Chrome, Firefox) or CMD ⌘ + OPTION ⌥ + R (Safari) to see the changes you’ve made.

How do HTML elements work?

HTML consists of so-called elements. These are components that add semantics and formatting to your documents. An element can be a paragraph, an image, a list, or many other things.

One of the most common HTML elements is the paragraph. We cannot create a paragraph in HTML just by writing text on a new line.

This is a line of text.

We have to wrap the text in <p> tags to tell the browser or e-mail app: This is a paragraph, so please format it like one:

<p>This is an HTML paragraph.</p>

You might have already come across the term “HTML tag”. The words “element” and “tag” are often used synonymously, but they’re not the same. <p> is the start tag and </p> the end tag, whereas the element is the entire component, including the text in between. The tags only determine where an element starts and ends.

HTML offers numerous elements. Here are a few tags that you may have seen before:

  • <strong> and </strong> for bold text
  • <em> and </em> for italics
  • <a> and </a> for links
  • <li> and </li> for list items
  • <img> for images

We’ll get into the specific elements in subsequent parts of this course. For now, you only need to understand that various elements exist and that you typically wrap start and end tags around text to create HTML elements.

Void elements

Not every HTML element comes with a start and end tag. There are elements such as images (<img>) or line breaks (<br>) that consist of only one tag (and no text)—they’re called void elements or empty elements.

That makes sense because you don’t wrap an image around text—the image is the element itself. Just like you don’t wrap a line break or a horizontal rule around anything, either. Whenever an element can stand by itself, you don’t provide an end tag.

Nesting elements

Imagine a paragraph of text (<p>) within which we want to italicize (<em>) a specific word. How would we do that?

In HTML, you can nest elements as deeply as you want:

<p>This is a paragraph with <em>italicized</em> text.</p>

We only have to make sure that we nest elements correctly. Which means we can’t close an outer tag before we haven’t closed all its inner tags. This approach would be wrong:

<p>This is not how you <em>italicize</p> text in a paragraph.</em>

When we open the paragraph element, we have to close all inner HTML elements before closing the paragraph again. The same would be true if we added more elements inside the <em> element. We’d have to close those before we close the <em> before we close the <p>. You can nest HTML elements infinitely, but you have to be careful about closing them in the right order.

Attributes

Occasionally, you may need to provide additional information for a specific tag. That’s what HTML attributes are for. You can add them to all elements, and sometimes they’re even mandatory for the tag to work as expected.

Consider a typical link. If you want to redirect users to another page or website, at the very least, you need to define a web address:

<a href="https://www.disney.com">A link to Disney</a>

The href in this anchor element (<a>) is an attribute. Attributes usually consist of the attribute name and the attribute value.2 You can add attributes in three steps:

  1. Separate the attribute from the element name with a space.
  2. Add the attribute name followed by an equal sign.
  3. Add the attribute value wrapped in quotation marks3 right next to it.

You can add as many attributes to your elements as you like by separating each of them with spaces:

<a href="https://www.disney.com" target="_blank">A link to Disney</a>

Note: Only start tags and void elements take attributes. You must not add an attribute to an end tag.

What is the structure of an HTML element?

While most of the time you’ll only add a couple of HTML elements to your texts, it helps to know what a full HTML document looks like and what it comprises.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The title of your page</title>
  </head>
  <body>
    <p>The content of your page</p>
  </body>
</html>

The actual content of your page goes into the <body> element, but let’s go through all the elements once so you know what you’re dealing with:

  • DOCTYPE: Back when it was not fun to learn HTML, you had to provide one of many doctypes that contained specific sets of rules. Only if you followed these rules when marking up your documents, your HTML would be considered proper. Nowadays, we write this simplified doctype at the very top of HTML documents. The doctype doesn’t have any function apart from making sure things don’t break in older browsers (and nostalgia, of course).
  • <html>: The HTML root element. The entire page is wrapped within this element (note that the end tag appears only at the very end of the document).
  • <head>: The head is where you put all the meta information. That is, everything you don’t want users to see but perhaps browsers or search engines. The most essential elements in every <head> are the charset and title of your page. (Remember writing meta descriptions for SEO? They also go in here.)
    • The charset meta tag is necessary so browsers know you want to use the utf-8 charset for your texts. Charsets are sets of characters used in languages. In the past, we used a variety of charsets depending on the language, but today things are easier, and we use utf-8 almost exclusively because it contains the characters of almost all human languages. Have you ever been on a web page only to find that some parts of the text consisted of unexpected characters? There was probably an issue with the charset.
    • The <title> tag contains the title of your web page (it should be different for every page of a website). Even though elements within the <head> are invisible, the page’s title appears in the browser tab in which the page is viewed in. And search engines display this title as well.
  • <body>: The body tag is where all your texts and images and other elements go that you want your users to see. This is also where we’ll spend the vast majority of our time in this course.

HTML is a very versatile and easy-to-learn language. For writers, HTML is essential if they want to publish their writings digitally, be it on a website, in an e-mail newsletter, or as an e-book. While many platforms can generate the HTML for you, you’re much more independent if you can write and edit HTML yourself. It also gives you more control over how your documents are structured and formatted—which is crucial not only for SEO, but also for people with disabilities. In the next parts of this course, you’ll learn the various HTML elements every writer should know.

  1. When I started learning HTML as a child, I didn’t have any fancy code editor. I used Windows Notepad—no syntax highlighting or any other bells and whistles. While it was cumbersome and unnecessary, it trained my brain to read HTML code very fast. Syntax highlighting is comfortable and I use it almost exclusively today, but writing HTML in black letters on white ground helps your brain learn to distinguish normal text from code in an instant. When you have to edit HTML where no syntax highlighting is available, this can be an invaluable skill. But if you don’t want to go through this very particular kind of torture and make your life miserable, please use a proper code editor from the get-go. Jump back.︎
  2. Some HTML attributes come without values, but as a writer, you’ll rarely use them. One example is input fields: You can disable input fields by adding the attribute disabled to the <input> tag. That way, you prevent users from entering text into the field. You simply write the word disabled at the end of the tag, right before the closing >. No equal signs or quotation marks necessary. Jump back.︎
  3. You can use single or double quotation marks. Just make sure that you don’t mix them. HTML best practice is to always use double quotation marks, though. Jump back.︎