Ah, HTML tags. There sure are a lot of them. And for good reason! They make up the language of the web! There better be a lot of options!

In this series of blogs, we’re going to learn about all sorts of HTML tags, what they do and why they’re important, and of course, we’ll see examples along the way.

But I’m not going to just explain HTML tags in a random order, I’m going to do them in an order in which we’ll actually be building out a website from scratch while we go along. At the end of this blog and each following one you’ll see the end result of our work.

But before we begin remember that every HTML document must begin with <! DOCTYPE html> . Though this isn’t an actual HTML element it is important in that it informs the browser that this document is meant to be rendered as HTML. So don’t forget it!

And without further ado let’s hop (you’ll get this very funny pun later) into our very first HTML element!

HTML

The HTML tag is the first, or root, tag, and everything goes inside of it. It must be used in every HTML file as it is this tag which defines the document as HTML. Not really anymore complicated than that, really. Make sure this is in, but don’t worry about anything past that.

Head

The <head> element goes after the <html> but closes before the body element, which we’ll explain soon.

The <head> contains metadata that will not be displayed on the page itself. This metadata can be very important.

The <title> tag is held here as well as the <link> tag both of which are incredibly important. <title> makes, well, a title for your document, which is important when people are looking for things on a search engine as the document title is the first thing a search engine looks for when returning results.

Then, you have the <link> tag. This will refer to an outside source and link it with your HTML document. These days, styling a webpage is done with CSS, the code for which is held in a separate file. Using the <link> tag is how we establish a connection between the two documents. <link> can also refer to webpages and such, where you can utilize libraries and frameworks (like Bootstrap) in your webpage.

You can also have a <style> tag, which lets you add styling directly on the HTML page, but typically styling is done through CSS now, and doing the styling like this can make the page look overly complicated in messy, but I’ll add in an example anyway so you can see what it look like.

There’s also many other tags that can go into the <head> , which you can check out here.

For now though, with our example, we’re just going to add a <head> , <title> , and <style> (which I’ll use to make the page a nice light grey). We won’t use <link> because we don’t have anything we need to link to right now, such as a stylesheet.

Body

Now we’re at the <body> . This is where the magic happens. Inside of this tag is where all of your words, images, links, etc. will go. The stuff that can go inside of the <body> is a lot more numerous than the <head> so I’ll go into detail on those in a bit. For now lets just simply add the <body> tag in.

Div

Now we get to the <div> , which is one of the most important HTML tags. A <div> is basically like a section or grouping where you put related elements together. This is helpful for organization. People reading your code for say, a personal website, can look a <div> with a class name of “profile” and think, “This is where the person’s personal information like their name and where they live is held.”

There is also a CSS module called Flexbox, which can move elements around an HTML page and this is usually done by moving entire <div> elements.

Pretty much everything you write in HTML should be contained inside the opening and closing <div> elements.

For our example I’m going to create three <div> elements, which will house our next tags. I’ll also give each <div> a different color so you can actually see it, which I’ll do in the <style> element.

Headings

Headings are basically like a title, but for your content, and it is displayed to the user by writing text in between the opening and closing tags. The tags come in different six different “sizes”; from <h1> , the biggest, to <h6> , the smallest. Each size obviously changes how big the text is, but that’s actually ancillary to its main purpose (headings can be changed in size, font and color, just like any other text): Importance.

Heading tell search engines what is the most important aspect of a webpage. Think of it in terms of a sectioned movie review. You have a review for a film called “Turtle vs Bear: Future Fight”. As you break down your review, you have heading for your criticisms of the acting, CGI, cinematography, etc. All of these aspects of the film have a heading and keep your review organized, but if someone was looking for your review the most important thing when they search would be the “Turtle vs Bear: Future Fight Review”. This would be your <h1> heading, because that tells search engines its the most important heading. You should only ever have one <h1> tag per page.

So, for our budding example, lets add an <h1> , an <h2> , and an <h3> , each inside a separate <div> .

p

<p> tags are used to denote blocks of text, everything written inbetween the opening and closing tags will show up on the page. If we use our example of the movie review, underneath a Cinematography heading, the contents of the <p> tag would be the reviewer’s thoughts of the Cinematography of the film.

But wait a second, that third <p> tag says there’s a cute frog below itself. I don’t see that! Let’s not despair, we’ll move on to the last section to sort that right out.

Image

To close out with we’ll talk about the <img> tag. The information within this tag will link to either a webpage or a local file which holds an image and then that image will be displayed on your website.

Simple enough, right? Just remember, not all images will fit perfectly just as-is, so you may have to mess around with the sizing in CSS or in-line HTML, which is what I’ve done for the example below (or you could directly change the size of the picture, though that sounds like more work).

Lets add an image of a couple of cute frogs to our HTML, which we’ll do by using the src attribute on the <img> tag, the value of which, will point to its location.

note: remember to give all of your images an alt-text for users of screen-readers

And there we have it! That’s all the HTML we’re going to write for today, but wouldn’t it be fun to see how what we’ve written actually looks like when we open this HTML file in a browser.

Behold:

And there it is, in all its glory! Probably seems like a lot of writing for such a small outcome, but remember, this stuff is a lot faster to write than to explain, so don’t worry, you’ll be able to whip out something twice as good as that in less time than it takes to read this blog, no doubt.

And that’s it for our Essential HTML Part One. Tune in next week for Part Two, where we’ll learn about links and lists and more!