Essential HTML Part One

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!


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.

html tag added


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.

head, title, and style tags added


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.

body tag added


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.

three divs added


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

added three heading tags in each of the three divs


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

added three p tags beneath each heading tag

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.


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

added an image tag

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.


the completed webpage with three headings and sentences and a picture of two cute frogs

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!




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is c Programming?

Room persistence library — Using MutableLiveData observable to update the UI after a database…

Software Engineer Interview Questions to Know Inside and Out — Lowest Common Ancestor & BSTs

What are Memory FoamToppers?

7 DevOps Skills That Every DevOps Engineer Should Have.

{UPDATE} Cozy Island - farm & build Hack Free Resources Generator

How to undo a commit and not screw it up

Sınıf öğretmeni

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Isak Kallenbach

Isak Kallenbach

More from Medium

Bootstrap breakpoint name indicator tool


How to add horizontal dividers in a multi column list

Input Character Limit with counter using HTML, CSS, and Javascript