[001.2] What is HTML?

What is HTML?
[02.15.2017]

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

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.

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>
...
</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

<metacharset="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

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!

sign up for full access

Meet your expert

Adam has over 19 years of software development experience, and has spent a good part of that educating new developers. He was previously CTO at inside.com and Development Director at Maxmedia . When Adam isn't coding, he is off hiking in Colorado mountains, or practicing some pretty fly martial arts. He thinks swords are cool.