What is HTML?

I wish my colour coding looked this nice.

HTML, or Hypertext Markup Language, is the building blocks to every website on the Internet. HTML powers this site, Facebook, Google, and everything in between.

If you're a blogger you've probably encountered HTML before. It's often scary to look at and sometimes doesn't make a lot of sense. This article will give you an introduction into the world of HTML so you can better understand it and the workings of your own website.

What does it do?

HTML's primary purposes are displaying, organizing or submitting content. Everything in HTML is made out of "tags", which are wrapped around text to become "elements". Almost all "elements" have an opening and closing tags, with some exceptions. Generally, they look like this:

The <p> tags you see are paragraph tags. They break up content like, well, like paragraphs do.

The <em> tags are a little more complicated. These, along with <strong> tags, help stylize HTML. These tags help give additional importance to certain words, and lesser importance to others. You might also see <i> and <b> tags. These are to italicize and bold words, which are different than <em> and <strong> as those are meant to emphasize words.

Confused? Don't be. HTML is a very flexible language and is very forgiving. This wasn't always the case though. Much like languages throughout history, HTML has gone through various stages, such as HTML4.0, XHTML1.0, XHTML1.1 and now HTML5. HTML5 is the recommended version to use on the modern web. Unless you're visiting an old website, it's running HTML5.

The type of HTML you're using can be seen at the type of your site's code in its <!DOCTYPE HTML>.

How does it look?

To the average human, HTML looks like garbled text, but to a web browser it renders as human readable text like what you're currently reading.

There are hundreds of HTML tags out there for your disposal, but for the most part you'll only use a half dozen. For beginners, it's more important to understand what you're looking at than what they all mean. Here are a few more popular tags.

Have Some Comments? Great!

HTML can get pretty confusing sometimes, especially when multiple people are coding. To help keep everything organized, HTML has "comments" you can put in your code that aren't visible for the average user. You can use these comments to say what's happening in the code, when a section opens or closes, or if you just want to hide something. An HTML comment looks like this:

Image This!

No, that wasn't a typo. We're talking about images, not imaginations. Unlike <p> tags, <img> tags are considered "self closing tags" so they don't have to be closed. This is because images are essentially files that are "linked" into the website. Images have a "src" (the source of the image), an "alt" (alternative text) and occasionally a "title".

In HTML5, <img> tags actually don't need the final slash, so this would work perfectly fine too:

Ego, Superego & id

There is no ego or superego in HTML, but there is an "id". There are also "classes". These are used to style HTML using Cascading Stylesheets, or CSS. They look a little something like this:

You'll notice if you view the above code, you'll see nothing. This is because these elements have no content. Instead of text or images, these are used for separating content on the site. They have no content themselves right now, but they can. Think of them are more like boxes to put content in.

Above, we have a <main> tag with an <article> and <aside> tag inside it. The <main> tag has an "id" of "wrapper". Normally, this is frowned on. "id"s have a lot of style weight to them and often bloat your CSS to try and style around them. They are commonly used for JavaScript, link anchors or for form labels (see below). Only 1 "id" of a kind can be used on a page, and it cannot start with a non-alphanumeric character.

"Classes", on the other hand, can be used frequently and multiple elements can have the same one. In the above example, both the <article> and <aside> elements used the "red-bg" class, and both have multiple classes. This is perfectly valid. Some would argue that naming a class "red-bg" isn't good programming as the colour of that element might become blue or green in the future.

Diving down the HyperText rabbit hole

As you look deeper into HTML, you'll notice some elements have "attributes" and "properties" attached to them. "Attributes" help the browser better understand the HTML, while "properties" help you better understand it. For example:

That code snippet above is a lot more complicated than the previous ones, so let's break it down. In this example we have a <form> element with a <label>, <input> and <button> inside of it.

The <form> element has two attributes. The first is the "method" and "action" attribute. A "method" is how the data will be sent (either via "GET" or "POST") and an "action" says where it'll be sent to. It's okay if you're a bit lost on this subject. We will cover this more in depth in the future.

Next, the <label> element has a "for" attribute on it. When clicking a <label> with this attribute, the user's cursor is automatically placed in an <input> with the matching "id". This attribute isn't commonly used, but it does does improve user experience.

The <input> tag is more complicated. We can see it's a text input that is expecting a name, and it has the "id" of "yourName". These are all attributes of the element. The only actual property in this whole example is "required". This property makes it so that this input must be filled in prior to submitting the form.

I used shorthand while writing the "required" property. You can actually do it either of these ways:

Both versions are valid in HTML5, but only the longhand version is valid in XHTML.

The last element I talked about was the <button> element. Its attribute, "button" means, well, it's just a button. A button's type can either be "button" or "submit".

In Closing

HTML is a fun language to learn and it helps one better understand how websites work. There are hundreds of tags and elements out there and many are much more complicated than the ones listed here. Give yourself time to learn about them and how to manipulate them. The more you learn, the less scary the gobbledygook of HTML becomes.

Do you understand HTML better now? Is there anything else you'd like me to talk about? Let me know in the comments below!



Sign-up for inside tips for making
your website more beautiful!

* indicates required


Sign-up for inside tips for making
your website more beautiful!

* indicates required