[001.2] What is HTML?

Learn how HTML lets you structure content for the web.

Subscribe now

What is HTML? [05.13.2016]

HTML stands for HyperText Markup Language, and it is a language that lets you take content and structure it so it can be consumed across many devices and platforms. HTML is the fundamental building block for all web sites and web applications, so let's take a look at it.

Programming Note

We will start with covering the very basics of HTML & CSS. If you are an experienced developer, you may want to skip ahead a few weeks.

Setup

Setup is simple, all you need to follow along is a web browser and a text editor. I suggest checking out the Atom Editor and Google Chrome Browser.

Our first webpage

Now, we'll work out of a blank text file, so let's go ahead and create one of those on the desktop and save it as hello_world.html. Next let's drop this content into the file, save it, and open it in our Browser. Don't worry about the content, we'll go through it in just a moment.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Howdy from title bar.</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>We've created our first webpage, wasn't that <em>easy</em>?</p>
    <h2>Things we've learned today:</h2>
    <ul>
      <li>What HTML is</li>
      <li>Basic html usage</li>
    </ul>
  </body>
</html>

Looks great, congratulations! You've made your first webpage. Now lets look at the code that goes into that page.

Doctype

<!DOCTYPE html>

This is the Doctype. It tells a browser how to parse and render the document. In this specific case we're specifying the doctype for HTML5. There are other doctypes, such as xhtml and the html 4 ones, but for most everyday usage it is best to stick with HTML5.

HTML

<html>
  ...
</html>

Next up is the html tag. You'll notice that there are actually two html tags, and the second one is prepended with a slash. This is a closing tag, and when a tag contains child elements, everything contained is part of the larger structure. In this case we are denoting that everything contained is the html document.

<head>
  ...
</head>

The head element contains metadata about the HTML document that isn't directly rendered by the browser. In this case it has a meta and title tag nested inside of it. There could also be things like Metadata for SEO, CSS, or Javascript in this area.

Meta - Encoding

<meta charset="UTF-8">

This specifies the character encoding for the document, in this case UTF-8.

Title

<title>Howdy from title bar.</title>

This is the title that is shown in the browser bar. It is worth putting some thought behind this, as it is often displayed by third party sites such as Google or Bing search results.

Body

<body>
 ...
</body>

The body element contains the portion of the HTML document that is rendered by the browser. Here it contains a couple of headers, a paragraph, and a list.

H1 & H2

<h1>Hello World!</h1>
...
<h2>Things we've learned today:</h2>

The heading tags come in six different versions: h1-h6. H1 is the most important, and generally there should only be a single one on the page. It is usually best for SEO purposes to have this be the most important part of the page, and not surrounding the header title or logo. In our example we have an h1 heading saying 'Hello World!' and an h2 as a header for our list.

Paragraph & Emphasis

<p>We've created our first webpage, wasn't that <em>easy</em>?</p>

The p tag defines a paragraph, and it acts exactly how you'd expect. When it is rendered there is a line break after it and the next piece of data falls after that line break. That is because it is a block level element. Other block level elements include headings, which we've seen already, and form elements.

There is another type of element, an inline one. This Emphasis tag around 'easy' is an inline element, and its called that because it appears inline with the text. Notice how in our browser rendered version there isn't a line break between easy and the question mark.

Unordered List

<ul>
  <li>What HTML is</li>
  <li>Basic html usage</li>
</ul>

Unordered lists are used for a lot of things, even navigation, but its most straightforward use is just to create a bulleted list. The whole list is surrounded by a set of ul tags, then inside you use a series of li tags to denote each list item.

It is interesting to note that with html (vs xhtml) you actually aren't required to close some tags, including the p and li tags.

<li>What HTML is
<li>Basic html usage

This is perfectly valid html, but it's generally considered a best practice to always close the the tags, as I have in the full example. This is just for consistency and ease of maintaining the code.

### Validation

It's important to make sure you are writing proper html. An easy way to do that in the beginning is to paste your code into the w3 html validator.

Lets try the hello_world.html example and see that it works.

Now, lets remove the and

tags to see that it still works.

Finally, let's try removing a few letters from a closing tag of our h1, maybe like this:

<h1>Hello World!</

And we'll get a nice error explaining what went wrong, along with a suggestion

Saw < when expecting an attribute name. Probable cause: Missing > immediately before.

You'll notice there are a lot of other errors reported also. Generally speaking, it's best to find and fix the first error, then revalidate. Many errors will go away at once this way, and you won't waste time tracking down phantom reports.

Summary

So today we've looked at some basics of HTML, gone through a handful of popular tags, and seen how to validate a simple site. It'd be a good idea to take a few minutes and play with the example file. You could try adding a few list items, changing the paragraph text or adding some more headings. Be sure to check it both in the browser and in the validator along the way!

That's all there is to it. See you next time!

Resources