HTML stands for ‘Hypertext Markup Language,’ and it’s the foundation for every single webpage or web app on the internet. To be a skilled, employable web developer, you must understand HTML and learn how to read and write it.
HTML is a code language that’s meant to organize content. It helps put the content in proper order. Labeled and categorized correctly. You can think of it as the skeleton of the web page.
All web pages are made with a combination of three main code languages: HTML, CSS, and JavaScript. HTML is the foundation of all this because it helps provide CSS and JavaScript with the information they need to do what they do. We’ll talk more about CSS and JavaScript in future articles, but learning HTML is a very important first step!
In this article we’ll cover:
- The basic structure of an HTML document
- Common HTML tags you should know
- Creating a basic web page project using what we’ve learned
- Great resources you can use to continue learning
By the end of the article, you’ll know how to create a simple web page from scratch and have a great start toward progressing to more advanced topics.
Your First HTML File
Let’s start with creating a simple “Hello World” web page.
First, open up your code editor of choice (i.e. VS Code, Atom, Sublime, Notepad++, or even Notepad or TextEdit).
Then, create a new file named index.html
in an easy-to-find location. When in doubt – use your Desktop!
Add the following code to the file:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML page</title>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website</p>
</body>
</html>
Now that the code is in the index.html
file make sure to save your changes! Next open this file in your web browser (i.e., Google Chrome, Firefox, Edge, Safari, Opera, etc.) by double-clicking the file or dragging it into a browser window.

In your web browser you should see a large heading that says “Hello World!” and a short welcome message underneath. Congratulations, you just made a web page!
Now let’s dig into the code…
What’s going on here?
<!DOCTYPE html>
: This first line in the code let’s the browser know that the file is HTML version 5, that way it will read the code properly. This is the “doctype element”.<html>
: This HTML element wraps the whole page. That’s why you see it near the beginning on line #2 and at the end on line #11. It’s basically saying that everything between the opening HTML tag<html>
and the closing HTML tag</html>
should be read as HTML code.-
<head>
: The ‘head’ element contains metadata, that is, information about the web page itself. In this case, it contains one element – a<title>
element. The<title>
element lets the browser know what content it should display in the browser tab. <body>
: The ‘body’ element contains all the visible content for the web page. Like text, images, and links! In this case, the visible content for the webpage is a large heading element<h1>
, and a paragraph element<p>
.
These 4 main elements constitute the basic ‘HTML skeleton‘. Nearly every single webpage on the internet I’m aware of will contain these 4 elements: a Doctype element, an HTML element, a head element, and a body element.
Angle Brackets
As you can see, HTML uses a lot of ‘less than’ signs <
and ‘greater than’ signs >
.
Most programmers call these Angle Brackets because they have a different meaning than they do in mathematics.
Opening Angle Bracket: The <
opens an HTML tag. Reading the code left to right, it means “Hey, there’s an HTML tag starting here!”
Closing Angle Bracket: The >
closes an HTML tag. It means, “Hey, the HTML tag is ending here!”
HTML Tags and Elements
I used the words ‘element’ and ‘tag’ a lot in that last description, but what do they mean? What is an “HTML element”? What is an “HTML tag”?
Think of it this way: HTML Elements are made of one or more HTML Tags…
- HTML Tag: These are text wrapped with angle brackets. This text includes the tag name, and optionally one or more attributes that describe more about the HTML Tag. HTML Tags could be an opening tag or closing tag.
- HTML Element: These combine the opening HTML tag, any content (like text or other elements), and the closing HTML tag. An HTML element contains both tags, and everything in between them. Some elements can be “self-closing“, which means there is only one HTML tag and no content or closing tag.
Let’s look at some examples…
Basic Example of an HTML Element:
<p>This is a paragraph.</p>
- Opening tag:
<p>
- Tag name: p for paragraph
- Content:
This is a paragraph.
- Closing tag:
</p>
Important notes:
The opening tag and closing tag have the same exact tag name.
The main way to tell the difference is that the closing tag always has a forward-slash character /
before the tag name
Example of an HTML Element with Attributes:
<p id="potato" class="awesome">
Potatoes are awesome. I really like potatoes.
</p>
- Opening tag:
<p id="potato" class="awesome">
- Tag name: p for paragraph
- Attribute: an id attribute that has a value of potato
- Attribute: a class attribute that has a value of awesome
- Content:
Potatoes are awesome. I really like potatoes.
- Closing tag:
</p>
Important notes:
Attributes should only be added to the opening tag of an HTML element and only after the tag name!
Our example shows the code spread between multiple lines. HTML does not care about new-lines. The example code will work the same even if it was all on the same line, or spread out into 5 different consecutive lines.
Example of a self-closing HTML Element:
<img src="potato.png" width="200" height="200" />
- Opening tag: (It’s all one opening tag, that’s it!)
- Tag name: img for ‘image’
- Attribute: src for ‘source’ that has a value of potato.png, the name of the file for the image
- Attribute: width that has a value of 200, the width in pixels we want the image to display on the page
- Attribute: height that has a value of 200, the height in pixels we want the image to display on the page
Important notes:
There are no content or closing tags; a self-closing tag is just one opening tag… usually with attributes to help describe it.
There is an ending slash /> at the end of the self-closing tag. This helps the web browser know and reminds us (the programmers) that no closing tag is associated with this element.
Example of Multiple Nested Elements
<body>
<h1>Potatoes are delicious</h1>
<p>
We all love potatoes. They are the <strong>best</strong> vegetable on earth!
</p>
</body>
Here we have multiple elements nested in each other:
- The <body> element contains:
- An <h1> element that is a heading for the page, and contains some text content.
- A <p> element that is a paragraph for the page, which contains:
- Some text content.
- A <strong> element that indicates the text inside it has strong importance and shows up in the web browser as bold type.
Putting it all together
You will see these demonstrated and explained in more detail throughout this article, but here are the main points so far:
- An HTML tag tells the web browser, and us (the programmers) what type of element is being used and what attributes it has.
- An HTML element is the entire chunk of code from opening tag, through the content, to the closing tag.
- An HTML element can contain two tags with content between them, or it could be a self-closing element that has only one tag.
- A tag name describes what type of element the code is.
- An attribute describes things about the element and lets us label it more descriptively.
- HTML elements can contain text content and the element’s type can affect how it appears on the page.
- HTML elements can have more than one attribute.
- HTML elements can contain other HTML elements in a nested hierarchy.
Common HTML Tags
A big part of learning HTML is getting familiar with the different names of HTML tags. Each of them does something unique, and fits a certain purpose that can help us create our web pages properly.
We’ve seen a few different HTML tag names used so far, like: <h1> , <p>, <img>, and <strong>. In this section, we’ll explain these tag names, and a few more, in detail so you can start using them confidently on your own.
But first, you might be wondering: what’s so important about the tag name?
We use HTML elements with specific tag names that the web browser understands so that our content is displayed and organized on the web page correctly.
Technically, we can make HTML elements and give them any tag name, and they will still show up on the web page. Like this:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML page</title>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website</p>
<potato>This will still show on the page!</potato>
</body>
</html>
Here, I’ve added an invalid <potato>
element to line #9 of the code after the <p>
element. If you do something like this, save your changes, then refresh the web page in your web browser… sure enough – you’ll see the text content in the <potato>
element there.
The problem is that this doesn’t mean anything to the web browser. The web browser doesn’t know what a “potato” HTML element is, so there’s no real use in doing this. The page will look the same if you’ve just added the text on its own there, without the <potato>
tags.
So with that in mind, let’s get started with the most basic and common HTML elements that the web browser does know about.
Headings : <h1>
through <h6>
We have our choice of 6 different heading tags; by default, they each have their own size.
They are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
<h1> is a main heading, <h2> is a subheading, and so on.
As the number in the tag name gets larger, the size of their text content will be smaller.
By default, they are given
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs : <p>
The paragraph element is used for blocks of text.
By default, they are given extra space above and below them equal to the height of one line.
<p>
This is a paragraph about all kinds of interesting
and amazing things. Interesting things are often
the best kinds of things to read about. Aren't you
very interested in the amazing things that this
paragraph is about?
</p>
<p>
This is a paragraph about boring and dull things.
Don't you hate it? Most people can't stand boring
things and will do anything they can not to be bored.
I personally detest dull things and it pains me to
have to write this paragraph about them.
</p>

Lists and List Items: <ul>
, <ol>
, and <li>
There are two different types of list elements, an ‘unordered’ list and an ‘ordered’ list.
<ul>
– An ‘unordered’ list that displays the list as a set of bullet points by default.<ol>
– An ‘ordered’ list that displays the list as a set of numbered items by default.<li>
– A ‘list item’ element contains the content for each item. They are nested inside the List Element to produce a list on the web page.
<ul>
<li>Do the laundry</li>
<li>Take out the trash</li>
<li>Clean the rain gutters</li>
<li>Scrub the kitchen sink</li>
<li>Do the vacuuming</li>
</ul>
<ol>
<li>Apple (AAPL)</li>
<li>NVIDIA (NVDA)</li>
<li>Microsoft (MSFT)</li>
<li>Alphabet (GOOG)</li>
<li>Amazon (AMZN)</li>
</ol>

Images : <img>
The image element is a self-closing element, so you must add attributes to it. Without them, they won’t do much on the web page!
<img src="filename" />
– The image element will almost always have a src attribute. The value of the src attribute should be the file name and location of the image file you’d like shown on the web page.
Let’s walk through setting up an image to appear on your web page, and you’ll see what that means in action.
First, find an image that you’d like to add to your web page. I’ll be using this picture of a happy potato character:

Next, put the image in the same folder as your index.html
file. For example, I have my index.html file in a directory I called dev_blog1 on my Desktop, so the happy_potato.png image file needs to be in that folder as well:

Now when we specify that filename in the <img>
element’s src
attribute’s value, the web browser will go look for it and render it on the web page.
<img src="happy_potato.png" />

Image File Location : src
attribute
In that first example, we put the image file in the same folder as our index.html file. But some times, we might want to put the image in a different folder. To do that we need to give the src attribute a different value that specifies what folder the image file is in. If we put the image in a new folder named images, then the src attribute value will need to be “images/happy_potato.png” …
<img src="images/happy_potato.png" />

Image Size : width
and height
attributes
When you start working with images in your HTML more, you’ll probably find it necessary to change their size to fit the page better. We can use two new attributes to help do that.
width – Sets how wide the image appears on the page. The value is a number that specifies the size in pixels.
height – Sets how tall the image appears on the page. The value is a number that specifies the size in pixels.
<img src="something.png" width="500" height="200" />
You’ll notice that if you set both the width and the height of an image, it may stretch it out in one way or another. To avoid this, you can set just one of these attributes at a time. This will scale up the other attribute to match the one you set to avoid stretching and deforming the image. If you only set the width, then the height will be set automatically and vise-versa.
Links : <a>
Links are clickable pieces of text that cause the user’s web browser to navigate to a different web page.
<a href=”url or filename”>Link Text Content</a> – The link <a> tag needs a href attribute and the value of that href attribute needs to be the URL or filename that the web browser will try to navigate to when the user clicks the link.
Link to Google
An easy way to create your first link is to make a link that goes to the Google home page: https://google.com .
Try adding this to your HTML file and then try clicking the link in your browser!
<a href="https://google.com">Click here to go to Google!</a>
Link to your second HTML file
Most websites have multiple web pages that all link to each other. Let’s try doing that next!
Create a new HTML file in the same folder as our index.html file, let’s call it second.html.
<!DOCTYPE html>
<html>
<head>
<title>My Second Webpage</title>
</head>
<body>
<h1>Hello again, world!</h1>
<p>This is my second web page</p>
</body>
</html>

Now return to your index.html and add a link element <a> that has “second.html” as the value for it’s href attribute!
<a href="second.html">Click here!</a>

Go ahead and give it a try! Open the index.html web page in your web browser and click the link you just made. The web browser should navigate to your second.html web page.
From there you could click the ‘Back’ button in your web browser to go back to the index.html web page. If you want some practice, you could add a link to your second.html that navigates to index.html – if you do that you can click back and forth between your two web pages.
Putting it all together
Ok, so far we’ve got: Headings, Paragraphs, Lists, Images, and Links. I know it doesn’t seem like much, but using just these 5 types of HTML elements we can put together a nice little starter web page.
Here’s one I made to help demonstrate everything we talked about in this article so far.
<!DOCTYPE html>
<html>
<head>
<title>Potatoes</title>
</head>
<body>
<img src="images/happy_potato.png" width="120" />
<h1>Potatoes</h1>
<p>
We all know that potatoes are great, but how much do you really know about them?
</p>
<img src="images/potato_facts.png" width="250" />
<h2>Potato Facts</h2>
<ul>
<li>
In 1995, potatoes were the first food to be grown in space.
The first potato grown in space was called the Quantum Tubers.
</li>
<li>
Potatoes are a very efficient crop, producing more food per unit
of water than any other major crop.
</li>
<li>Potatoes contain more potassium than bananas.</li>
<li>
Potato flowers can be white, pink, red, brown, or yellow, and some
varieties have a strong perfume.
</li>
<li>Potatoes are pollinated by insects like bumblebees.</li>
<li>August 19 is National Potato Day.</li>
</ul>
<img src="images/potato_types.png" width="250" />
<h2>My Favorite Types of Potatoes</h2>
<ol>
<li>
<a href="https://en.wikipedia.org/wiki/Russet_potato">
Russet potato
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Yukon_Gold_potato">
Yukon Gold potato
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Laura_potato">
Laura potato
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Red_Pontiac">
Red Pontiac potato
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Irish_White_potato">
Irish White potato
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Fingerling_potato">
Fingerling potato
</a>
</li>
</ol>
</body>
</html>

Try making your own HTML web page!
The most important part of learning how to code is practicing independently. If this is your first time hearing about all these topics, then it will be hard to remember everything just by reading about them or watching videos. The only way to pick up all this information is by putting them to use. That’s why your assignment this week is to make a web page like the one I showed you here on any topic you like!
Here are some steps to get you started:
- Create a new folder on your computer’s Desktop for your website project. Name it something you’ll remember so you can easily find it later.
- In your project folder, create a new file called index.html. This is the main home web page for your website.
- In your code editor, add the basic HTML skeleton with: the Doctype element, the HTML element, the Body element, and the Head element.
- In the Head element, add the Title element and give your web page a title.
- In the Body element, add some text to start off with.
- Don’t forget to save your changes!
- Double click your index.html file or drag it into your web browser to open it.
- Make sure that the title is showing up in the browser tab and the text you added is showing up on the web page.
- If the web page isn’t loading or the text isn’t showing up right, don’t worry. You can fix it! Study this article, look carefully at your index.html file, and try to find the problem! Don’t give up, keep at it. Whenever you run into any problems when you’re working on this – remember: You can fix it!
- Once you verified your web page is working, add an <h1> element with the main heading for the topic of your website.
- The topic can be anything! Make a website about one of your hobbies like sports or music. Make a website about your favorite TV show or your favorite brand of clothes. Just go for it.
- Under the <h1> element, add a <p> element with some text to introduce your topic. Kind of like an essay or a research paper in school.
- Next add an <h2> element with the first subheading for your website. This will be for a subtopic, a secondary section, that relates to your main topic.
- For example, I made a website about potatoes and the first subtopic had facts about potatoes in it.
- Continue adding sections and information.
- You can use more Paragraphs or Lists – unordered or ordered lists.
- You can add images! Save an image or two from the internet or use images you took using your camera. Put the image files in a folder with your index.html file. Add an <img> element with a src attribute that has the correct file location as the value.
- You can add links to external web pages. Like in my example I added links to Wikipedia for more information about my favorite types of potatoes!
- Challenge #1: Use the width and/or height attributes to adjust the size of the images on your web page so they all match the same size and fit the page well.
- For example, I added a width attribute to all the images on my web page. Check out my example code to get ideas of what you can do!
- Challenge #2: Create more web pages for your website. Then link your web pages together.
- For example, I could have made a page for ‘Potato Facts’, and I could have made another page for ‘Types of Potatoes’… then I could have added links to those pages on the main index.html web page, with links on the new pages that go back to the index.html page.
Many more types of HTML elements
We reviewed five main types of HTML elements and tags, but this is just the beginning. There are over 100 different valid tag names you can use on your web pages. I know that’s a lot… but don’t worry, you won’t need to learn all of them. Especially not right now while you’re getting started. Even as an experienced professional web developer, you will only use 30 or 40 of them most of the time.
I plan to make more articles that describe and demonstrate many of these 30 or 40 HTML elements, but who knows when I’ll get around to doing that?! 🤣 In the meantime, to continue learning here are some great free resources that can teach you far better than I can.
W3Schools.com
- HTML Tutorial – https://www.w3schools.com/html/default.asp
- HTML Video Tutorial – https://www.w3schools.com/videos/index.php
This is a fantastic website for learning code topics. They have main sections for numerous code languages, and within each main section they have a list of links on the left side of the page that go to pages for virtually all the topics you need to get started. They’ve added video tutorials more recently too, but I haven’t reviewed them fully yet to attest to their quality.

FreeCodeCamp.org
- Responsive Web Design Course
This is an amazing website that offers full courses on many programming and web development topics. Their ‘Responsive Web Design Course’ will get you up and going with everything you need to know about coding and designing great websites. Other courses include programming topics, database topics, and much more. Finishing course results in a certification you can add to your resume. Their ‘News’ page features endless amounts of amazing tutorials on virtually any code topic you can think of. It’s a fantastic charity that I actively donate to, and it’s how I got started learning web development over 10 years ago!

TheOdinProject.com
- Introduction to HTML and CSS (Foundations Course)
This is a great website that offers full courses similar to Freecodecamp but with a different style. In their list of ‘Foundations Courses’ you can find their ‘Introduction to HTML and CSS’ course. This would be a great place to continue learning where this article left off. I haven’t personally used this website but it comes highly recommended by others I know. I’m curious to know what you think of it, drop me an email with your thoughts at will@wforbes.net .

That’s All For Now!
Thanks for reading, I hope this article helped you understand some of the basics of using HTML to create a web page. I’m looking forward to creating more articles and videos in the near future that continue where this article left off. If you have any questions or you’re interested in private lessons, please send an email to will@wforbes.net or leave a comment on this page!
Leave a Reply