html-head-bodyWhile you may feel like you don't need to concern yourself with it, there's a decent likelihood you'll have to know a bit about it at some point. That's right -- we're talking about HTML, that foreign language only your developer -- or more code-savvy colleagues -- know and speak.

If you fail to adequately comprehend HTML, don't worry -- you are very much not alone. Odds are, you will continue to have relatively small involvement with it at your organization, but we’ll provide you with fundamental knowledge of HTML that will make this language more relatable (and even friendly).

What Is HTML?

First things first: HTML stands for Hyper-Text Markup Language. This is the language developers and your colleagues use to direct the architecture of your website or even landing pages and emails.

In simpler terms, as one of our colleagues cleverly says, “HTML is the skeleton of your webpages, while CSS is the clothing." Whereas CSS (Cascading Style Sheets) gives your webpages styling (color, look, feel, etc.), HTML lays out the structure, from the title and first header, to a bulleted list, all the way to your footer.

This language is spoken through elements, composed of tags that are enclosed in angle brackets. One of the basic rules in HTML is that each element, for the most part, must have an opening and closing tag. This is just so the structure is laid out appropriately, but most importantly, so the web browser can interpret the language and know what structure it should display.

Essentials and Foundations

As the example below shows, the structure always starts with <!DOCTYPE html>. Again, this is so the browser understands it is reading a HTML structure:

<!DOCTYPE html>
<h1>This is our main header</h1>
<p>This is our first paragraph</p>

This small strip of HTML starts with a <body> tag in order to mark the beginning of the body content. Also, within this language, there are headers you can use to organize your content. These header tags range from <h1> to <h6>, with h1 being the largest-size header and h6 the smallest one.

And little by little, it all starts to come together. Some of the tags are pretty intuitive, like the <p> tag. As you may have inferred by now, it stands for paragraphs. Also, as you may have deduced about the closing tags, they simply need a forward slash “/."

Let’s continue and add a couple more pieces to the code. This time, we'll add a head section to the page:

<!DOCTYPE html>
    This is the title of your page
<h1>This is our main header</h1>
<p>This is our <strong>first</strong> paragraph</p>
<h3>This is a smaller header</h3>
<p>More points discussed here</p>

In this continuation of the first example, you can quickly note how fast the structure for a page can grow. A <head> section was added to the structure, where a title was given to the page. Apart from another header, <h3>, the browser will also display the word “first” in bold lettering. The <strong> tags provide this unique feature.

Not So Scary, Right?

There are a lot more tags and subsequent structure you can add to your HTML, such as linking and displaying pictures, but from a general overview, this isn't so bad, right? Now that you have a basic understanding of it, you can feel more at ease whenever an HTML matter is brought to your attention.

One of the great aspects about HTML, like inbound marketing, is that there are vast amounts of content and resources out there you can take advantage of should your interest in HTML grow further. One of those superb resources is Codecademy, which provides fantastic tutorials on HTML and CSS in a natural sequence that makes it very easy to understand (and even fun to do, believe it or not).

We all know that knowledge is power. Well, I like to say that applied knowledge is power. If you want to know more about the structure of your website, or even small content within an email, don’t be afraid to build upon your newfound understanding. You just might learn a trick or two that will make you the new cool HTML kid on the block.

Image credit: Webbfredag

Originally published Oct 7, 2013 4:00:00 PM, updated February 01 2017


Website Development