What Is HTML? A Beginner’s Guide to Coding

Nathan Ello / February 8, 2019

, , ,

If you’ve been reading up on building a website, chances are you’ve noticed something called HTML. But what is HTML, anyway?

Often confused for a programming language (code that makes software run), HTML is actually what’s known as a “markup language” — code that marks up a document to dictate how it’s formatted.

The documents that HTML “marks up” are web pages. HTML tells internet browsers how to display website information in a way humans can comprehend — and it’s used on every page of every WordPress.com website, even when you don’t see it.

This article will answer the question, “What is HTML?” and will give you some basic examples of how it’s used.

The elements of HTML

HTML documents are composed of “elements,” which simply means pieces of content. These elements can be headers, paragraphs, images, or links. Elements are represented by what’s known as a “tag” — a special label that defines what each element is.

For example, a paragraph on a web page is a type of element, and it’s denoted by the HTML tag “p.” When you label a group of text with a “p” tag, that group of text becomes a paragraph element.

There are a few things that set HTML tags and elements apart from the normal text on your website:

  • HTML tags are written in angle brackets (<>). A paragraph tag in an HTML document would be written as <p>.
  • HTML tags normally come in pairs to show when the element begins and ends. The first tag in a pair is the opening tag, and the second is the closing tag.
  • The closing tag is written just like the opening tag, but with a forward slash inserted before the name (ex. </p>). So in an HTML document, your paragraph would look like this: <p>[paragraph text]</p>.

A sample HTML document

Understanding HTML elements is a little bit like understanding the individual letters of the alphabet. Just as with letters of the alphabet, you can’t throw HTML elements into a random order and expect your browser to make sense of it.

Instead, you must organize your elements in a specific way by following a format that allows the browser to read and display it correctly.

Here’s an example of an HTML document written in the proper format:

<!DOCTYPE html>

<html>

<head>

<title>My Page Title</title>

</head>

<body>

<h1>Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Doesn’t make much sense? Don’t worry — let’s break it down and look at what this jumble of tags and elements means.

HTML documents explained

All HTML documents start with <!DOCTYPE html> as the first line. This tells the browser that it’s reading an HTML document. Without it, the rest of the HTML is useless.

The second line must be <html>, which declares that the actual code is about to begin.

From there it moves into the <head> element. This part contains meta-information about the document — information that the browser reads but the visitor doesn’t. The most common example of meta data is the page’s meta title — the title that search engines read — which is located between the <title> tags.

After the meta data you’ll find the closing head tag </head>, because as mentioned earlier, HTML tags come in pairs.

Now you’ll arrive at the content of the web page, which is labeled with the <body> tag. This is the part that contains the page content a visitor sees when browsing your website.

The <body> section of the HTML page structure is where you will include headings (like <h1>, <h2>, etc.) and paragraphs (<p>) as well as images, links, and anything else that can go on a web page.

Then, because all HTML tags come in pairs, the document ends with </body> to show that the body section is over, and </html> to show that you’ve reached the end of the HTML code.

Now you know not only what HTML is, but also the basics of how to write it. If you want to learn more, there are dozens of online tutorials, including on WordPress.com.

Understanding HTML is the first step into the world of website development. While it’s not necessary for building a WordPress.com website, understanding it will help you make sense of basic web page structures as you move forward with deveoping your site.

Create your new blog or website for free

Get Started