Text Documents vs. HTML Documents

In essence HTML documents are pretty similar to text documents, but they also allow interactive functionalities. You will learn why special code editors are used to write HTML documents instead of word processors and compare the output file formats of documents. Overall, we take a look at the similarities and differences between text and HTML documents. The essence of this topic is visualized in the picture below.

Text documents are written in Word processors, while HTML documents are written in code editors. The former are saved as .odt, .doc, .docx, .epub or .pdf files, the latter as .htm or .html files.

'HTML document' and 'web page' will be used interchangeable in this article.

Word processor applications like Microsoft Word, Google Docs, Apple Pages or LibreOffice Writer are commonly used to write text documents such as essays for school, job applications, letters, academic theses or anything business related (e.g. concepts, documentations, invoices, etc.). In such documents text can be formatted with various fonts or:

bold
cursive
highlighted
underlined

And documents contain all sorts of elements:

headings
paragraphs
bullet lists
literal quotes and their citations
images
tables

The same elements and formatting choices can be made for web pages. However, there are also many interaction possibilities on web documents that are not supported in text documents. In its most basic form it could be navigating from one page to another via links or entering information in a form but you probably know websites with advanced interactive features like zooming on a map, browser games, etc.

Another different aspect is that you use a code editor to write HTML code instead of using a word processor.

Never use a word processor for programming. Instead use one of the many free code editor.

What are the differences between word processors and code editors?

Word Processors vs. Code Editors

In a word processor you click buttons or other controls to change a selection of written text or the text you are going to write. For example, clicking the 'b' button changes text to bold and the 'i' button changes it to italic. The animated picture below demonstrates this.

This animated picture shows a text editor where the words 'something great' are selected and formatted in bold letters by clicking the 'B' button of the editor.

On the other hand, in a code editor you change the type of text by wrapping it in so called tags. When you write HTML, you can use the <b> tag to make the text bold and the <i> tag for italic. So, the code <b>something great</b> would display the text 'something great' as bold in a browser, as you can see below.

A code editor shows a single sentence in a HTML file. Below is a browser which displays the sentence. A <b> tag is typed before and a </b> tag after the text 'something great'. After saving the file, the 'something great' portion of the sentence is displayed in bold in the browser.

As you can see there are some parallels between writing process of a document in a word processor and a code editor.

Keep in mind, there exists an <em> tag which produces visually similar results to the <i> tag. Though the semantic meaning and respective use cases different between the two tags. Likewise, the <strong> tag is also displayed as bold text in most browsers.

"The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning." - MDN

"The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important." - MDN

Output File Differences

When you write a document in a word processor you usually save the file in a document format like mydocument.docx or export it as mydocument.pdf which are suitable for printing, sharing, or viewing on various devices.

On the other hand, you write HTML code in a code editor and save it as an index.htm or index.html file. A HTML file is typically interpreted and displayed by a browser.

You could also open and edit an HTML file in a regular text editor like Notepad or TextEdit, but that is not recommended because you would miss features such as syntax highlighting. More on that is explained on the page Picking Your Code Editor.

If you try to open a .docx or .pdf in a text editor, you will be surprised with a bunch of unreadable gibberish as seen below.

If you open a binary file like a .docx or .pdf file in a text editor, you will see a lot of seemingly random special characters.

.docx, .epub or .pdf are so called binary file formats. They can only be opened with a proper program that supports the respective file type. Actually, .docx and .epub files can be unzipped like a .zip archive, to reveal some non-binary files but that is another topic in itself...

Anyway, the overall takeaway is that .htm or .html files are basically just regular text files (.txt) that describe a HTML document, or web page. They can still be opened and edited in a normal text editor and the content is basically the same as writing a document. The main difference is that the text also contains some markup instructions. This markup defines the semantics of the content and makes it machine readable. So, browser and assistive tools like translators or text-to-speech screen reader can understand and output the content appropriately. Defining the correct file type is important, so that software that open the file can process the file contents appropriately.

Further Reading / Jokes

Microsoft Word is a horrible editor for programming, but in theory you could use it to write HTML which this funny video by Joma Tech demonstrates: Why Microsoft Word is the best IDE for programming. He shows how annoying and cumbersome it would be to use Word for programming. He also jokingly shows how you could accomplish features like syntax highlighting by laboriously coloring every word individually. Most code editors or IDEs automatically highlight programming keywords to make reading easier. Please don't use a word processor to write HTML code!

HTML Basics